Skip to content

Commit 0444616

Browse files
jeromewujeromewu
authored
Merge pull request #341 from nxtexe/master
Web Worker Support [PATCH]
2 parents 273197d + 0f181b4 commit 0444616

15 files changed

+270
-58
lines changed

‎examples/browser/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,15 @@ $ npm start
88
```
99

1010
Visit http://localhost:3000/examples/browser/transcode.html
11+
12+
13+
Web Worker Examples
14+
==================
15+
16+
To run the webworker example, execute:
17+
18+
```
19+
$ npm run start:worker
20+
```
21+
22+
Visit http://localhost:3000/examples/browser/transcode.worker.html

‎examples/browser/transcode.worker.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<html>
2+
<head>
3+
<style>
4+
html, body {
5+
margin: 0;
6+
width: 100%;
7+
height: 100%
8+
}
9+
body {
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<h3>Upload a video to transcode to mp4 (x264) and play!</h3>
18+
<video id="output-video" controls></video><br/>
19+
<input type="file" id="uploader">
20+
<p id="message"></p>
21+
<script type="module">
22+
const worker = new Worker(new URL('./transcode.worker.js', import.meta.url).href);
23+
worker.onmessage = (event) => {
24+
const {data} = event;
25+
message.innerHTML = 'Complete transcoding';
26+
const video = document.getElementById('output-video');
27+
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
28+
}
29+
worker.onerror = (error) => console.log(error);
30+
const transcode = async ({ target: { files } }) => {
31+
const message = document.getElementById('message');
32+
const [file] = files;
33+
34+
let name = file.name.split('.');
35+
const inType = name.pop();
36+
name = name.join();
37+
const buffer = await file.arrayBuffer();
38+
const outType = 'mp4';
39+
40+
worker.postMessage({name, inType, outType, buffer}, [buffer]);
41+
42+
message.innerHTML = 'Start transcoding';
43+
}
44+
const elm = document.getElementById('uploader');
45+
elm.addEventListener('change', transcode);
46+
</script>
47+
</body>
48+
</html>

‎examples/browser/transcode.worker.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
importScripts('/dist/ffmpeg.dev.js');
2+
const ffmpeg = self.FFmpeg.createFFmpeg({log: true});
3+
4+
onmessage = async (event) => {
5+
try {
6+
const {buffer, name, inType, outType} = event.data;
7+
if (!ffmpeg.isLoaded()) {
8+
await ffmpeg.load();
9+
}
10+
11+
ffmpeg.FS('writeFile', `${name}.${inType}`, new Uint8Array(buffer));
12+
await ffmpeg.run('-i', `${name}.${inType}`, `${name}.${outType}`);
13+
const data = ffmpeg.FS('readFile', `${name}.${outType}`);
14+
15+
postMessage({buffer: data.buffer, type: "result"}, [data.buffer]);
16+
17+
// delete files from memory
18+
ffmpeg.FS('unlink', `${name}.${inType}`);
19+
ffmpeg.FS('unlink', `${name}.${outType}`);
20+
} catch (e) {
21+
postMessage({type: "error", error: e});
22+
}
23+
}
24+

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ffmpeg/ffmpeg",
3-
"version": "0.10.1",
3+
"version": "0.10.2",
44
"description": "FFmpeg WebAssembly version",
55
"main": "src/index.js",
66
"types": "src/index.d.ts",
@@ -9,13 +9,15 @@
99
},
1010
"scripts": {
1111
"start": "node scripts/server.js",
12+
"start:worker": "node scripts/worker-server.js",
1213
"build": "rimraf dist && webpack --config scripts/webpack.config.prod.js",
14+
"build:worker": "rimraf dist && webpack --config scripts/webpack.config.worker.prod.js",
1315
"prepublishOnly": "npm run build",
1416
"lint": "eslint src",
1517
"wait": "rimraf dist && wait-on http://localhost:3000/dist/ffmpeg.dev.js",
1618
"test": "npm-run-all -p -r start test:all",
1719
"test:all": "npm-run-all wait test:browser:ffmpeg test:node:all",
18-
"test:node": "node --experimental-wasm-threads node_modules/.bin/_mocha --exit --bail --require ./scripts/test-helper.js",
20+
"test:node": "node node_modules/mocha/bin/_mocha --exit --bail --require ./scripts/test-helper.js",
1921
"test:node:all": "npm run test:node -- ./tests/*.test.js",
2022
"test:browser": "mocha-headless-chrome -a allow-file-access-from-files -a incognito -a no-sandbox -a disable-setuid-sandbox -a disable-logging -t 300000",
2123
"test:browser:ffmpeg": "npm run test:browser -- -f ./tests/ffmpeg.test.html"

‎scripts/server.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@ const webpackConfig = require('./webpack.config.dev');
88
const compiler = webpack(webpackConfig);
99
const app = express();
1010

11+
function coi(req, res, next) {
12+
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
13+
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
14+
next();
15+
}
16+
1117
app.use(cors());
18+
app.use(coi);
19+
1220
app.use('/', express.static(path.resolve(__dirname, '..')));
1321
app.use(middleware(compiler, { publicPath: '/dist', writeToDisk: true }));
1422

‎scripts/webpack.config.worker.dev.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const path = require('path');
2+
const webpack = require('webpack');
3+
const common = require('./webpack.config.common');
4+
5+
const genConfig = ({
6+
entry, filename, library, libraryTarget,
7+
}) => ({
8+
...common,
9+
mode: 'development',
10+
target: 'webworker',
11+
entry,
12+
output: {
13+
filename,
14+
library,
15+
libraryTarget,
16+
},
17+
devServer: {
18+
allowedHosts: ['localhost', '.gitpod.io'],
19+
},
20+
});
21+
22+
module.exports = [
23+
genConfig({
24+
entry: path.resolve(__dirname, '..', 'src', 'index.js'),
25+
filename: 'ffmpeg.dev.js',
26+
library: 'FFmpeg',
27+
libraryTarget: 'umd',
28+
}),
29+
];

‎scripts/webpack.config.worker.prod.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const path = require('path');
2+
const common = require('./webpack.config.common');
3+
4+
const genConfig = ({
5+
entry, filename, library, libraryTarget,
6+
}) => ({
7+
...common,
8+
mode: 'production',
9+
devtool: 'source-map',
10+
target: 'webworker',
11+
entry,
12+
output: {
13+
path: path.resolve(__dirname, '..', 'dist'),
14+
filename,
15+
library,
16+
libraryTarget,
17+
},
18+
});
19+
20+
module.exports = [
21+
genConfig({
22+
entry: path.resolve(__dirname, '..', 'src', 'index.js'),
23+
filename: 'ffmpeg.min.js',
24+
library: 'FFmpeg',
25+
libraryTarget: 'umd',
26+
}),
27+
];

‎scripts/worker-server.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const webpack = require('webpack');
2+
const middleware = require('webpack-dev-middleware');
3+
const express = require('express');
4+
const path = require('path');
5+
const cors = require('cors');
6+
const webpackConfig = require('./webpack.config.worker.dev');
7+
8+
const compiler = webpack(webpackConfig);
9+
const app = express();
10+
11+
function coi(req, res, next) {
12+
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
13+
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
14+
next();
15+
}
16+
17+
app.use(cors());
18+
app.use(coi);
19+
20+
app.use('/', express.static(path.resolve(__dirname, '..')));
21+
app.use(middleware(compiler, { publicPath: '/dist', writeToDisk: true }));
22+
23+
module.exports = app.listen(3000, () => {
24+
console.log('Server is running on port 3000');
25+
});

‎src/browser/defaultOptions.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
const resolveURL = require('resolve-url');
21
const { devDependencies } = require('../../package.json');
32

43
/*
54
* Default options for browser environment
65
*/
7-
module.exports = {
8-
corePath: typeof process !== 'undefined' && process.env.NODE_ENV === 'development'
9-
? resolveURL('/node_modules/@ffmpeg/core/dist/ffmpeg-core.js')
10-
: `https://unpkg.com/@ffmpeg/core@${devDependencies['@ffmpeg/core'].substring(1)}/dist/ffmpeg-core.js`,
11-
};
6+
const corePath = typeof process !== 'undefined' && process.env.NODE_ENV === 'development'
7+
? new URL('/node_modules/@ffmpeg/core/dist/ffmpeg-core.js', import.meta.url).href
8+
: `https://unpkg.com/@ffmpeg/core@${devDependencies['@ffmpeg/core'].substring(1)}/dist/ffmpeg-core.js`
9+
10+
export {corePath};

0 commit comments

Comments
 (0)