Revamp vanilla-app
This commit is contained in:
Jerome Wu
2
apps/vanilla-app/.gitignore
vendored
2
apps/vanilla-app/.gitignore
vendored
@@ -1,2 +1,2 @@
|
||||
*.tgz
|
||||
assets
|
||||
public/assets
|
||||
|
||||
@@ -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 |
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
45
apps/vanilla-app/public/transcode-mt.html
Normal file
45
apps/vanilla-app/public/transcode-mt.html
Normal 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>
|
||||
19
apps/vanilla-app/server.js
Normal file
19
apps/vanilla-app/server.js
Normal 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}`);
|
||||
});
|
||||
Reference in New Issue
Block a user