Background blur and virtual background

Description

The ZegoUIKitPrebuilt allows users to blur the background or use virtual backgrounds during video calls to ensure privacy.

Compatibility

The browsers that support background blur and virtual background features are shown in the following table:

Device and browser requirements

Please ensure that your device and browser meet the following requirements:

• Equipped with Core i5 or higher CPU.
• Equipped with 8GB or more RAM.
• (Recommended) Latest desktop Google Chrome browser.

Steps

1 Get resources

All resource files in the /assets directory of the npm package are applicable for background blur and virtual background. Please place these resource files in your project root directory.

After installing the dependency, copy the the node_module/@zegocloud/zego-uikit-prebuilt/assets directory to your project root directory, because all resources in the folder are required for the background blur and virtual background features.

2 Set configuration

When creating a ZegoUIKitPrebuilt instance, pass the BackgroundProcessConfig parameter to configure background blur and virtual background settings.

/**
 * BackgroundProcessConfig parameter description
 * BackgroundProcessConfig?: {
 *   blurDegree?: 1 | 2 | 3, // Blur degree 1, 2, 3, the higher the degree, the blurrier the background
 *                           // When blurDegree is set, the source and objectFit parameters are invalid
 *   source?: HTMLImageElement, // HTMLImageElement of virtual background image
 *   objectFit?: 'fill' | 'contain' | 'cover', // Virtual background fill method
 * }
*/
// Background blur
const zp = ZegoUIKitPrebuilt.create(kitToken, { BackgroundProcessConfig: { blurDegree: 1 } });

/**
 * BackgroundProcessConfig parameter description
 * BackgroundProcessConfig?: {
 *   blurDegree?: 1 | 2 | 3, // Blur degree 1, 2, 3, the higher the degree, the blurrier the background
 *                           // When blurDegree is set, the source and objectFit parameters are invalid
 *   source?: HTMLImageElement, // HTMLImageElement of virtual background image
 *   objectFit?: 'fill' | 'contain' | 'cover', // Virtual background fill method
 * }
*/
// Virtual background
const img = document.createElement("img");
img.src = require("./background.jpg"); // The path of your background image placed in the root directory
const zp = ZegoUIKitPrebuilt.create(kitToken, { BackgroundProcessConfig: { source: img, objectFit: "fill" } });

3 Display the switch button

The ZegoUIKitPrebuilt does not display the button for enabling/disabling background blur and virtual background by default. If you want to allow users to enable/disable the effect, you can set the showBackgroundProcessButton parameter to true, and the button will be displayed in the room.

zp.joinRoom({
    showBackgroundProcessButton: true
})

Customize the feature enable logic

If you need to customize the feature enable logic, you can call the openBackgroundProcess method to enable the feature after listening to the local stream creation success through onLocalStreamCreated. If you need to close the feature, call the closeBackgroundProcess method.

zp.joinRoom({
    // Local stream creation success callback
    onLocalStreamCreated: (stream) => {
        // ...
        // Enable background blur or virtual background
        zp.openBackgroundProcess();
        // Your logic
    }
})

// ...

// Disable background blur or virtual background
zp.closeBackgroundProcess();