Skip to main content

Virtual Background


To enable the virtual background feature in your application, first you need to install the "Background Transformer" package.

npm i @dytesdk/video-background-transformer


import DyteVideoBackgroundTransformer from '@dytesdk/video-background-transformer';

If you installed the package using a script tag, the DyteVideoBackgroundTransformer will be automatically available for use once the installation process is complete.

const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init();

Add an image as a background

To incorporate an image as a background, create a static background video middleware using the createStaticBackgroundVideoMiddleware method provided by the videoBackgroundTransformer object.

const videoMiddleware =
await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(

Ensure that the URL of the image allows Cross-Origin Resource Sharing (CORS) to avoid canvas tainting issues. If the CORS policy is not allowed for the image, it may result in the video feed getting stuck on a frame or appearing blank.

Blur the background

Create a background blur video middleware using the createBackgroundBlurVideoMiddleware method provided by the videoBackgroundTransformer object.

const videoMiddleware =
await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(10);

Pass intensity as a parameter between 1-100

Remove blur/virtual background

Use the removeVideoMiddleware method


Noise Cancellation (


This is a paid addon, contact for access.


Create/Append to the .npmrc file in the project root with the below contents

npm i @dytesdk/krisp-noise-cancellation


Initialise the middleware

const krisp = new Krisp();
await krisp.init(meeting);

Enable / disable the noise cancellation

// krisp.deactivate()