How I Built a Video Compressor That Runs Entirely in Your Browser

Description and use

A fully client‑side video compression solution built with FFmpeg.wasm, eliminating server costs and uploads.

Problem

Build a client‑side video compression tool without server costs or uploads.

Outcome

A zero‑server video compressor that runs entirely in the browser, providing real‑time progress and downloadable output.

Workflow

• Install @ffmpeg/ffmpeg and @ffmpeg/util via npm
• Configure HTTP headers for SharedArrayBuffer (Cross-Origin-Opener-Policy: same-origin, Cross-Origin-Embedder-Policy: require-corp) in next.config.js or vercel.json
• Load FFmpeg in the browser and write the input file to the virtual filesystem
• Execute FFmpeg command (e.g., -i input.mp4 -crf 28 output.mp4)
• Read the output file from the virtual filesystem and create a Blob for download
• Parse FFmpeg log messages to calculate and display progress percentage

Evidence

FFmpeg.wasm uses multithreading, which requires SharedArrayBuffer.

Source

Works locally. Deploy to Vercel and... still broken. Vercel needs the same headers in vercel.json.

Source

FFmpeg.wasm doesn’t give you a clean progress percentage out of the box for container conversions.

Source