Added web worker example

2022-05-17 16:50:23 -05:00 · 2022-05-17 16:50:23 -05:00 · da317da7ef
commit da317da7ef
parent 09871cc01a
7 changed files with 139 additions and 0 deletions
--- a/examples/browser/README.md
+++ b/examples/browser/README.md
@ -8,3 +8,15 @@ $ npm start
 ```

 Visit http://localhost:3000/examples/browser/transcode.html
+
+
+Web Worker Examples
+==================
+
+To run the webworker example, execute:
+
+```
+$ npm run start:worker
+```
+
+Visit http://localhost:3000/examples/browser/transcode.worker.html
--- a/examples/browser/transcode.worker.html
+++ b/examples/browser/transcode.worker.html
@ -0,0 +1,48 @@
+<html>
+  <head>
+    <style>
+      html, body {
+        margin: 0;
+        width: 100%;
+        height: 100%
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    </style>
+  </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 type="module">
+        const worker = new Worker(new URL('./transcode.worker.js', import.meta.url).href);
+        worker.onmessage = (event) => {
+            const {data} = event;
+            message.innerHTML = 'Complete transcoding';
+            const video = document.getElementById('output-video');
+            video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
+        }
+        worker.onerror = (error) => console.log(error);
+        const transcode = async ({ target: { files } }) => {
+            const message = document.getElementById('message');
+            const [file] = files;
+
+            let name = file.name.split('.');
+            const inType = name.pop();
+            name = name.join();
+            const buffer = await file.arrayBuffer();
+            const outType = 'mp4';
+
+            worker.postMessage({name, inType, outType, buffer}, [buffer]);
+
+            message.innerHTML = 'Start transcoding';
+        }
+        const elm = document.getElementById('uploader');
+        elm.addEventListener('change', transcode);
+    </script>
+  </body>
+</html>
--- a/examples/browser/transcode.worker.js
+++ b/examples/browser/transcode.worker.js
@ -0,0 +1,24 @@
+importScripts('/dist/ffmpeg.dev.js');
+const ffmpeg = self.FFmpeg.createFFmpeg({log: true});
+
+onmessage = async (event) => {
+    try {
+        const {buffer, name, inType, outType} = event.data;
+        if (!ffmpeg.isLoaded()) {
+            await ffmpeg.load();
+        }
+
+        ffmpeg.FS('writeFile', `${name}.${inType}`, new Uint8Array(buffer));
+        await ffmpeg.run('-i', `${name}.${inType}`, `${name}.${outType}`);
+        const data = ffmpeg.FS('readFile', `${name}.${outType}`);
+
+        postMessage({buffer: data.buffer, type: "result"}, [data.buffer]);
+
+        // delete files from memory
+        ffmpeg.FS('unlink', `${name}.${inType}`);
+        ffmpeg.FS('unlink', `${name}.${outType}`);
+    } catch (e) {
+        postMessage({type: "error", error: e});
+    }
+}
+
--- a/ffmpeg-ffmpeg-0.10.2.tgz
+++ b/ffmpeg-ffmpeg-0.10.2.tgz
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
  },
  "scripts": {
    "start": "node scripts/server.js",
+    "start:worker": "node scripts/worker-server.js",
    "build": "rimraf dist && webpack --config scripts/webpack.config.prod.js",
    "prepublishOnly": "npm run build",
    "lint": "eslint src",
--- a/scripts/webpack.config.worker.dev.js
+++ b/scripts/webpack.config.worker.dev.js
@ -0,0 +1,29 @@
+const path = require('path');
+const webpack = require('webpack');
+const common = require('./webpack.config.common');
+
+const genConfig = ({
+  entry, filename, library, libraryTarget,
+}) => ({
+  ...common,
+  mode: 'development',
+  target: 'webworker',
+  entry,
+  output: {
+    filename,
+    library,
+    libraryTarget,
+  },
+  devServer: {
+    allowedHosts: ['localhost', '.gitpod.io'],
+  },
+});
+
+module.exports = [
+  genConfig({
+    entry: path.resolve(__dirname, '..', 'src', 'index.js'),
+    filename: 'ffmpeg.dev.js',
+    library: 'FFmpeg',
+    libraryTarget: 'umd',
+  }),
+];
--- a/scripts/worker-server.js
+++ b/scripts/worker-server.js
@ -0,0 +1,25 @@
+const webpack = require('webpack');
+const middleware = require('webpack-dev-middleware');
+const express = require('express');
+const path = require('path');
+const cors = require('cors');
+const webpackConfig = require('./webpack.config.worker.dev');
+
+const compiler = webpack(webpackConfig);
+const app = express();
+
+function coi(req, res, next) {
+  res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+  res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+  next();
+}
+
+app.use(cors());
+app.use(coi);
+
+app.use('/', express.static(path.resolve(__dirname, '..')));
+app.use(middleware(compiler, { publicPath: '/dist', writeToDisk: true }));
+
+module.exports = app.listen(3000, () => {
+  console.log('Server is running on port 3000');
+});