I love FFMPEG.js, it's a neat tool that is compiled with asm.js`and it let's me build JS web apps that can quickly edit videos. FFMPEG.js also works with web workers so that you can encode videos without blocking the main thread.
I also love Comlink. Comlink let's me easily interact with web workers by exposing functions and classes without having to deal with a complex postMessage state machine.
I recently got to combine the two together. I was experimenting getting FFMPEG exported to Web Assembly (it works - yay) and I wanted to clean up all of the postMessage work in the current FFMPEG.js project. Below is what the code now looks like - I think it's pretty neat. We have one worker that imports ffmpeg.js and comlink and it simply exposes the ffmpeg interface, and then we have the webpage that loads the worker and then uses comlink to create a proxy to the ffmpeg API.
Neat.
worker.js
importScripts('https://cdn.jsdelivr.net/npm/comlinkjs@3.0.2/umd/comlink.js');
importScripts('../ffmpeg-webm.js');
Comlink.expose(ffmpegjs, self);
client.html
let ffmpegjs = await Comlink.proxy(worker);
let result = await ffmpegjs({
arguments: ['-y','-i', file.name, 'output.webm'],
MEMFS: [{name: file.name, data: data}],
stdin: Comlink.proxyValue(() => {}),
onfilesready: Comlink.proxyValue((e) => {
let data = e.MEMFS[0].data;
output.src = URL.createObjectURL(new Blob([data]))
console.log('ready', e)
}),
print: Comlink.proxyValue(function(data) { console.log(data); stdout += data + "\n"; }),
printErr: Comlink.proxyValue(function(data) { console.log('error', data); stderr += data + "\n"; }),
postRun: Comlink.proxyValue(function(result) { console.log('DONE', result); }),
onExit: Comlink.proxyValue(function(code) {
console.log("Process exited with code " + code);
console.log(stdout);
}),
});
I really like how Comlink, Workers and WASM compiled modules can play together. I get idiomatic JavaScript that interacts with the WASM module directly and it runs off the main thread.
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
