dumtruck/konowebcodecs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #341 from nxtexe/master

Browse Source 
Web Worker Support [PATCH]
This commit is contained in:
jeromewu 2022-08-14 20:51:27 +08:00 committed by GitHub
commit d93815ad14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 270 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/browser/README.md
View File

@ -8,3 +8,15 @@ $ npm start
``` ```
Visit http://localhost:3000/examples/browser/transcode.html 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

48
examples/browser/transcode.worker.html Normal file
View File

@ -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>

24
examples/browser/transcode.worker.js Normal file
View File

@ -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});
}
}

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "@ffmpeg/ffmpeg", "name": "@ffmpeg/ffmpeg",
"version": "0.10.1", "version": "0.10.2",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

6
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ffmpeg/ffmpeg", "name": "@ffmpeg/ffmpeg",
"version": "0.10.1", "version": "0.10.2",
"description": "FFmpeg WebAssembly version", "description": "FFmpeg WebAssembly version",
"main": "src/index.js", "main": "src/index.js",
"types": "src/index.d.ts", "types": "src/index.d.ts",
@ -9,13 +9,15 @@
}, },
"scripts": { "scripts": {
"start": "node scripts/server.js", "start": "node scripts/server.js",
"start:worker": "node scripts/worker-server.js",
"build": "rimraf dist && webpack --config scripts/webpack.config.prod.js", "build": "rimraf dist && webpack --config scripts/webpack.config.prod.js",
"build:worker": "rimraf dist && webpack --config scripts/webpack.config.worker.prod.js",
"prepublishOnly": "npm run build", "prepublishOnly": "npm run build",
"lint": "eslint src", "lint": "eslint src",
"wait": "rimraf dist && wait-on http://localhost:3000/dist/ffmpeg.dev.js", "wait": "rimraf dist && wait-on http://localhost:3000/dist/ffmpeg.dev.js",
"test": "npm-run-all -p -r start test:all", "test": "npm-run-all -p -r start test:all",
"test:all": "npm-run-all wait test:browser:ffmpeg test:node:all", "test:all": "npm-run-all wait test:browser:ffmpeg test:node:all",
"test:node": "node --experimental-wasm-threads node_modules/.bin/_mocha --exit --bail --require ./scripts/test-helper.js", "test:node": "node node_modules/mocha/bin/_mocha --exit --bail --require ./scripts/test-helper.js",
"test:node:all": "npm run test:node -- ./tests/*.test.js", "test:node:all": "npm run test:node -- ./tests/*.test.js",
"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", "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",
"test:browser:ffmpeg": "npm run test:browser -- -f ./tests/ffmpeg.test.html" "test:browser:ffmpeg": "npm run test:browser -- -f ./tests/ffmpeg.test.html"

8
scripts/server.js
View File

@ -8,7 +8,15 @@ const webpackConfig = require('./webpack.config.dev');
const compiler = webpack(webpackConfig); const compiler = webpack(webpackConfig);
const app = express(); 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(cors());
app.use(coi);
app.use('/', express.static(path.resolve(__dirname, '..'))); app.use('/', express.static(path.resolve(__dirname, '..')));
app.use(middleware(compiler, { publicPath: '/dist', writeToDisk: true })); app.use(middleware(compiler, { publicPath: '/dist', writeToDisk: true }));

29
scripts/webpack.config.worker.dev.js Normal file
View File

@ -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',
}),
];

27
scripts/webpack.config.worker.prod.js Normal file
View File

@ -0,0 +1,27 @@
const path = require('path');
const common = require('./webpack.config.common');
const genConfig = ({
entry, filename, library, libraryTarget,
}) => ({
...common,
mode: 'production',
devtool: 'source-map',
target: 'webworker',
entry,
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename,
library,
libraryTarget,
},
});
module.exports = [
genConfig({
entry: path.resolve(__dirname, '..', 'src', 'index.js'),
filename: 'ffmpeg.min.js',
library: 'FFmpeg',
libraryTarget: 'umd',
}),
];

25
scripts/worker-server.js Normal file
View File

@ -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');
});

11
src/browser/defaultOptions.js
View File

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

6
src/browser/fetchFile.js
View File

@ -1,5 +1,3 @@
const resolveURL = require('resolve-url');
const readFromBlobOrFile = (blob) => ( const readFromBlobOrFile = (blob) => (
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
const fileReader = new FileReader(); const fileReader = new FileReader();
@ -13,7 +11,7 @@ const readFromBlobOrFile = (blob) => (
}) })
); );
module.exports = async (_data) => { export const fetchFile = async (_data) => {
let data = _data; let data = _data;
if (typeof _data === 'undefined') { if (typeof _data === 'undefined') {
return new Uint8Array(); return new Uint8Array();
@ -27,7 +25,7 @@ module.exports = async (_data) => {
.map((c) => c.charCodeAt(0)); .map((c) => c.charCodeAt(0));
/* From remote server/URL */ /* From remote server/URL */
} else { } else {
const res = await fetch(resolveURL(_data)); const res = await fetch(new URL(_data, import.meta.url).href);
data = await res.arrayBuffer(); data = await res.arrayBuffer();
} }
/* From Blob or File */ /* From Blob or File */

116
src/browser/getCreateFFmpegCore.js
View File

@ -1,5 +1,4 @@
/* eslint-disable no-undef */ /* eslint-disable no-undef */
const resolveURL = require('resolve-url');
const { log } = require('../utils/log'); const { log } = require('../utils/log');
const { const {
CREATE_FFMPEG_CORE_IS_NOT_DEFINED, CREATE_FFMPEG_CORE_IS_NOT_DEFINED,
@ -19,28 +18,28 @@ const toBlobURL = async (url, mimeType) => {
return blobURL; return blobURL;
}; };
module.exports = async ({ corePath: _corePath, workerPath: _workerPath, wasmPath: _wasmPath }) => { export const getCreateFFmpegCore = async ({ corePath: _corePath, workerPath: _workerPath, wasmPath: _wasmPath }) => {
if (typeof _corePath !== 'string') { // in Web Worker context
throw Error('corePath should be a string!'); if (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) {
} if (typeof _corePath !== 'string') {
const coreRemotePath = resolveURL(_corePath); throw Error('corePath should be a string!');
const corePath = await toBlobURL( }
coreRemotePath, const coreRemotePath = new URL(_corePath, import.meta.url).href;
'application/javascript', const corePath = await toBlobURL(
); coreRemotePath,
const wasmPath = await toBlobURL( 'application/javascript',
_wasmPath !== undefined ? _wasmPath : coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.wasm'), );
'application/wasm', const wasmPath = await toBlobURL(
); _wasmPath !== undefined ? _wasmPath : coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.wasm'),
const workerPath = await toBlobURL( 'application/wasm',
_workerPath !== undefined ? _workerPath : coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.worker.js'), );
'application/javascript', const workerPath = await toBlobURL(
); _workerPath !== undefined ? _workerPath : coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.worker.js'),
if (typeof createFFmpegCore === 'undefined') { 'application/javascript',
return new Promise((resolve) => { );
const script = document.createElement('script'); if (typeof createFFmpegCore === 'undefined') {
const eventHandler = () => { return new Promise((resolve) => {
script.removeEventListener('load', eventHandler); globalThis.importScripts(corePath);
if (typeof createFFmpegCore === 'undefined') { if (typeof createFFmpegCore === 'undefined') {
throw Error(CREATE_FFMPEG_CORE_IS_NOT_DEFINED(coreRemotePath)); throw Error(CREATE_FFMPEG_CORE_IS_NOT_DEFINED(coreRemotePath));
} }
@ -51,18 +50,63 @@ module.exports = async ({ corePath: _corePath, workerPath: _workerPath, wasmPath
wasmPath, wasmPath,
workerPath, workerPath,
}); });
}; });
script.src = corePath; }
script.type = 'text/javascript'; log('info', 'ffmpeg-core.js script is loaded already');
script.addEventListener('load', eventHandler); return Promise.resolve({
document.getElementsByTagName('head')[0].appendChild(script); createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
} else {
if (typeof _corePath !== 'string') {
throw Error('corePath should be a string!');
}
const coreRemotePath = new URL(_corePath, import.meta.url).href;
const corePath = await toBlobURL(
coreRemotePath,
'application/javascript',
);
const wasmPath = await toBlobURL(
coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.wasm'),
'application/wasm',
);
const workerPath = await toBlobURL(
coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.worker.js'),
'application/javascript',
);
if (typeof createFFmpegCore === 'undefined') {
return new Promise((resolve) => {
const script = document.createElement('script');
const eventHandler = () => {
script.removeEventListener('load', eventHandler);
if (typeof createFFmpegCore === 'undefined') {
throw Error(CREATE_FFMPEG_CORE_IS_NOT_DEFINED(coreRemotePath));
}
log('info', 'ffmpeg-core.js script loaded');
resolve({
createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
};
script.src = corePath;
script.type = 'text/javascript';
script.addEventListener('load', eventHandler);
document.getElementsByTagName('head')[0].appendChild(script);
});
}
log('info', 'ffmpeg-core.js script is loaded already');
return Promise.resolve({
createFFmpegCore,
corePath,
wasmPath,
workerPath,
}); });
} }
log('info', 'ffmpeg-core.js script is loaded already');
return Promise.resolve({ }
createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
};

10
src/browser/index.js
View File

@ -1,9 +1,5 @@
const defaultOptions = require('./defaultOptions'); const defaultOptions = require('./defaultOptions');
const getCreateFFmpegCore = require('./getCreateFFmpegCore'); const {getCreateFFmpegCore} = require('./getCreateFFmpegCore');
const fetchFile = require('./fetchFile'); const {fetchFile} = require('./fetchFile');
module.exports = { export {defaultOptions, getCreateFFmpegCore, fetchFile};
defaultOptions,
getCreateFFmpegCore,
fetchFile,
};

2
src/createFFmpeg.js
View File

@ -110,7 +110,7 @@ module.exports = (_options = {}) => {
* as we are using blob URL instead of original URL to avoid cross origin issues. * as we are using blob URL instead of original URL to avoid cross origin issues.
*/ */
locateFile: (path, prefix) => { locateFile: (path, prefix) => {
if (typeof window !== 'undefined') { if (typeof window !== 'undefined' || typeof WorkerGlobalScope !== 'undefined') {
if (typeof wasmPath !== 'undefined' if (typeof wasmPath !== 'undefined'
&& path.endsWith('ffmpeg-core.wasm')) { && path.endsWith('ffmpeg-core.wasm')) {
return wasmPath; return wasmPath;

2
src/index.js
View File

@ -2,7 +2,7 @@ require('regenerator-runtime/runtime');
const createFFmpeg = require('./createFFmpeg'); const createFFmpeg = require('./createFFmpeg');
const { fetchFile } = require('./node'); const { fetchFile } = require('./node');
module.exports = { export {
/* /*
* Create ffmpeg instance. * Create ffmpeg instance.
* Each ffmpeg instance owns an isolated MEMFS and works * Each ffmpeg instance owns an isolated MEMFS and works