Video View Customization

Customize the main video container appearance and controls

Quick Reference for AI Agents & Developers

// Configure video container settings
const videoSettings = new CometChatCalls.MainVideoContainerSetting();
videoSettings.setMainVideoAspectRatio(CometChatCalls.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChatCalls.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChatCalls.POSITION_BOTTOM_LEFT, true, "rgba(27,27,27,0.4)");

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

Customize the main video container’s aspect ratio, button positions, and label visibility to match your application’s design.

Prerequisites

Before customizing video views, ensure you have implemented either:

• Ringing calling flow
• Call Session calling flow

Main Video Container Settings

Use the MainVideoContainerSetting class to customize the main video view:

JavaScript

const videoSettings = new CometChatCalls.MainVideoContainerSetting();

// Set aspect ratio
videoSettings.setMainVideoAspectRatio(
  CometChatCalls.ASPECT_RATIO_CONTAIN
);

// Configure full screen button
videoSettings.setFullScreenButtonParams(
  CometChatCalls.POSITION_BOTTOM_RIGHT,
  true  // visible
);

// Configure name label
videoSettings.setNameLabelParams(
  CometChatCalls.POSITION_BOTTOM_LEFT,
  true,  // visible
  "rgba(27, 27, 27, 0.4)"  // background color
);

// Configure network quality label
videoSettings.setNetworkLabelParams(
  CometChatCalls.POSITION_BOTTOM_RIGHT,
  true  // visible
);

// Apply to call settings
const callSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setMainVideoContainerSetting(videoSettings)
  .setCallListener(callListener)
  .build();

TypeScript

const videoSettings = new CometChatCalls.MainVideoContainerSetting();

// Set aspect ratio
videoSettings.setMainVideoAspectRatio(
  CometChatCalls.ASPECT_RATIO_CONTAIN
);

// Configure full screen button
videoSettings.setFullScreenButtonParams(
  CometChatCalls.POSITION_BOTTOM_RIGHT,
  true
);

// Configure name label
videoSettings.setNameLabelParams(
  CometChatCalls.POSITION_BOTTOM_LEFT,
  true,
  "rgba(27, 27, 27, 0.4)"
);

// Configure network quality label
videoSettings.setNetworkLabelParams(
  CometChatCalls.POSITION_BOTTOM_RIGHT,
  true
);

// Apply to call settings
const callSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setMainVideoContainerSetting(videoSettings)
  .setCallListener(callListener)
  .build();

Configuration Options

Aspect Ratio

Control how the video fills the container:

Value	Description
CometChatCalls.ASPECT_RATIO_CONTAIN	Video fits within container, may have letterboxing (default)
CometChatCalls.ASPECT_RATIO_COVER	Video fills container, may be cropped

Position Constants

Available positions for buttons and labels:

Constant	Position
CometChatCalls.POSITION_TOP_LEFT	Top left corner
CometChatCalls.POSITION_TOP_RIGHT	Top right corner
CometChatCalls.POSITION_BOTTOM_LEFT	Bottom left corner
CometChatCalls.POSITION_BOTTOM_RIGHT	Bottom right corner

Setting Methods

Method	Description	Default
setMainVideoAspectRatio(ratio)	Set video aspect ratio	ASPECT_RATIO_CONTAIN
setFullScreenButtonParams(position, visible)	Configure full screen button	Bottom right, visible
setNameLabelParams(position, visible, bgColor)	Configure participant name label	Bottom left, visible, rgba(27, 27, 27, 0.4)
setNetworkLabelParams(position, visible)	Configure network quality indicator	Bottom right, visible

Examples

Minimal UI

Hide all overlays for a clean video view:

JavaScript

const videoSettings = new CometChatCalls.MainVideoContainerSetting();

videoSettings.setFullScreenButtonParams(
  CometChatCalls.POSITION_BOTTOM_RIGHT,
  false  // hidden
);
videoSettings.setNameLabelParams(
  CometChatCalls.POSITION_BOTTOM_LEFT,
  false,  // hidden
  "transparent"
);
videoSettings.setNetworkLabelParams(
  CometChatCalls.POSITION_BOTTOM_RIGHT,
  false  // hidden
);

TypeScript

const videoSettings = new CometChatCalls.MainVideoContainerSetting();

videoSettings.setFullScreenButtonParams(
  CometChatCalls.POSITION_BOTTOM_RIGHT,
  false
);
videoSettings.setNameLabelParams(
  CometChatCalls.POSITION_BOTTOM_LEFT,
  false,
  "transparent"
);
videoSettings.setNetworkLabelParams(
  CometChatCalls.POSITION_BOTTOM_RIGHT,
  false
);

Custom Branding

Apply custom colors to match your brand:

JavaScript

const videoSettings = new CometChatCalls.MainVideoContainerSetting();

// Cover mode for full-bleed video
videoSettings.setMainVideoAspectRatio(
  CometChatCalls.ASPECT_RATIO_COVER
);

// Name label with brand color
videoSettings.setNameLabelParams(
  CometChatCalls.POSITION_TOP_LEFT,
  true,
  "rgba(0, 115, 255, 0.8)"  // Brand blue
);

// Move full screen to top right
videoSettings.setFullScreenButtonParams(
  CometChatCalls.POSITION_TOP_RIGHT,
  true
);

TypeScript

const videoSettings = new CometChatCalls.MainVideoContainerSetting();

videoSettings.setMainVideoAspectRatio(
  CometChatCalls.ASPECT_RATIO_COVER
);

videoSettings.setNameLabelParams(
  CometChatCalls.POSITION_TOP_LEFT,
  true,
  "rgba(0, 115, 255, 0.8)"
);

videoSettings.setFullScreenButtonParams(
  CometChatCalls.POSITION_TOP_RIGHT,
  true
);

Next Steps

Custom CSS

Style the entire call UI with CSS

Virtual Background

Add blur or custom backgrounds