Web Video Effects SDK

Real-time AI-Powered Video Effects SDK

https://github.com/user-attachments/assets/782ad06d-d0fc-4590-8dc5-18703d41e7e7

Compatible with All Browsers and Effortlessly Integrates

Effortlessly integrate the most sought-after video effects into your product. Fully compatible with all browsers. Runs directly on user devices with CPU/GPU-optimized inference, delivering high-quality results. Easily incorporate custom processing or analytics in a single step.

Perfect for:

• Video Conferencing Platforms
• Live Streaming Solutions
• Remote Work and Collaboration Tools
• Social Media and Content Creation Apps
• E-Learning and Online Education Platforms
• Healthcare and Telemedicine Apps
• Virtual Events and Webinars
• Video Editing and Recording Software
• Customer Support and Communication Tools

See it in Action

• AI Webcam Effects - Chrome Extension

Simple Online Demo

• Live Demo
• Avatars Demo

Features

• Virtual Backgrounds: Replace your background with any image or video for a polished, professional look.
• Desktop Capture Background: Use your desktop screen as a dynamic background for creative presentations.
• Background Blur: Keep the focus on you by blurring out distracting surroundings.
• Beautification & Touch-Up: Enhance your appearance with real-time skin smoothing and touch-up effects.
• Auto Framing: Stay perfectly centered in the frame with smart, automatic cropping.
• Auto Color Correction: Achieve balanced, professional-grade colors in any lighting condition.
• Custom Layouts: Arrange multiple video streams or elements for a clean, organized look.
• Professional Lower-Thirds: Add titles, logos, and captions seamlessly to your videos.
• Video & Image Overlays: Layer graphics, logos, or animations for branding and creativity.
• Color Filters (LUT-Based): Apply cinematic color grading with customizable LUT filters.
• Low-Light Mode: Brighten and clarify videos in dimly lit environments.
• Video Clarity & Sharpness: Enhance details and sharpness for crystal-clear video quality.
• 3D Head Avatars: Transform yourself into a real-time 3D avatar while preserving facial expressions and head movement.
• Custom Lower-Thirds & Captions: Customize fonts, styles, colors, layouts, and animations to match your brand or presentation style.

Trial Evaluation

A Customer ID is required for the Effects SDK.

To create a Customer ID, view pricing, and activate trials, please register on the developer portal here effectssdk.ai website.

NPM

npm install effects-sdk

Usage of NPM package:

import { tsvb } from 'effects-sdk';

const sdk = new tsvb('{CUSTOMER_ID}');

// The inference runtime is a single WASM file; its version must match the SDK version.
// It is not part of the npm package: if wasmPaths is not set, the file is loaded from
// the Effects SDK CDN. To serve it yourself, download it from the URL below and point
// wasmPaths.wasm at your copy.
sdk.config({
    preset: 'balanced',
    provider: 'webgpu',
    test_inference: true,
    cache_models: true,
    wasmPaths: {
            wasm: 'https://effectssdk.ai/sdk/web/{VERSION}/ort-wasm-simd-threaded.asyncify.wasm'
        }
});

sdk.preload();

Pin the SDK version when you self-host assets

If you serve the models and WASM file yourself (sdk_url / wasmPaths pointing at your own host), install an exact SDK version and commit the lockfile:

npm install [email protected] --save-exact

{
  "dependencies": {
    "effects-sdk": "3.13.1"
  }
}

A range such as ^3.13.1 lets the package update on the next clean install. The public API remains compatible, but a newer SDK may require new model or WASM files that are not present on your asset host. In that case, the SDK cannot finish loading and onReady will not fire.

The same applies to the script tag: keep the version in the URL instead of using a floating latest path.

When you deliberately upgrade, copy the new assets from the matching release of the Video Effects SDK repository before updating the package or script URL. Keep the old model files alongside the new ones: model filenames are versioned and do not collide, so clients still running the previous SDK version continue to work.

See Self Hosted Assets for the complete asset layout and hosting recommendations.

Script Tag

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

Usage of script tag instance:

const sdk = new window.tsvb('{CUSTOMER_ID}');

sdk.config({
    preset: 'balanced',
    provider: 'webgpu',
    test_inference: true,
    cache_models: true
});

sdk.preload();

Usage with Webcam

const sdk = new window.tsvb('{CUSTOMER_ID}');

sdk.config({
    preset: 'balanced',
    provider: 'webgpu',
    test_inference: true,
    cache_models: true
});

sdk.preload();

sdk.onError((e) => {
    switch (e.type) {
        case 'error':
          console.error(e.message);
          break;
        case 'info':
          console.log(e.message);
          break;
    }
});

let video = document.getElementById('videoElement');

sdk.onReady = () => {
    console.log('SDK is ready let\'s run it');
    sdk.run();
    sdk.setBackgroundColor(0x00ff00);
    sdk.setBackground('color');
};

window.addEventListener('load', function () {
    sdk.clear();
    navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
        //set stream to sdk
        sdk.useStream(stream);
        //draw sdk results to canvas
        //sdk.toCanvas(canvas);
        //draw sdk results to MediaStream
        video.srcObject = sdk.getStream();
    });
});

Documentation

• API Reference
• Feature Usage
• Custom Overlays - Captions & Lower Thirds
• Avatars Usage
• Best Practices
• Error Handling
• Self Hosted Assets
• License Server for On-Premises Solutions

Integrations

• Electron with Native Inference
• LiveKit Web

Requirements

• Obtain an Effects SDK Customer ID
• SSL certificate to access MediaStream from the browser
• Enable Hardware Acceleration
• Support for WebGL (WebGL 2.0 is recommended)
• WebGPU support (optional)