@videoflow/renderer-browser

(videoJSON: VideoJSON): BrowserRenderer

(frame: number): Promise<OffscreenCanvas>

Capture a single frame onto the shared render canvas. 1. Ensure all layer DOMs reflect this frame (via `renderFrame`). 2. For each enabled, in-range layer, pick the cheapest path: - **Fast path (tier-1 + no effects):** paint the layer's `$element` directly onto the final canvas via `drawDirectInto` — skips the per-layer surface copy entirely. - **Normal path:** ask the `LayerRasterizer` for a project-sized bitmap (cached when the layer's final props match the previous render), pipe through the WebGL effect compositor if the layer declares effects, then `drawImage` onto the final canvas.

(ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D, layer: RuntimeBaseLayer, frame?: number): Promise<void>

Composite one layer onto `ctx` (the group's flatten canvas, or any other caller-owned target sized to the project). - **Fast path:** when the layer is tier-1 and has no effects, paints the layer's `$element` straight onto `ctx` via `drawDirectInto` — no per-layer surface, no extra blit. - **Normal path:** rasterizes the layer (cached when possible), runs the WebGL effect compositor if effects are declared, then `drawImage`s the result onto `ctx`. Used by `RuntimeGroupLayer.renderFrame` to flatten each child onto the group's canvas — the same path that `captureFrame` uses for top-level layers.

(): void

Tear down the renderer: destroy every runtime layer (releases media elements, decoders, audio buffers), remove the hidden `<div data-renderer>` from the DOM, drop the shared render canvas, and dispose the rasterizer's per-layer surfaces and the WebGL effect compositor's GL context. Call this after the last `captureFrame` / `exportVideo` to avoid leaking GL contexts across repeated renders.

(options: RenderOptions): Promise<Blob>

Export the full video as an MP4 blob using MediaBunny. When `options.worker` is not `false` (the default), SVG rasterisation and MediaBunny encoding are offloaded to a dedicated Web Worker so that the main thread stays responsive. Set `worker: false` to encode entirely on the main thread (useful when Workers are unavailable).

(layerType: string): Record<string, PropertyDefinition> | undefined

Look up the full property definitions for a layer type, or a single property. Used by runtime layers to determine CSS mapping and defaults.

(layerType: string, prop: string): PropertyDefinition | undefined

Look up the full property definitions for a layer type, or a single property. Used by runtime layers to determine CSS mapping and defaults.

(): Node

Where group layers should park their hidden child host. For the export renderer we use `document.body` directly so the children's CSS resolves against the page's layout context (the same context the main `$canvas` uses).

(fontName: string): Promise<void>

Load a Google Font by name. Constructs the exact CSS2 URL for the font using the bundled Google Fonts registry (axis ranges, italic support, weight variants) so the request always matches what the API expects — preventing 400 errors that arise from requesting unsupported axis combinations.

(): Promise<AudioBuffer | null>

Render all audio layers into a single AudioBuffer using OfflineAudioContext. Each audio/video layer creates a buffer source node with volume and pan keyframe automation, connected to the context's destination.

(frame: number, force: boolean): Promise<void>

Render a single frame to the DOM. Each enabled layer computes its interpolated properties at the given frame and applies them to its DOM element.

(name: string, glsl: string, params: Record<string, EffectParamDefinition>): void

Register a GLSL effect. `glsl` is the fragment-shader body implementing `vec4 effect(sampler2D tex, vec2 uv, vec2 resolution)`; each entry in `params` becomes a `u_<name>` uniform. Like transitions, the registry is shared with `DomRenderer`.

(name: string, fn: TransitionFn): void

Register a transition preset. The same registry backs both `BrowserRenderer` and `DomRenderer`, so a transition registered here is immediately usable in live preview too.

(videoJSON: VideoJSON, options: RenderOptions): Promise<Blob | ArrayBuffer>

Render a VideoJSON to a video Blob or ArrayBuffer. This is the primary public API. It creates a BrowserRenderer instance, initialises all layers, renders every frame, encodes the result via MediaBunny, and returns the output.