Version: v4

Virtual Background

This section will guide you to implement virtual background feature in video calls.

Implementation

Once you have decided to implement Default Calling or Direct Calling calling and followed the steps to implement them. Just few additional methods will help you quickly implement virtual background.

Please make sure your callSettings is configured accordingly for Default Calling or Direct Calling.

Settings

The CallSettingsclass allows you to customise the overall calling experience. The properties for the call/conference can be set using the CallSettingsBuilder class. This will eventually give you and object of the CallSettings class which you can pass to the startCall() method to start the call.

The mandatory parameters that are required to be present for any call/conference to work are:

sessionId - The unique session Id for the call/conference session.

The options available for virtual background are:

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 the use case where you wish to align your own custom buttons and not use the default layout provided by CometChat, you can embed the buttons in your layout and use the below methods to perform the corresponding operations:

Open Virtual Background Setting

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

Javascript
Typescript

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

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
Typescript

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

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
Typescript

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

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