Video View Customisation - CometChat Docs

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

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

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 customize the main video container. Please make sure your callSettings is configured accordingly for Default Calling or Direct Calling.

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
TypeScript

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);

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

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.

​Implementation

​Main Video Container Setting

​Next Steps