effects-sdk
v3.5.0
Published
Add real-time AI video effects: virtual backgrounds, blur, touch-up, auto-framing, color correction, lower-thirds, and more. Works on all browsers for conferencing, streaming, and recording.
Downloads
104,147
Maintainers
Readme
Web Video Effects SDK
Real-time AI-Powered Video Effects SDK
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
Simple Online 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.
Trial Evaluation
A Customer ID is required for the Effects SDK.
To receive a new trial Customer ID, please fill out the contact form on the effectssdk.ai website.
NPM
npm install effects-sdk
Usage of NPM package:
import { tsvb } from 'effects-sdk';
const sdk = new tsvb('{CUSTOMER_ID}');
//versions of wasm files should be matched with SDK version
sdk.config({
preset: 'balanced',
provider: 'webgpu',
wasmPaths: {
'ort-wasm.wasm': 'https://effectssdk.ai/sdk/web/{VERSION}/ort-wasm.wasm',
'ort-wasm-simd.wasm': 'https://effectssdk.ai/sdk/web/{VERSION}/ort-wasm-simd.wasm'
}
});
sdk.preload();
sdk.cache();
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'
});
sdk.preload();
sdk.cache();
Usage with Webcam
const sdk = new window.atsvb('{CUSTOMER_ID}');
sdk.config({
preset: 'balanced',
provider: 'webgpu'
});
sdk.preload();
sdk.cache();
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
Requirements
- Obtaining Effects SDK Customer ID
- SSL to get MediaStream from browser
- Support of WebGL 2.0
- WebGPU support (optional)