Running FFMPEG with WASM in a Web Worker

Я люблю FFMPEG.js, это аккуратный инструмент, который скомпилирован с помощью asm.js`and, и пусть он будет создавать JS-приложения, которые могут быстро редактировать видео. FFMPEG.js также работает с веб-рабочими, чтобы вы могли кодировать видео без блокировки основного потока.

Я также люблю Comlink. Comlink позволяет мне легко взаимодействовать с веб-рабочими, выставляя функции и классы, не имея дело с сложным конечным автоматом postMessage.

Недавно мне удалось объединить этих двух. Я экспериментировал с тем, чтобы экспортировать FFMPEG в Web Assembly (он работает - yay), и я хотел очистить всю работу postMessage в текущем проекте FFMPEG.js. Ниже приведен код, который теперь выглядит - я думаю, что это довольно аккуратно. У нас есть один рабочий, который импортирует ffmpeg.js и comlink, и он просто предоставляет интерфейс ffmpeg, а затем у нас есть веб-страница, которая загружает рабочего, а затем использует комлинк для создания прокси-сервера API ffmpeg.

Ухоженная.

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

Мне очень нравится, как компилируемые модули Comlink, Workers и WASM могут играть вместе. Я получаю идиоматический JavaScript, который напрямую взаимодействует с модулем WASM, и он отключается от основного потока.

Читать полностью.

About Me: Paul Kinlan

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.