WebCodecs vs FFmpeg.wasm for video in the browser
Two ways to process video in a web page, compared on speed, download size, format support and setup, and why we chose WebCodecs first.
By The Kling Watermark Remover teamPublished 6 min read
If you want to process video inside a browser, there are two main options. FFmpeg.wasm compiles the famous FFmpeg toolkit to WebAssembly, so it runs in a web page. WebCodecs is a built-in browser API that exposes the browser’s own codecs. They solve the same problem in very different ways.
At a glance
| WebCodecs | FFmpeg.wasm | |
|---|---|---|
| Where the codecs come from | Built into the browser | Downloaded with the page |
| Extra download | None | Tens of megabytes |
| Hardware acceleration | Yes, where the device supports it | No, software only |
| Speed | Fast, often real-time or better | Usually much slower |
| Formats | What the browser supports | Almost anything FFmpeg supports |
| Containers (MP4, WebM) | Needs a separate library | Built in |
| Browser support | Recent Chrome and Edge; others vary | Any browser with WebAssembly |
Why WebCodecs is usually the better first choice
Speed and download size. WebCodecs uses the codecs your browser already has, often running on dedicated video hardware, so there’s nothing extra to download and encoding is fast. FFmpeg.wasm has to download its whole toolkit and do all encoding in software on the CPU, which on long or high-resolution videos can be many times slower.
Setup matters too. The faster multi-threaded build of FFmpeg.wasm needs SharedArrayBuffer, which browsers only enable on pages served with special cross-origin isolation headers. Those headers can break other things on a site, such as embedded content.
Where FFmpeg.wasm still wins
- Unusual formats and codecs the browser can’t decode.
- Browsers without WebCodecs support.
- Complex filter chains that FFmpeg already implements.
What we do
This tool uses WebCodecs for decoding and encoding, with a lightweight JavaScript library for reading and writing MP4, MOV and WebM files, all running in a Web Worker. Nothing heavy loads on the landing page; the video engine only loads when you start processing. If your browser can’t decode a particular file, you’ll get a clear message asking you to convert it to H.264 MP4, rather than a silent failure.
Got a video with a watermark?
Open the editor