This is legacy documentation. It is no longer actively maintained. For current docs, visit cometchat.com/docs.

Video View Customisation

Deprecated: The Ionic Cordova SDK is deprecated. For new Ionic/Cordova applications, please use the JavaScript SDK which provides full compatibility with Ionic applications.

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

Implementation

Once you have decided to implement Direct 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 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.

Default Value: contain

Possible Values:
1. CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN
2. CometChatCalls.CallSettings.ASPECT_RATIO_COVER
setFullScreenButtonParams(position: string, visibility: boolean) This method is used to set the position & visibility parameter of the full screen button.

Default: Visible in the bottom-right position

Possible Values for POSITION:
1. CometChatCalls.CallSettings.POSITION_TOP_LEFT
2. CometChatCalls.CallSettings.POSITION_TOP_RIGHT
3. CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT
4. CometChatCalls.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.

Default: Visible in the bottom-left position with background-color #333333

Possible Values for POSITION:
1. CometChatCalls.CallSettings.POSITION_TOP_LEFT
2. CometChatCalls.CallSettings.POSITION_TOP_RIGHT
3. CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT
4. CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT

Possible Values for VISIBILITY:
1. true
2. false
setZoomButtonParams(position: string, visibility: boolean) This method is used to set the position, visibility of the zoom button.

Default: Visible in the bottom-right position

Possible Values for POSITION:
1. CometChatCalls.CallSettings.POSITION_TOP_LEFT
2. CometChatCalls.CallSettings.POSITION_TOP_RIGHT
3. CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT
4. CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT

Possible Values for VISIBILITY:
1. true
2. false
setUserListButtonParams(position: string, visibility: boolean) This method is used to set the position, visibility of the user list button.

Default: Visible in the bottom-right position

Possible Values for POSITION:
1. CometChatCalls.CallSettings.POSITION_TOP_LEFT
2. CometChatCalls.CallSettings.POSITION_TOP_RIGHT
3. CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT
4. CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT

Possible Values for VISIBILITY:
1. true
2. false

Example:

let videoSettings = new CometChatCalls.MainVideoContainerSetting();

videoSettings.setMainVideoAspectRatio(CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT, true, "#333333");
videoSettings.setZoomButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setUserListButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);

let videoSettings: MainVideoContainerSetting = new CometChatCalls.MainVideoContainerSetting();

videoSettings.setMainVideoAspectRatio(CometChatCalls.CallSettings.ASPECT_RATIO_CONTAIN);
videoSettings.setFullScreenButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setNameLabelParams(CometChatCalls.CallSettings.POSITION_BOTTOM_LEFT, true, "#333333");
videoSettings.setZoomButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);
videoSettings.setUserListButtonParams(CometChatCalls.CallSettings.POSITION_BOTTOM_RIGHT, true);

Once you have the MainVideoContainerSetting object, pass it to CallSettingsBuilder via the setMainVideoContainerSetting method as shown below,

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .setMainVideoContainerSetting(videoSettings)
  .build();

const callSettings: CallSettings = new CometChatCalls.CallSettingsBuilder()
  .setMainVideoContainerSetting(videoSettings)
  .build();