The virtual background feature allows you to enhance your video experience in various settings such as online meetings and conferences, virtual classrooms, live streaming sessions, and more. 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.
Understand Dyte's virtual background processing workflow
The following steps outline the process flow for adding virtual background to the video stream of Dyte meetings:
- Ask permission for media: Begin by requesting permission to access the user's media devices, such as their camera and microphone.
- Capture (Real stream): Capture the real-time video stream from the user's camera using the media capture capabilities of the browser.
- Middleware 1- Apply background removal: Utilize the first middleware in the process to perform background removal on each frame of the captured video stream. This middleware applies the necessary logic to identify and remove the background from each frame.
- Middleware 2 - Add specifications: Proceed to the second middleware, which adds specifications or modifications to the processed frames. This step allows for additional enhancements or alterations to the video stream based on the desired requirements.
- Modified stream: After passing through the middleware, the video stream is modified to incorporate the background removal and added specifications.
- Send over WebRTC: Transmit the modified video stream over the WebRTC (Web Real-Time Communication) protocol. This enables the stream to be sent to other participants or viewers in real-time.
- End user playback: Finally, the end user plays the received video stream as is, experiencing the effects of the background removal and added specifications.
Throughout the process, the middleware components operate on a per-frame basis, executing the necessary logic to process each frame individually before forwarding it to the next stage of the workflow.
Make sure you've read the Getting Started with Dyte topic and completed the following steps:
Once you’ve integrated Dyte into your website or application successfully, perform the following steps to incorporate a virtual background feature into your Dyte meetings.
Step 1: Install the background transformer package
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:
npm i @dytesdk/video-background-transformer
yarn add @dytesdk/video-background-transformer
pnpm add @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:
If you prefer using a specific version of the package, you can modify the source URL by appending the desired version number:
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.
Step 2: Import the Dyte background transformer
To utilize the functionalities of the Dyte Background Transformer package, you need to import it into your codebase. The import process differs based on the programming language or module system you are using. Choose the appropriate import method from the following options:
var DyteVideoBackgroundTransformer = require('@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.
Step 3: Initialize the Dyte background transformer
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.
Step 4: Update the video middleware
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:
- Create a static background video middleware using the
createStaticBackgroundVideoMiddlewaremethod provided by the
IMAGE_LINK_OF_YOUR_LIKINGwith the URL of the image you wish to use.
const videoMiddleware =
const videoMiddleware =
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
const videoMiddleware =
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.
Step 5: Integrate the video middleware into your Dyte meeting
To incorporate the configured video middleware into your Dyte meeting, add the middleware to your Dyte meeting.
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: