Browser support

This page lists what a browser needs to run alpha2 and what your server must send. After reading it you can check a browser and configure your hosting.

Requirements

• Browsers: Chrome 96, Firefox 89 or Safari 16.4, or later. The WebAssembly modules need WebAssembly SIMD and reference types; without them neither the engine, the audio worklet nor the extension modules load.
• .wasm served as application/wasm. Otherwise the loader falls back to a slower way of compiling the modules and warns.
• Audio preview needs a cross-origin isolated page. Editing, video preview and export do not.

Check this browser

The panel below probes the browser you are reading this in and starts the engine on a small canvas.

In your own app, detectBrowserCapabilities() from alpha2/robustness answers the same questions: whether the browser hands out a WebGPU adapter, WebGL2, WebCodecs, OffscreenCanvas and the WebAssembly features, and which renderer a render worker’s "auto" would get (renderer: "gpu" or "cpu").

How the renderer is chosen

WebEffectRegistry.createForHtmlCanvas(canvas) (or createForCanvas with an OffscreenCanvas in a worker) renders with WebGPU, or with WebGL2 when the browser has no WebGPU.

When neither is available (Chrome with hardware acceleration off, a blocklisted GPU), WebEffectRegistry.createCpu(canvas) makes the engine’s CPU renderer. It takes the same calls, draws in WebAssembly on one thread and puts the preview on the canvas’s 2D context. It draws exactly what the native CPU renderer draws, refuses runtime WGSL effects with EFFECT_ERROR, and needs no canvas to export.

import init, { WebEffectRegistry } from "alpha2/wasm";

await init();
let engine;
try {
  engine = await WebEffectRegistry.createForHtmlCanvas(canvas);
} catch {
  engine = WebEffectRegistry.createCpu(canvas);
}

In a render worker (alpha2/worker), the host’s renderer: "auto" makes this choice for you: WebGPU, else WebGL2, else the CPU renderer. WorkerRenderBackend.rendererChoice tells you which it made.

Cross-origin isolation for audio

Audio preview moves mixed audio to an AudioWorklet through a ring buffer in shared memory, which needs SharedArrayBuffer, and so a cross-origin isolated page. Send these two headers with the page:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

canShareAudioMemory() from alpha2/audio-timeline tells you whether the current page qualifies.

Caution

With require-corp, the page can load cross-origin resources (images, fonts, scripts from a CDN) only when they opt in with Cross-Origin-Resource-Policy or CORS. Serve the engine and your media from the same origin, or make sure the other origins send those headers.

Serving .wasm

Send Content-Type: application/wasm for .wasm files. The package’s modules are alpha2/wasm/alpha2_wasm_bg.wasm (the engine), alpha2/wasm/alpha2_audio_worklet.wasm (the audio worklet) and alpha2/wasm/alpha2_extensions_bg.wasm (SVG, animated images, Lottie, OpenEXR and image sequences, loaded only for such a source).

init() loads the engine module from beside its JavaScript. If your bundler moves it, pass its URL, a Response, its bytes or a compiled WebAssembly.Module:

await init({ module_or_path: wasmUrl });

This site is served with serve, and its serve.json sends both the isolation headers and the .wasm type:

{
  "headers": [
    {
      "source": "**",
      "headers": [
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
      ]
    },
    {
      "source": "**/*.wasm",
      "headers": [{ "key": "Content-Type", "value": "application/wasm" }]
    }
  ]
}

TypeScript note

The optional dependency mediabunny installs @types/dom-webcodecs 0.1.13, whose declarations clash with TypeScript 5.9’s DOM library. Either compile with skipLibCheck, or add "overrides": { "@types/dom-webcodecs": "0.1.19" } to your package.json. An app that imports alpha2/mediabunny also needs "ESNext.Disposable" in its lib.

Next

Browser SDKRendering, export, audio and workers with alpha2.

AudioHow the engine mixes and how the browser plays it.

DeterminismWhat the CPU renderer and the GPU each guarantee.