Skip to main content
  • 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

MethodDescriptionDefault
setMainVideoAspectRatio(aspectRatio)Aspect ratio of the main video. Values: ASPECT_RATIO_CONTAIN, ASPECT_RATIO_COVERASPECT_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

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

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