Video Effects SDK for the web

The Web Video Effects SDK processes a camera MediaStream in the browser and returns a processed MediaStream. It runs on WebGPU, WebGL or WebAssembly, so it works in current Chrome, Safari, Firefox, Edge and Opera without plugins.

Before you start#

1. Register in the Developer Portal and start a trial for the Web platform.
2. Copy your Customer ID. The SDK checks it when it starts.

Install#

npm install effects-sdk

Or load the script from the Effects SDK CDN and use window.tsvb:

<script crossorigin="anonymous" src="https://effectssdk.ai/sdk/web/{VERSION}/tsvb-web.js"></script>

Initialize#

import { tsvb } from 'effects-sdk';

const sdk = new tsvb('YOUR_CUSTOMER_ID');

sdk.config({
  preset: 'balanced',   // segmentation model: speed, balanced, quality…
  provider: 'webgpu',   // falls back automatically when WebGPU is unavailable
  test_inference: true,
  cache_models: true,
});

// Start downloading the models before the camera is on.
sdk.preload();

Process the camera#

const video = document.querySelector('video');

sdk.onReady = () => {
  sdk.run();
  sdk.setBlur(0.6);
};

const camera = await navigator.mediaDevices.getUserMedia({ video: true });
sdk.useStream(camera);
video.srcObject = sdk.getStream();

sdk.getStream() returns a regular MediaStream: show it in a <video> element or publish it to WebRTC, LiveKit or any other SFU instead of the raw camera.

Turn effects on and off#

All effects can be changed while the stream runs:

sdk.setBackground('https://example.com/office.jpg'); // image, video URL or a MediaStream
sdk.clearBackground();

sdk.setBlur(0.6);   // 0…1
sdk.clearBlur();

sdk.enableBeautification();
sdk.setBeautificationLevel(0.6);

sdk.enableSmartZoom();   // auto-framing
sdk.setFaceArea(0.2);

sdk.enableColorCorrector();
sdk.setSegmentationPreset('quality');

Handle errors#

sdk.onError((e) => {
  if (e.type === 'error') console.error(e.message);
});

Self-hosting the models#

By default the models and the WASM runtime load from the Effects SDK CDN. To serve them yourself, set sdk_url and wasmPaths in sdk.config() and pin an exact SDK version (npm install [email protected] --save-exact). A newer SDK may need new model files; if they are missing on your host, onReady never fires.

Next steps#

• API reference — every method and option.
• Feature usage examples — overlays, lower thirds, color filters, chroma key, low light and more.
• Integrations — LiveKit, Zoom Video SDK, Cloudflare Calls, Flutter.
• Live demo and release notes.