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

Added web worker example

Browse Source
This commit is contained in:
Nathan Johnson 2022-05-17 16:50:23 -05:00
parent 09871cc01a
commit da317da7ef
7 changed files with 139 additions and 0 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});
}
}

BIN
ffmpeg-ffmpeg-0.10.2.tgz
View File

Binary file not shown.

1
package.json
View File

@ -9,6 +9,7 @@
}, },
"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",
"prepublishOnly": "npm run build", "prepublishOnly": "npm run build",
"lint": "eslint src", "lint": "eslint src",

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

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