# Video Effects SDK for the web

> Add virtual backgrounds, blur, auto-framing and beautification to a browser app with the effects-sdk npm package.

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](https://effectssdk.ai/cp/registration#video) and start a trial for the Web platform.
2. Copy your **Customer ID**. The SDK checks it when it starts.

## Install

```bash
npm install effects-sdk
```

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

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

## Initialize

```ts
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

```ts
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:

```ts
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

```ts
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 effects-sdk@x.y.z --save-exact`). A newer SDK may need new model files; if they are missing on your host, `onReady` never fires.

## Next steps

- [API reference](/sdk/web/docs/) — every method and option.
- [Feature usage examples](https://github.com/EffectsSDK/video-effects-sdk-web/blob/main/docs/Features-Usage-Examples.md) — overlays, lower thirds, color filters, chroma key, low light and more.
- [Integrations](/integrations) — LiveKit, Zoom Video SDK, Cloudflare Calls, Flutter.
- [Live demo](/sdk/demo) and [release notes](/releases?sdk=video-web).