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
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 |
| ------- | ----------- |
| transcode.html | Transcoding example |
| transcode-mt.html | Transcoding example using multi-thread |
| transcode.esm.html | Transcoding example using module |
| trim.html | Video trimming exmple |
| concatDemuxer.html | Video concat exmple |

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

@ -1,30 +1,38 @@
const tar = require('tar');
const fs = require('fs');
const tar = require("tar");
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 UTIL_VERSION = '0.12.0';
const CORE_VERSION = '0.12.1';
const FFMPEG_VERSION = "0.12.2";
const UTIL_VERSION = "0.12.0";
const CORE_VERSION = "0.12.1";
const FFMPEG_TGZ = `ffmpeg-${FFMPEG_VERSION}.tgz`;
const UTIL_TGZ = `util-${UTIL_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 UTIL_TGZ_URL = `${NPM_URL}/@ffmpeg/util/-/${UTIL_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) => {
console.log(`download and untar ${url}`);
fs.mkdirSync(dst);
mkdir(`${ROOT}/${dst}`);
const data = Buffer.from(await (await fetch(url)).arrayBuffer());
fs.writeFileSync(tgzName, data);
await tar.x({ file: tgzName, C: dst });
await tar.x({ file: tgzName, C: `${ROOT}/${dst}` });
};
fs.mkdirSync('assets');
downloadAndUntar(FFMPEG_TGZ_URL, FFMPEG_TGZ, 'assets/ffmpeg');
downloadAndUntar(UTIL_TGZ_URL, UTIL_TGZ, 'assets/util');
downloadAndUntar(CORE_TGZ_URL, CORE_TGZ, 'assets/core');
mkdir(ROOT);
downloadAndUntar(FFMPEG_TGZ_URL, FFMPEG_TGZ, "ffmpeg");
downloadAndUntar(UTIL_TGZ_URL, UTIL_TGZ, "util");
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,
"scripts": {
"download": "node download-assets.js",
"start": "npx http-server -c-1"
"start": "node server.js"
},
"author": "Jerome Wu <jeromewus@gmail.com>",
"license": "MIT",
"dependencies": {
"express": "^4.18.2",
"serve-index": "^1.9.1",
"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": {
"version": "0.12.0-alpha.0",
"extraneous": true,
"license": "MIT",
"dependencies": {
"tar": "^6.1.15"
@ -280,6 +281,16 @@
"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": {
"version": "0.0.0",
"dependencies": {
@ -6391,8 +6402,9 @@
"license": "MIT"
},
"node_modules/body-parser": {
"version": "1.20.0",
"license": "MIT",
"version": "1.20.1",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
"integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
"dependencies": {
"bytes": "3.1.2",
"content-type": "~1.0.4",
@ -6402,7 +6414,7 @@
"http-errors": "2.0.0",
"iconv-lite": "0.4.24",
"on-finished": "2.4.1",
"qs": "6.10.3",
"qs": "6.11.0",
"raw-body": "2.5.1",
"type-is": "~1.6.18",
"unpipe": "1.0.0"
@ -6414,41 +6426,32 @@
},
"node_modules/body-parser/node_modules/bytes": {
"version": "3.1.2",
"license": "MIT",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/body-parser/node_modules/debug": {
"version": "2.6.9",
"license": "MIT",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dependencies": {
"ms": "2.0.0"
}
},
"node_modules/body-parser/node_modules/depd": {
"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": {
"node": ">= 0.8"
}
},
"node_modules/body-parser/node_modules/ms": {
"version": "2.0.0",
"license": "MIT"
},
"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"
}
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
},
"node_modules/bonjour-service": {
"version": "1.0.14",
@ -6650,7 +6653,7 @@
}
},
"node_modules/browser": {
"resolved": "apps/browser",
"resolved": "apps/vanilla-app",
"link": true
},
"node_modules/browser-stdout": {
@ -7352,8 +7355,9 @@
}
},
"node_modules/content-type": {
"version": "1.0.4",
"license": "MIT",
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
"engines": {
"node": ">= 0.6"
}
@ -9013,12 +9017,13 @@
}
},
"node_modules/express": {
"version": "4.18.1",
"license": "MIT",
"version": "4.18.2",
"resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
"integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
"dependencies": {
"accepts": "~1.3.8",
"array-flatten": "1.1.1",
"body-parser": "1.20.0",
"body-parser": "1.20.1",
"content-disposition": "0.5.4",
"content-type": "~1.0.4",
"cookie": "0.5.0",
@ -9037,7 +9042,7 @@
"parseurl": "~1.3.3",
"path-to-regexp": "0.1.7",
"proxy-addr": "~2.0.7",
"qs": "6.10.3",
"qs": "6.11.0",
"range-parser": "~1.2.1",
"safe-buffer": "5.2.1",
"send": "0.18.0",
@ -9088,19 +9093,6 @@
"version": "0.1.7",
"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": {
"version": "1.2.1",
"license": "MIT",
@ -10546,7 +10538,8 @@
},
"node_modules/iconv-lite": {
"version": "0.4.24",
"license": "MIT",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3"
},
@ -11769,7 +11762,8 @@
},
"node_modules/media-typer": {
"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": {
"node": ">= 0.6"
}
@ -13737,7 +13731,6 @@
},
"node_modules/qs": {
"version": "6.11.0",
"dev": true,
"license": "BSD-3-Clause",
"dependencies": {
"side-channel": "^1.0.4"
@ -13790,7 +13783,8 @@
},
"node_modules/raw-body": {
"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": {
"bytes": "3.1.2",
"http-errors": "2.0.0",
@ -13803,7 +13797,8 @@
},
"node_modules/raw-body/node_modules/bytes": {
"version": "3.1.2",
"license": "MIT",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
"engines": {
"node": ">= 0.8"
}
@ -15138,7 +15133,8 @@
},
"node_modules/serve-index": {
"version": "1.9.1",
"license": "MIT",
"resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
"integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
"dependencies": {
"accepts": "~1.3.4",
"batch": "0.6.1",
@ -16244,7 +16240,8 @@
},
"node_modules/type-is": {
"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": {
"media-typer": "0.3.0",
"mime-types": "~2.1.24"