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.

来源