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.

2.x versions of DyteVideoBackgroundTransformer use their own rendering mechanism thus require you to disable the default per frame canvas rendering.

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

For reference, A middleware such as company branding with the default per frame rendering can be rewritten without per frame rendering as this.

Note

If you don't want to disable the default per frame rendering mechanism due to a custom middleware, please use the legacy version (README included) of DyteVideoBackgroundTransformer that is compatible with react-web-core 1.x versions.

Now that we have disabled the per frame rendering, We can initialise the DyteVideoBackgroundTransformer.

const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init({
    meeting: meeting,
    segmentationConfig: {
      pipeline: 'canvas2dCpu', // 'webgl2' | 'canvas2dCpu'
    },
});

To customise DyteVideoBackgroundTransformer configs, please refer to the video background transfomer NPM package.

Note

DyteVideoBackgroundTransformer's 2.x version requires you to use web-core 2.x versions. Please refer to our web-core upgrade guide.

If, In case you don't want to upgrade SDKs yet, Please use the legacy version (README included) of DyteVideoBackgroundTransformer that is compatible with react-web-core 1.x versions.

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()