Video View Customisation

Customize the main video container in CometChat calls — aspect ratio, full screen button, name label, and network label positioning.

Quick Reference

• Class: CometChat.MainVideoContainerSetting
• Apply via: CallSettingsBuilder.setMainVideoContainerSetting(videoSettings)
• Customizable elements: Aspect ratio, full screen button, name label, network label
• Position constants: POSITION_TOP_LEFT, POSITION_TOP_RIGHT, POSITION_BOTTOM_LEFT, POSITION_BOTTOM_RIGHT
• Requires: Default Calling or Direct Calling setup

Customize the main video container layout, including aspect ratio, button positions, and label visibility.

Implementation

After setting up Ringing or Call Session, configure video view options in your call settings.

Main Video Container Setting

The MainVideoContainerSetting class customizes the main video view. Pass a MainVideoContainerSetting instance to setMainVideoContainerSetting() in CallSettingsBuilder.

Setting	Description
setMainVideoAspectRatio(aspectRatio: string)	This method is used to set the aspect ratio of main video. The default value is contain. Possible Values: 1. CometChat.CallSettings. ASPECT_RATIO_CONTAIN**** 2. CometChat.CallSettings. ASPECT_RATIO_COVER
setFullScreenButtonParams(position: string, visibility: boolean)	This method is used to set the position & visibility parameter of the full screen button. By default the full screen button is visible in the bottom-right position. Possible Values for POSITION: 1. CometChat.CallSettings. POSITION_TOP_LEFT 2. CometChat.CallSettings. POSITION_TOP_RIGHT 3. CometChat.CallSettings. POSITION_BOTTOM_LEFT 4. CometChat.CallSettings. POSITION_BOTTOM_RIGHT Possible Values for VISIBILITY: 1. true 2. false
setNameLabelParams(position: string, visibility: boolean, backgroundColor: string)	This method is used to set the position, visibility & background color of the name label. By default the name label is visible in the bottom-left position with a background-color **rgba(27, 27, 27, 0.4)** Possible Values for POSITION: 1. CometChat.CallSettings. POSITION_TOP_LEFT 2. CometChat.CallSettings. POSITION_TOP_RIGHT 3. CometChat.CallSettings. POSITION_BOTTOM_LEFT 4. CometChat.CallSettings. POSITION_BOTTOM_RIGHT Possible Values for VISIBILITY: 1. true 2. false
setNetworkLabelParams(position: string, visibility: boolean)	This method is used to set the position, visibility of the network label. By default the network label is visible in the bottom-right position. Possible Values for POSITION: 1. CometChat.CallSettings. POSITION_TOP_LEFT 2. CometChat.CallSettings. POSITION_TOP_RIGHT 3. CometChat.CallSettings. POSITION_BOTTOM_LEFT 4. CometChat.CallSettings. POSITION_BOTTOM_RIGHT Possible Values for VISIBILITY: 1. true 2. false

Example:

JavaScript

let videoSettings = new CometChat.MainVideoContainerSetting();

videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)");
videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);

TypeScript

let videoSettings: CometChat.MainVideoContainerSetting = new CometChat.MainVideoContainerSetting();

videoSettings.setMainVideoAspectRatio(CometChat.CallSettings.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChat.CallSettings.POSITION_BOTTOM_LEFT, true, "rgba(27, 27, 27, 0.4)");
videoSettings.setNetworkLabelParams(CometChat.CallSettings.POSITION_BOTTOM_RIGHT, true);

Next Steps

Default Calling

Implement default audio/video calling.

Direct Calling

Implement direct calling without call events.

Virtual Background

Add virtual background and blur effects.

Recording

Record calls for playback.