diff --git a/examples/browser/README.md b/examples/browser/README.md index 0d75e27..cb6b78d 100644 --- 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 diff --git a/examples/browser/transcode.worker.html b/examples/browser/transcode.worker.html new file mode 100644 index 0000000..51fa522 --- /dev/null +++ b/examples/browser/transcode.worker.html @@ -0,0 +1,48 @@ + + + + + +

Upload a video to transcode to mp4 (x264) and play!

+
+ +

+ + + diff --git a/examples/browser/transcode.worker.js b/examples/browser/transcode.worker.js new file mode 100644 index 0000000..76557d9 --- /dev/null +++ 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}); + } +} + diff --git a/ffmpeg-ffmpeg-0.10.2.tgz b/ffmpeg-ffmpeg-0.10.2.tgz deleted file mode 100644 index 13619d9..0000000 Binary files a/ffmpeg-ffmpeg-0.10.2.tgz and /dev/null differ diff --git a/package.json b/package.json index d2fa49f..24fc37e 100644 --- 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", diff --git a/scripts/webpack.config.worker.dev.js b/scripts/webpack.config.worker.dev.js new file mode 100644 index 0000000..5683212 --- /dev/null +++ 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', + }), +]; diff --git a/scripts/worker-server.js b/scripts/worker-server.js new file mode 100644 index 0000000..ffd9a34 --- /dev/null +++ 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'); +});