Skip to main content

Virtual Background

With a virtual background, you gain the flexibility to modify your background by blurring it, applying solid colors, or incorporating custom images. This capability allows for personalization and customization of your video environment, enabling you to create a more tailored visual experience.

In this guide, we will walk you through the process of adding a custom virtual background to your Dyte meetings. You can add background to any of our supported web applications, React, Angular, JavaScript, and so on including UI Kit and core SDKs.

Installation​

To enable the virtual background feature in your application, first you need to install the "Background Transformer" package. The installation process varies depending on the framework or library you are using. Follow the instructions below based on your chosen technology:

For React, Angular, and JavaScript frameworks or libraries, use the following command:

npm i @dytesdk/video-background-transformer

If you are using the web-core CDN script bundle, you can add the package by including a script tag in the head section of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/@dytesdk/video-background-transformer/dist/index.iife.js"></script>

If you prefer using a specific version of the package, you can modify the source URL by appending the desired version number:

<script src="https://cdn.jsdelivr.net/npm/@dytesdk/video-background-transformer@2.0.3/dist/index.iife.js"></script>

Whenever a new minor release of the package is available, you can simply update the version number in the source URL to upgrade to the latest version.

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 respective 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 respective web-core 1.x versions.

Usage​

You can add any image as a background or simply blur your current setting.

Add an image as a background​

To incorporate an image as a background, follow these steps:

  1. Create a static background video middleware using the createStaticBackgroundVideoMiddleware method provided by the videoBackgroundTransformer object.
  2. Replace IMAGE_LINK_OF_YOUR_LIKING with the URL of the image you wish to use.
const videoMiddleware =
  await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(
    `IMAGE_LINK_OF_YOUR_LIKING`
  );

For example:

const videoMiddleware =
  await videoBackgroundTransformer.createStaticBackgroundVideoMiddleware(
    `https://assets.dyte.io/backgrounds/bg-dyte-office.jpg`
  );
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​

To apply a blur effect to your background, follow these steps:

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

const videoMiddleware =
  await videoBackgroundTransformer.createBackgroundBlurVideoMiddleware(10);

Adjust the intensity of the blur effect by changing the value within the parentheses. For example, using 10 will result in a moderate blur effect. You can increase or decrease the value to achieve the desired level of blurring.

To incorporate the configured video middleware into your Dyte meeting, add the middleware to your Dyte meeting.

meeting.self.addVideoMiddleware(videoMiddleware);

  • If your video feed was already active, the specified background image or effect will immediately be applied as the background in your video feed.

  • In case the video feed was not active, once you turn it on, the configured background will be automatically applied to your feed.

Remove the background​

To remove the middleware, simply run the following command:

meeting.self.removeVideoMiddleware(videoMiddleware);