Rendering in the browser
@videoflow/renderer-browser encodes frames with WebCodecs and muxes into MP4 inside a Web Worker. It runs in any recent Chrome, Edge, Firefox, or Safari and returns a Blob you can download, upload, or play back.
Minimal example
import BrowserRenderer from '@videoflow/renderer-browser';
import VideoFlow from '@videoflow/core';
const $ = new VideoFlow({ width: 1920, height: 1080, fps: 30 });
$.addText({ text: 'Exported from the browser' }).fadeIn('500ms');
$.wait('2s');
const json = await $.compile();
const blob = await BrowserRenderer.render(json);
// Download
const url = URL.createObjectURL(blob);
Object.assign(document.createElement('a'), { href: url, download: 'out.mp4' }).click();Options
| Option | Default | Notes |
|---|---|---|
signal | — | AbortSignal — abort() cancels cleanly. |
onProgress | — | (p: number) => void. p is the fraction of frames done (0..1). |
worker | true | Set false to run on the main thread (debugging only). |
verbose | false | Log frame-level timing to the console. |
bitrate | auto | Bits per second. Auto scales with resolution. |
codec | 'avc' | avc | vp9 | hevc where the browser supports it. |
Progress UI
const ctrl = new AbortController();
const blob = await BrowserRenderer.render(json, {
signal: ctrl.signal,
onProgress: (p) => {
// p is 0..1 (fraction of frames done)
progressBar.style.width = (p * 100).toFixed(1) + '%';
},
});
// Cancel from a UI button:
cancelBtn.addEventListener('click', () => ctrl.abort());One-shot helper
If you're already in a VideoFlow instance and don't need to hold the JSON, call $.renderVideo() — it compiles and picks a renderer for you.
const blob = await $.renderVideo({ onProgress: (p) => console.log(`${Math.round(p * 100)}%`) });