Revamp vanilla-app

ffmpegwasm · Aug 5, 2023 · bebd156 · bebd156
1 parent f566813
commit bebd156
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 61 deletions.
diff --git a/apps/vanilla-app/.gitignore b/apps/vanilla-app/.gitignore
@@ -1,2 +1,2 @@
 *.tgz
-assets
+public/assets
diff --git a/apps/vanilla-app/README.md b/apps/vanilla-app/README.md
@@ -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 |
diff --git a/apps/vanilla-app/download-assets.js b/apps/vanilla-app/download-assets.js
@@ -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");
diff --git a/apps/vanilla-app/package.json b/apps/vanilla-app/package.json
@@ -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 <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "express": "^4.18.2",
+    "serve-index": "^1.9.1",
     "tar": "^6.1.15"
   }
 }
diff --git a/apps/vanilla-app/concatDemuxer.html → apps/vanilla-app/public/concatDemuxer.html b/apps/vanilla-app/concatDemuxer.html → apps/vanilla-app/public/concatDemuxer.html
diff --git a/apps/vanilla-app/style.css → apps/vanilla-app/public/style.css b/apps/vanilla-app/style.css → apps/vanilla-app/public/style.css
diff --git a/apps/vanilla-app/public/transcode-mt.html b/apps/vanilla-app/public/transcode-mt.html
@@ -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>
diff --git a/apps/vanilla-app/transcode.esm.html → apps/vanilla-app/public/transcode.esm.html b/apps/vanilla-app/transcode.esm.html → apps/vanilla-app/public/transcode.esm.html
diff --git a/apps/vanilla-app/transcode.html → apps/vanilla-app/public/transcode.html b/apps/vanilla-app/transcode.html → apps/vanilla-app/public/transcode.html
diff --git a/apps/vanilla-app/trim.html → apps/vanilla-app/public/trim.html b/apps/vanilla-app/trim.html → apps/vanilla-app/public/trim.html
diff --git a/apps/vanilla-app/server.js b/apps/vanilla-app/server.js
@@ -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}`);
+});
diff --git a/package-lock.json b/package-lock.json