Video View Customisation - CometChat Docs

AI Integration 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 in your call UI — aspect ratio, button positions, and label visibility. Create a MainVideoContainerSetting instance, configure it, and pass it to CallSettingsBuilder.setMainVideoContainerSetting(). Before you begin, make sure you’ve set up Ringing or Call Session.

MainVideoContainerSetting

Method	Description	Default
`setMainVideoAspectRatio(aspectRatio)`	Aspect ratio of the main video. Values: `ASPECT_RATIO_CONTAIN`, `ASPECT_RATIO_COVER`	`ASPECT_RATIO_CONTAIN`
`setFullScreenButtonParams(position, visibility)`	Position and visibility of the full screen button.	Bottom-right, visible
`setNameLabelParams(position, visibility, backgroundColor)`	Position, visibility, and background color of the participant name label.	Bottom-left, visible, `rgba(27, 27, 27, 0.4)`
`setNetworkLabelParams(position, visibility)`	Position and visibility of the network quality label.	Bottom-right, visible

Position Constants

All position parameters accept one of these values from CometChat.CallSettings:

POSITION_TOP_LEFT
POSITION_TOP_RIGHT
POSITION_BOTTOM_LEFT
POSITION_BOTTOM_RIGHT

Example

TypeScript
JavaScript

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

// Pass to CallSettingsBuilder
const callSettings = new CometChatCalls.CallSettingsBuilder()
  .setMainVideoContainerSetting(videoSettings)
  // ... other settings
  .build();

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

// Pass to CallSettingsBuilder
const callSettings = new CometChatCalls.CallSettingsBuilder()
  .setMainVideoContainerSetting(videoSettings)
  // ... other settings
  .build();

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.

​MainVideoContainerSetting

​Position Constants

​Example

​Next Steps