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@1.1.3/dist/index.iife.js"></script>

Whenever a new 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.

To begin using the Dyte Background Transformer, you need to initialize it by calling the init method. Follow the steps below to initialize the transformer:

const videoBackgroundTransformer = await DyteVideoBackgroundTransformer.init();

Make sure to use the await keyword before the init method call to ensure the initialization process is completed before proceeding further. Once the initialization is successful, the videoBackgroundTransformer object will be ready for use in your application.

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