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

# Virtual Background

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

<Accordion title="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](/sdk/javascript/default-call) or [Direct Calling](/sdk/javascript/direct-call) setup
</Accordion>

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](/sdk/javascript/default-call) or [Call Session](/sdk/javascript/direct-call).

## 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](#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.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let callController: CometChat.CallController = CometChat.CallController.getInstance();
    callController.openVirtualBackground();
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    callController.openVirtualBackground();
    ```
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let callController: CometChat.CallController = CometChat.CallController.getInstance();
    let blurLevel: number = 1;
    callController.setBackgroundBlur(blurLevel);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    let blurLevel = 1;
    callController.setBackgroundBlur(blurLevel);
    ```
  </Tab>
</Tabs>

### 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.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    let callController: CometChat.CallController = CometChat.CallController.getInstance();
    let imageURL: string = "URL_OF_BACKGROUND_IMAGE";
    callController.setBackgroundImage(imageURL);
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    let callController = CometChat.CallController.getInstance();
    let imageURL = "URL_OF_BACKGROUND_IMAGE";
    callController.setBackgroundImage(imageURL);
    ```
  </Tab>
</Tabs>

## 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

<CardGroup cols={2}>
  <Card title="Video View Customisation" icon="sliders" href="/sdk/javascript/video-view-customisation">
    Customize the main video container layout.
  </Card>

  <Card title="Recording" icon="circle-dot" href="/sdk/javascript/recording">
    Record calls for playback.
  </Card>

  <Card title="Custom CSS" icon="paintbrush" href="/sdk/javascript/custom-css">
    Customize the calling UI appearance.
  </Card>

  <Card title="Custom CSS" icon="paintbrush" href="/sdk/javascript/custom-css">
    Customize the calling UI appearance.
  </Card>
</CardGroup>