Virtual Background - CometChat Docs

Apply virtual backgrounds to your video feed during calls. You can blur your background or replace it with a custom image.

Background Blur

Apply a blur effect to your background:

CometChatCalls.setVirtualBackgroundBlurLevel(10);

Parameter	Type	Description
`blurLevel`	Number	The blur intensity level (higher = more blur)

Custom Background Image

Set a custom image as your virtual background:

CometChatCalls.setVirtualBackgroundImage("https://example.com/background.jpg");

Parameter	Type	Description
`imageUrl`	String	URL of the background image

The image URL must be accessible from the user’s browser. Consider hosting images on a CDN for best performance.

Clear Virtual Background

Remove any applied virtual background:

CometChatCalls.clearVirtualBackground();

Virtual Background Dialog

Show Dialog

Open the built-in virtual background settings dialog:

CometChatCalls.showVirtualBackgroundDialog();

Hide Dialog

Close the virtual background dialog:

CometChatCalls.hideVirtualBackgroundDialog();

Hide Virtual Background Button

To hide the virtual background button from the control panel:

const callSettings = {
  hideVirtualBackgroundButton: true,
  // ... other settings
};

Browser Requirements

Virtual backgrounds use machine learning for background segmentation. Performance may vary based on:

Device processing power
Browser version
Camera resolution

Browser Compatibility

Platform	Browser	Supported
Desktop (Windows, macOS, Linux)	Chrome	✅ Yes
Desktop (Windows, macOS, Linux)	Firefox	✅ Yes
Desktop	Safari, Edge, others	❌ Not supported
iOS (iPhone, iPad)	Safari, Chrome, any browser	❌ Not supported
Android	Chrome	❌ Not supported

Virtual background is only supported on desktop Chrome and Firefox. All browsers on iOS use WKWebView under the hood, which does not provide the APIs required for real-time background segmentation.

For best results, use desktop Chrome or Firefox on a device with adequate processing power.

​Background Blur

​Custom Background Image

​Clear Virtual Background

​Virtual Background Dialog

​Show Dialog

​Hide Dialog

​Hide Virtual Background Button

​Browser Requirements

​Browser Compatibility

Background Blur

Custom Background Image

Clear Virtual Background

Virtual Background Dialog

Show Dialog

Hide Dialog

Hide Virtual Background Button

Browser Requirements

Browser Compatibility