Virtual Background

Implement virtual background features in CometChat video calls — background blur, custom images, and enforced backgrounds using the JavaScript SDK.

AI Integration Quick Reference

• Settings class: CometChat.VirtualBackground
• Apply via: CallSettingsBuilder.setVirtualBackground(virtualBackground)
• Toggle UI: CallSettingsBuilder.showVirtualBackgroundSetting(true|false)
• Runtime control: CometChat.CallController.getInstance() → setBackgroundBlur(), setBackgroundImage(), openVirtualBackground()
• Requires: Default Calling or Direct Calling setup

Virtual backgrounds let users blur their background or replace it with a custom image during video calls. You can configure defaults at build time via CallSettingsBuilder, and control them programmatically at runtime via CallController.

Before you begin, make sure you’ve set up Ringing or Call Session.

CallSettings Options

Configure virtual background behavior when building your call settings:

Setting	Description
showVirtualBackgroundSetting(showVBSettings: boolean)	This method shows/hides the virtual background settings in the menu bar. Default value = true
setVirtualBackground(virtualBackground: CometChat.VirtualBackground)	This method will set the virtual background setting. This methods takes an Object of Virtual Background Class.

See VirtualBackground Class below for the full configuration options you can pass to setVirtualBackground().

Runtime Control

For custom UI without the default layout, use CallController to control virtual background during an active call.

Open Virtual Background Setting

You can use the openVirtualBackground() method to open the virtual background settings pop-up.

TypeScript

let callController: CometChat.CallController = CometChat.CallController.getInstance();
callController.openVirtualBackground();

JavaScript

let callController = CometChat.CallController.getInstance();
callController.openVirtualBackground();

Set Background Blur

You can use the setBackgroundBlur() method to apply background blur on the video stream. This method accepts a number which decides the level of blur to be applied.

TypeScript

let callController: CometChat.CallController = CometChat.CallController.getInstance();
let blurLevel: number = 1;
callController.setBackgroundBlur(blurLevel);

JavaScript

let callController = CometChat.CallController.getInstance();
let blurLevel = 1;
callController.setBackgroundBlur(blurLevel);

Set Background Image

You can use the setBackgroundImage()method to set the background image. This method takes either a URL or file Object & sets that image as the background.

TypeScript

let callController: CometChat.CallController = CometChat.CallController.getInstance();
let imageURL: string = "URL_OF_BACKGROUND_IMAGE";
callController.setBackgroundImage(imageURL);

JavaScript

let callController = CometChat.CallController.getInstance();
let imageURL = "URL_OF_BACKGROUND_IMAGE";
callController.setBackgroundImage(imageURL);

VirtualBackground Class

The VirtualBackground class controls how users interact with virtual background features. Pass a VirtualBackground instance to setVirtualBackground() in CallSettingsBuilder.

Setting	Description
allowBackgroundBlur(allowBackgroundBlur: boolean)	This method shows/hides the ability to allow end user to blur background. Default = true
allowUserImages(allowUserImages: boolean)	This method shows/hides the ability to allow end user to add their own custom background image. Default = true
showDefaultImages(showDefaultImages: boolean)	This method shows/hides the ability to allow end user to choose from default background images. Default = true
setImages(images: Array<String>)	This method allows developer to add their custom background image which the end user can choose.
enforceBackgroundBlur(enforceBackgroundBlur: number)	This method starts the call with background blurred. To blur the background you need to pass an integer value between 1-99 which decides the blur level. Default = 0
enforceBackgroundImage(enforceBackgroundImage: string)	This methods starts the call with the provided background image.

Next Steps

Video View Customisation

Customize the main video container layout.

Recording

Record calls for playback.

Custom CSS

Customize the calling UI appearance.

Custom CSS

Customize the calling UI appearance.