Introduction

Traditional video converters require you to upload your files to a server. This is slow, bandwidth-intensive, and raises privacy concerns. At Web Toolkit, we wanted to change that.

Enter WebAssembly

WebAssembly (Wasm) allows us to run high-performance code, like C and C++, directly in the browser. By using FFmpeg.wasm, we compiled the industry-standard FFmpeg library to Wasm.

How It Works

1. Loading Core: The browser downloads the ffmpeg-core.wasm binary (about 25MB).
2. Virtual File System (MEMFS): We write the user’s video file to an in-memory filesystem.
3. Processing: FFmpeg commands run against this virtual file.
4. Extraction: The converted file is read back from memory and offered for download.

const ffmpeg = new FFmpeg();
await ffmpeg.load();
await ffmpeg.writeFile('input.avi', await fetchFile(file));
await ffmpeg.exec(['-i', 'input.avi', 'output.mp4']);
const data = await ffmpeg.readFile('output.mp4');

Challenges & Solutions

1. Large File Handling

Browsers have memory limits. We use SharedArrayBuffer to handle large chunks of data efficiently without freezing the main thread.

2. Cross-Origin Isolation

To use SharedArrayBuffer, we had to set specific headers:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

Conclusion

Client-side processing is the future of privacy-focused web tools. It reduces server costs to zero and gives users complete control over their data.