npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

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

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)