dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamp vanilla-app

Browse Source
This commit is contained in:
Jerome Wu 2023-08-05 14:41:45 +08:00
parent 2a757fc760
commit 4d559bd267
12 changed files with 133 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/vanilla-app/.gitignore vendored
View File

@ -1,2 +1,2 @@
*.tgz *.tgz
assets public/assets

1
apps/vanilla-app/README.md
View File

@ -23,6 +23,7 @@ Visit http://localhost:8080 to check avaiable examples.
| Example | Description | | Example | Description |
| ------- | ----------- | | ------- | ----------- |
| transcode.html | Transcoding example | | transcode.html | Transcoding example |
| transcode-mt.html | Transcoding example using multi-thread |
| transcode.esm.html | Transcoding example using module | | transcode.esm.html | Transcoding example using module |
| trim.html | Video trimming exmple | | trim.html | Video trimming exmple |
| concatDemuxer.html | Video concat exmple | | concatDemuxer.html | Video concat exmple |

32
apps/vanilla-app/download-assets.js
View File

@ -1,30 +1,38 @@
const tar = require('tar'); const tar = require("tar");
const fs = require('fs'); const fs = require("fs");
const NPM_URL = 'https://registry.npmjs.org'; const NPM_URL = "https://registry.npmjs.org";
const ROOT = "public/assets";
const FFMPEG_VERSION = '0.12.2'; const FFMPEG_VERSION = "0.12.2";
const UTIL_VERSION = '0.12.0'; const UTIL_VERSION = "0.12.0";
const CORE_VERSION = '0.12.1'; const CORE_VERSION = "0.12.1";
const FFMPEG_TGZ = `ffmpeg-${FFMPEG_VERSION}.tgz`; const FFMPEG_TGZ = `ffmpeg-${FFMPEG_VERSION}.tgz`;
const UTIL_TGZ = `util-${UTIL_VERSION}.tgz`; const UTIL_TGZ = `util-${UTIL_VERSION}.tgz`;
const CORE_TGZ = `core-${CORE_VERSION}.tgz`; const CORE_TGZ = `core-${CORE_VERSION}.tgz`;
const CORE_MT_TGZ = `core-mt-${CORE_VERSION}.tgz`;
const FFMPEG_TGZ_URL = `${NPM_URL}/@ffmpeg/ffmpeg/-/${FFMPEG_TGZ}`; const FFMPEG_TGZ_URL = `${NPM_URL}/@ffmpeg/ffmpeg/-/${FFMPEG_TGZ}`;
const UTIL_TGZ_URL = `${NPM_URL}/@ffmpeg/util/-/${UTIL_TGZ}`; const UTIL_TGZ_URL = `${NPM_URL}/@ffmpeg/util/-/${UTIL_TGZ}`;
const CORE_TGZ_URL = `${NPM_URL}/@ffmpeg/core/-/${CORE_TGZ}`; const CORE_TGZ_URL = `${NPM_URL}/@ffmpeg/core/-/${CORE_TGZ}`;
const CORE_MT_TGZ_URL = `${NPM_URL}/@ffmpeg/core-mt/-/${CORE_MT_TGZ}`;
const mkdir = (dir) => {
!fs.existsSync(dir) && fs.mkdirSync(dir);
};
const downloadAndUntar = async (url, tgzName, dst) => { const downloadAndUntar = async (url, tgzName, dst) => {
console.log(`download and untar ${url}`); console.log(`download and untar ${url}`);
fs.mkdirSync(dst); mkdir(`${ROOT}/${dst}`);
const data = Buffer.from(await (await fetch(url)).arrayBuffer()); const data = Buffer.from(await (await fetch(url)).arrayBuffer());
fs.writeFileSync(tgzName, data); fs.writeFileSync(tgzName, data);
await tar.x({ file: tgzName, C: dst }); await tar.x({ file: tgzName, C: `${ROOT}/${dst}` });
}; };
fs.mkdirSync('assets'); mkdir(ROOT);
downloadAndUntar(FFMPEG_TGZ_URL, FFMPEG_TGZ, 'assets/ffmpeg'); downloadAndUntar(FFMPEG_TGZ_URL, FFMPEG_TGZ, "ffmpeg");
downloadAndUntar(UTIL_TGZ_URL, UTIL_TGZ, 'assets/util'); downloadAndUntar(UTIL_TGZ_URL, UTIL_TGZ, "util");
downloadAndUntar(CORE_TGZ_URL, CORE_TGZ, 'assets/core'); downloadAndUntar(CORE_TGZ_URL, CORE_TGZ, "core");
downloadAndUntar(CORE_MT_TGZ_URL, CORE_MT_TGZ, "core-mt");

4
apps/vanilla-app/package.json
View File

@ -5,11 +5,13 @@
"private": true, "private": true,
"scripts": { "scripts": {
"download": "node download-assets.js", "download": "node download-assets.js",
"start": "npx http-server -c-1" "start": "node server.js"
}, },
"author": "Jerome Wu <jeromewus@gmail.com>", "author": "Jerome Wu <jeromewus@gmail.com>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"express": "^4.18.2",
"serve-index": "^1.9.1",
"tar": "^6.1.15" "tar": "^6.1.15"
} }
} }

0
apps/vanilla-app/concatDemuxer.html → apps/vanilla-app/public/concatDemuxer.html
View File

0
apps/vanilla-app/style.css → apps/vanilla-app/public/style.css
View File

45
apps/vanilla-app/public/transcode-mt.html Normal file
View File

@ -0,0 +1,45 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="/assets/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script src="/assets/util/package/dist/umd/index.js"></script>
</head>
<body>
<h3>Upload a video to transcode to mp4 (x264) and play!</h3>
<video id="output-video" controls></video><br/>
<input type="file" id="uploader">
<p id="message"></p>
<script>
const { fetchFile } = FFmpegUtil;
const { FFmpeg } = FFmpegWASM;
let ffmpeg = null;
const transcode = async ({ target: { files } }) => {
const message = document.getElementById('message');
if (ffmpeg === null) {
ffmpeg = new FFmpeg();
ffmpeg.on("log", ({ message }) => {
console.log(message);
})
ffmpeg.on("progress", ({ progress, time }) => {
message.innerHTML = `${progress * 100} %, time: ${time / 1000000} s`;
});
await ffmpeg.load({
coreURL: "/assets/core-mt/package/dist/umd/ffmpeg-core.js",
});
}
const { name } = files[0];
await ffmpeg.writeFile(name, await fetchFile(files[0]));
message.innerHTML = 'Start transcoding';
await ffmpeg.exec(['-i', name, 'output.mp4']);
message.innerHTML = 'Complete transcoding';
const data = await ffmpeg.readFile('output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);
</script>
</body>
</html>

0
apps/vanilla-app/transcode.esm.html → apps/vanilla-app/public/transcode.esm.html
View File

0
apps/vanilla-app/transcode.html → apps/vanilla-app/public/transcode.html
View File

0
apps/vanilla-app/trim.html → apps/vanilla-app/public/trim.html
View File

19
apps/vanilla-app/server.js Normal file
View File

@ -0,0 +1,19 @@
const path = require("path");
const express = require("express");
const serveIndex = require("serve-index");
const app = express();
const PORT = 8080;
const ROOT = path.join(__dirname, "public");
app.use((_, res, next) => {
res.append("Cross-Origin-Opener-Policy", "same-origin");
res.append("Cross-Origin-Embedder-Policy", "require-corp");
next();
});
app.use(express.static(ROOT));
app.use("/", serveIndex(ROOT));
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});

91
package-lock.json generated
View File

@ -20,6 +20,7 @@
}, },
"apps/browser": { "apps/browser": {
"version": "0.12.0-alpha.0", "version": "0.12.0-alpha.0",
"extraneous": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"tar": "^6.1.15" "tar": "^6.1.15"
@ -280,6 +281,16 @@
"node": ">=14.17" "node": ">=14.17"
} }
}, },
"apps/vanilla-app": {
"name": "browser",
"version": "0.12.0-alpha.0",
"license": "MIT",
"dependencies": {
"express": "^4.18.2",
"serve-index": "^1.9.1",
"tar": "^6.1.15"
}
},
"apps/vue-vite-app": { "apps/vue-vite-app": {
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
@ -6391,8 +6402,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/body-parser": { "node_modules/body-parser": {
"version": "1.20.0", "version": "1.20.1",
"license": "MIT", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
"integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
"dependencies": { "dependencies": {
"bytes": "3.1.2", "bytes": "3.1.2",
"content-type": "~1.0.4", "content-type": "~1.0.4",
@ -6402,7 +6414,7 @@
"http-errors": "2.0.0", "http-errors": "2.0.0",
"iconv-lite": "0.4.24", "iconv-lite": "0.4.24",
"on-finished": "2.4.1", "on-finished": "2.4.1",
"qs": "6.10.3", "qs": "6.11.0",
"raw-body": "2.5.1", "raw-body": "2.5.1",
"type-is": "~1.6.18", "type-is": "~1.6.18",
"unpipe": "1.0.0" "unpipe": "1.0.0"
@ -6414,41 +6426,32 @@
}, },
"node_modules/body-parser/node_modules/bytes": { "node_modules/body-parser/node_modules/bytes": {
"version": "3.1.2", "version": "3.1.2",
"license": "MIT", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
"engines": { "engines": {
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/body-parser/node_modules/debug": { "node_modules/body-parser/node_modules/debug": {
"version": "2.6.9", "version": "2.6.9",
"license": "MIT", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dependencies": { "dependencies": {
"ms": "2.0.0" "ms": "2.0.0"
} }
}, },
"node_modules/body-parser/node_modules/depd": { "node_modules/body-parser/node_modules/depd": {
"version": "2.0.0", "version": "2.0.0",
"license": "MIT", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
"engines": { "engines": {
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/body-parser/node_modules/ms": { "node_modules/body-parser/node_modules/ms": {
"version": "2.0.0", "version": "2.0.0",
"license": "MIT" "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
}, "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
"node_modules/body-parser/node_modules/qs": {
"version": "6.10.3",
"license": "BSD-3-Clause",
"dependencies": {
"side-channel": "^1.0.4"
},
"engines": {
"node": ">=0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
}, },
"node_modules/bonjour-service": { "node_modules/bonjour-service": {
"version": "1.0.14", "version": "1.0.14",
@ -6650,7 +6653,7 @@
} }
}, },
"node_modules/browser": { "node_modules/browser": {
"resolved": "apps/browser", "resolved": "apps/vanilla-app",
"link": true "link": true
}, },
"node_modules/browser-stdout": { "node_modules/browser-stdout": {
@ -7352,8 +7355,9 @@
} }
}, },
"node_modules/content-type": { "node_modules/content-type": {
"version": "1.0.4", "version": "1.0.5",
"license": "MIT", "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
"engines": { "engines": {
"node": ">= 0.6" "node": ">= 0.6"
} }
@ -9013,12 +9017,13 @@
} }
}, },
"node_modules/express": { "node_modules/express": {
"version": "4.18.1", "version": "4.18.2",
"license": "MIT", "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
"integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
"dependencies": { "dependencies": {
"accepts": "~1.3.8", "accepts": "~1.3.8",
"array-flatten": "1.1.1", "array-flatten": "1.1.1",
"body-parser": "1.20.0", "body-parser": "1.20.1",
"content-disposition": "0.5.4", "content-disposition": "0.5.4",
"content-type": "~1.0.4", "content-type": "~1.0.4",
"cookie": "0.5.0", "cookie": "0.5.0",
@ -9037,7 +9042,7 @@
"parseurl": "~1.3.3", "parseurl": "~1.3.3",
"path-to-regexp": "0.1.7", "path-to-regexp": "0.1.7",
"proxy-addr": "~2.0.7", "proxy-addr": "~2.0.7",
"qs": "6.10.3", "qs": "6.11.0",
"range-parser": "~1.2.1", "range-parser": "~1.2.1",
"safe-buffer": "5.2.1", "safe-buffer": "5.2.1",
"send": "0.18.0", "send": "0.18.0",
@ -9088,19 +9093,6 @@
"version": "0.1.7", "version": "0.1.7",
"license": "MIT" "license": "MIT"
}, },
"node_modules/express/node_modules/qs": {
"version": "6.10.3",
"license": "BSD-3-Clause",
"dependencies": {
"side-channel": "^1.0.4"
},
"engines": {
"node": ">=0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/express/node_modules/range-parser": { "node_modules/express/node_modules/range-parser": {
"version": "1.2.1", "version": "1.2.1",
"license": "MIT", "license": "MIT",
@ -10546,7 +10538,8 @@
}, },
"node_modules/iconv-lite": { "node_modules/iconv-lite": {
"version": "0.4.24", "version": "0.4.24",
"license": "MIT", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"dependencies": { "dependencies": {
"safer-buffer": ">= 2.1.2 < 3" "safer-buffer": ">= 2.1.2 < 3"
}, },
@ -11769,7 +11762,8 @@
}, },
"node_modules/media-typer": { "node_modules/media-typer": {
"version": "0.3.0", "version": "0.3.0",
"license": "MIT", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
"engines": { "engines": {
"node": ">= 0.6" "node": ">= 0.6"
} }
@ -13737,7 +13731,6 @@
}, },
"node_modules/qs": { "node_modules/qs": {
"version": "6.11.0", "version": "6.11.0",
"dev": true,
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"dependencies": { "dependencies": {
"side-channel": "^1.0.4" "side-channel": "^1.0.4"
@ -13790,7 +13783,8 @@
}, },
"node_modules/raw-body": { "node_modules/raw-body": {
"version": "2.5.1", "version": "2.5.1",
"license": "MIT", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
"integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
"dependencies": { "dependencies": {
"bytes": "3.1.2", "bytes": "3.1.2",
"http-errors": "2.0.0", "http-errors": "2.0.0",
@ -13803,7 +13797,8 @@
}, },
"node_modules/raw-body/node_modules/bytes": { "node_modules/raw-body/node_modules/bytes": {
"version": "3.1.2", "version": "3.1.2",
"license": "MIT", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
"engines": { "engines": {
"node": ">= 0.8" "node": ">= 0.8"
} }
@ -15138,7 +15133,8 @@
}, },
"node_modules/serve-index": { "node_modules/serve-index": {
"version": "1.9.1", "version": "1.9.1",
"license": "MIT", "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
"integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
"dependencies": { "dependencies": {
"accepts": "~1.3.4", "accepts": "~1.3.4",
"batch": "0.6.1", "batch": "0.6.1",
@ -16244,7 +16240,8 @@
}, },
"node_modules/type-is": { "node_modules/type-is": {
"version": "1.6.18", "version": "1.6.18",
"license": "MIT", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
"dependencies": { "dependencies": {
"media-typer": "0.3.0", "media-typer": "0.3.0",
"mime-types": "~2.1.24" "mime-types": "~2.1.24"