ffmpeg.wasm in Angular 19

I am developing an Angular app that records videos. Since the videos that come out usually have variable and "wrong" framerates, I want to re-encode them using FFmpeg, particularly ffmpeg.wasm.

I have installed the packages @ffmpeg/ffmpeg, @ffmpeg/core and @ffmpeg/util and I have written the following worker ffmpeg.worker.ts to do the initialization and to execute the FFmpeg processing:

/// <reference lib="webworker" />
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { toBlobURL } from '@ffmpeg/util';


const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.10/dist/esm';

const ffmpeg = new FFmpeg();

let isLoaded = false;

(async () => {
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
});
isLoaded = true;
self.postMessage({ type: 'ready' });
})();

self.onmessage = async (e: MessageEvent<ArrayBuffer>) => {
if (!isLoaded) {
self.postMessage({ type: 'error', error: 'FFmpeg not loaded yet!' });
return;
}

if (e.data.byteLength === 0) return;

try {
await ffmpeg.writeFile('input', new Uint8Array(e.data));

await ffmpeg.exec([
'-i', 'input',
'-r', '30',
'-c:v', 'libx264',
'-preset', 'ultrafast',
'-pix_fmt', 'yuv420p',
'-movflags', 'faststart',
'out.mp4',
]);

const data = await ffmpeg.readFile('out.mp4');
if (data instanceof Uint8Array) {
self.postMessage({ type: 'done', file: data.buffer }, [data.buffer]);
} else {
self.postMessage({ type: 'error', error: 'Unexpected output from ffmpeg.readFile,' });
}

} catch (err) {
self.postMessage({ type: 'error', error: (err as Error).message });
} finally {
await ffmpeg.deleteFile(('input'));
await ffmpeg.deleteFile(('out.mp4'));
}
}


I have a service called cameraService where I do the recording and where I want to do the re-encoding after the recording has stopped, so I have this method that initializes the FFmpeg process:

private encoder: Worker | null = null;

private initEncoder() {
if (this.encoder) return;
this.encoder = new Worker(
new URL('../workers/ffmpeg.worker', import.meta.url), // Location of my worker
{ type: 'module' }
);

this.encoder.onmessage = (e: MessageEvent) => {
switch (e.data.type) {
case 'ready':
console.log('FFmpeg worker ready.');
break;

case 'done':
this.reEncodedVideo = new Blob([e.data.file], { type: 'video/mp4' });
this.videoUrlSubject.next(URL.createObjectURL(this.reEncodedVideo));
console.log('FFmpeg encoding completed.');
break;
case 'error':
console.error('FFmpeg encoding error:', e.data.error);
break;
}
};
}


However, the loading of FFmpeg won't work, no matter what I do. Hosting the ffmpeg-core.js and ffmpeg-core.wasm files doesn't help either. I keep getting this message whenever ffmpeg.load() is called:

The file does not exist at ".../.angular/cache/19.2.0/mover/vite/deps/worker.js?worker_file&type=module" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to 'optimizeDeps.exclude'.

I know this has something to do with Web Workers and their integration with Vite but has anybody been able to implement ffmpeg.wasm in Angular 19 or is there even any way to achieve this? If not FFmpeg, are there alternatives to perform re-encoding after recording a video in Angular 19?

Continue reading...