> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Virtual Background

> Add virtual backgrounds in CometChat Calls SDK v5 for JavaScript calls with background effects and in-call video customization.

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:

```javascript theme={null}
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:

```javascript theme={null}
CometChatCalls.setVirtualBackgroundImage("https://example.com/background.jpg");
```

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

<Note>
  The image URL must be accessible from the user's browser. Consider hosting images on a CDN for best performance.
</Note>

## Clear Virtual Background

Remove any applied virtual background:

```javascript theme={null}
CometChatCalls.clearVirtualBackground();
```

## Virtual Background Dialog

### Show Dialog

Open the built-in virtual background settings dialog:

```javascript theme={null}
CometChatCalls.showVirtualBackgroundDialog();
```

### Hide Dialog

Close the virtual background dialog:

```javascript theme={null}
CometChatCalls.hideVirtualBackgroundDialog();
```

## Hide Virtual Background Button

To hide the virtual background button from the control panel:

```javascript theme={null}
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 |

<Warning>
  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.
</Warning>

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.