Video View Customisation - CometChat Docs

You’re reading the legacy documentation for Calling SDK v4 (JavaScript).Follow this page only if your app is on v4.x. If you’re using v5, see the Calling SDK v5 documentation instead.Ready to move off v4? Follow the v4 → v5 migration guide.

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

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.

​Implementation

​Main Video Container Setting

​Next Steps

Ringing

Call Session

Virtual Background

Recording

Implementation

Main Video Container Setting

Next Steps