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.
npm install effects-sdkterminal
npm install effects-sdk
`
Usage of NPM package:
`typescript
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',
test_inference: true,
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
`javascript
`
Usage of script tag instance:
`javascript
const sdk = new window.tsvb('{CUSTOMER_ID}');
sdk.config({
preset: 'balanced',
provider: 'webgpu',
test_inference: true
});
sdk.preload();
sdk.cache();
`
Usage with Webcam
`javascript
const sdk = new window.tsvb('{CUSTOMER_ID}');
sdk.config({
preset: 'balanced',
provider: 'webgpu',
test_inference: true
});
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();
});
});
``