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();
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.
