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

Описание и применение

Создана полностью клиентская система сжатия видео, использующая FFmpeg.wasm, без серверных затрат и загрузки файлов.

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

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

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

FFmpeg.wasm uses multithreading, which requires SharedArrayBuffer.

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

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