Video View Customisation

CometChat Calling SDK v4 - Stable Release - Video View Customisation for JavaScript

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: Ringing or Call Session setup

This section will guide you to customise the main video container.

Implementation

Once you have decided to implement Ringing or Call Session calling and followed the steps to implement them. Just few additional methods will help you quickly customize the main video container.

Please make sure your callSettings is configured accordingly for Ringing or Call Session.

Main Video Container Setting

The MainVideoContainerSetting Class is the required in case you want to customise the main video view. You need to pass the Object of the MainVideoContainerSetting Class in the setMainVideoContainerSetting() method of the 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);

Best Practices

Practice	Details
Aspect ratio choice	Use ASPECT_RATIO_CONTAIN to show the full video without cropping; use ASPECT_RATIO_COVER for a full-bleed look that may crop edges
Label positioning	Avoid placing the name label and network label in the same corner to prevent overlap
Full screen button	Keep the full screen button visible for better UX; only hide it if your app provides its own full screen toggle

Troubleshooting

Symptom	Cause	Fix
Video settings not applied	setMainVideoContainerSetting() not called on CallSettingsBuilder	Pass the MainVideoContainerSetting object to CallSettingsBuilder.setMainVideoContainerSetting() before calling startCall()
Labels overlapping	Multiple labels positioned in the same corner	Assign different position constants to each label
Full screen button missing	Visibility set to false	Set the second parameter of setFullScreenButtonParams() to true

Next Steps

Ringing

Implement ringing with incoming/outgoing call UI.

Call Session

Implement call session management.

Virtual Background

Add virtual background and blur effects.

Recording

Record calls for playback.