How to Render and Export Video in the Browser with WebCodecs, OffscreenCanvas, and a Web Worker

Server-side video rendering is expensive. FFmpeg on a Railway worker, Vercel Sandbox spin-up times, memory limits — it all adds up fast. But modern browsers now ship WebCodecs, which lets you decode, transform, and re-encode video frames entirely on the client. This post walks through a complete client-side rendering pipeline: decode a video from a presigned URL, draw cropped frames + captions onto an OffscreenCanvas, re-encode to H.264 MP4, and upload the result — all inside a Web Worker, keeping the main thread completely free. Why Client-Side? No server compute cost for rendering No timeouts or memory OOM issues Progress feedback is natural (frame-by-frame) Works offline once the video is fetched The trade-off: only Chrome 94+ and Firefox 130+ support WebCodecs. Detect it before starting: export const WEBCODECS_SUPPORTED = typeof window !== 'undefined' && typeof (window as any).VideoEncoder !== 'undefined' && typeof (window as any).VideoDecoder !== 'undefined'; Archi