Virtual Background

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

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

Apply blur or custom image backgrounds during video calls.

Implementation

After setting up Ringing or Call Session, configure virtual background options in your call settings.

Settings

Configure virtual background using CallSettingsBuilder:

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.

For custom UI without the default layout, use these methods to control virtual background:

Open Virtual Background Setting

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

JavaScript

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

TypeScript

let callController: CometChat.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.

JavaScript

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

TypeScript

let callController: CometChat.CallController = CometChat.CallController.getInstance();
let blurLevel: number = 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.

JavaScript

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

TypeScript

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

Virtual Background Settings

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.

Presenter Mode

Enable screen sharing and presenter mode.

Custom CSS

Customize the calling UI appearance.