Skip to main content

Virtual Background​

Installation​

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

npm i @dytesdk/video-background-transformer

Initialize​

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({
            meeting: meeting
        });

await meeting.self.setVideoMiddlewareGlobalConfig({ disablePerFrameCanvasRendering: true });

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(
    `https://assets.dyte.io/backgrounds/bg-dyte-office.jpg`
  );
meeting.self.addVideoMiddleware(videoMiddleware);
note

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);
meeting.self.addVideoMiddleware(videoMiddleware);

Pass intensity as a parameter between 1-100

Remove blur/virtual background​

Use the removeVideoMiddleware method

meeting.self.removeVideoMiddleware(videoMiddleware);

Noise Cancellation (Krisp.ai)​

note

This is a paid addon, contact support@dyte.io for access.

Installation​

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

//registry.npmjs.org/:_authToken=<token-from-dyte>
@dytesdk:registry=https://registry.npmjs.org/
#always-auth=true
npm i @dytesdk/krisp-noise-cancellation

Usage​

Initialise the middleware

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

Enable / disable the noise cancellation

krisp.activate()
// krisp.deactivate()