Zero-Server Cost Video: Rendering MP4s in the Browser with WebCodecs

For years, programmatic video was synonymous with a massive AWS bill. If you wanted to generate a personalized video for a user, you had to spin up a headless server, manage a queue of FFmpeg jobs, and pray that your egress costs didn't eat your margin.

This infrastructure overhead is the single biggest barrier for developers building video-first SaaS tools. But with the advent of the WebCodecs API, the equation has changed. You no longer need a server to render a video—you can do it entirely in the user's browser tab.

The Browser as a Production Studio

Modern browsers are significantly more capable than we give them credit for. Between WebGL for effects and WebCodecs for hardware-accelerated encoding, the browser is now a first-class video production environment.

By moving the rendering workload to the client, you achieve three things simultaneously:

1. Zero infrastructure cost: Your server costs stay at zero regardless of whether you render 10 or 10,000 videos.
2. Instant privacy: The user's data (images, private text, or video clips) never leaves their machine.
3. Zero latency: There is no "waiting in queue" on a remote server. The render starts as soon as the user hits export.

How WebCodecs Changed the Game

Traditionally, exporting a video in the browser meant recording a <canvas> element using MediaRecorder. While simple, MediaRecorder is notoriously unreliable: it depends on real-time playback, meaning a 60-second video takes 60 seconds to record, and any frame drops during playback are baked into the final file.

WebCodecs allows for non-real-time encoding. We can feed frames to the encoder as fast as the CPU/GPU can produce them. If your scene is simple, you might render a 30-second video in 5 seconds. If it's complex, the encoder will wait for every frame to be perfect before moving to the next. This ensures frame-accurate, high-quality MP4 exports every time.

Implementation: Exporting MP4s with VideoFlow

VideoFlow was built from the ground up to treat the browser as a primary renderer. Because the VideoFlow Core API compiles your code into a portable VideoJSON document, the same logic that powers your live preview in the Playground can be used to trigger a high-speed MP4 export.

Here is how you can set up a browser-side export in just a few lines of code:

import VideoFlow from '@videoflow/core';
import { BrowserRenderer } from '@videoflow/renderer-browser';

// 1. Define your video
const $ = new VideoFlow({ width: 1280, height: 720, fps: 30 });

$.addText({ 
  text: 'Zero Server Cost', 
  fontSize: 8, 
  color: '#FF5A1F', 
  position: [0.5, 0.4] 
}).fadeIn();

$.wait('3s');

// 2. Compile to VideoJSON
const json = await $.compile();

// 3. Export in-tab using WebCodecs
const renderer = new BrowserRenderer();
const blob = await renderer.render(json, {
  onProgress: (p) => console.log(`Rendering: ${Math.round(p * 100)}%`)
});

// The result is a standard MP4 Blob ready for download
const url = URL.createObjectURL(blob);

How VideoFlow Handles the Complexity

While WebCodecs is powerful, it is a low-level API. You still have to manage bitrates, muxing audio and video streams, handling worker threads to keep the UI responsive, and ensuring that assets (like fonts and images) are fully loaded before a frame is captured.

VideoFlow's @videoflow/renderer-browser handles all of this out of the box. It uses a worker-accelerated architecture that keeps your main thread free while the video encodes in the background. It also ensures that the output is byte-for-byte identical to what you would get from our Server Renderer.

This "write once, render anywhere" approach is what makes VideoFlow a powerful alternative to Remotion. You can build your editor once and give your users the choice: instant browser export for quick social clips, or a server-side queue for massive batch processing.

Start Building for Free

If you are tired of managing FFmpeg clusters and paying for idle CPU time, it's time to move your rendering to the edge. VideoFlow is open-source (Apache-2.0), meaning you can embed the core and the browser renderer in your commercial products today without license fees.

Explore our Getting Started guide to build your first scene, or dive into the GitHub repository to see how we're pushing the boundaries of browser-based video production.