Video View Customisation

CometChat Calling SDK v4 - Stable Release - Video View Customisation for Flutter

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(String aspectRatio)	This method is used to set the aspect ratio of main video. Possible values: 1. VideoStreamsMode.ASPECT_RATIO_CONTAIN 2. VideoStreamsMode.ASPECT_RATIO_COVER 3. VideoStreamsMode.ASPECT_RATIO_DEFAULT Default value = VideoStreamsMode.ASPECT_RATIO_DEFAULT
setFullScreenButtonParams(String position, Boolean visibility)	This method is used to set the position & visibility parameter of the full screen button. Possible values for position: 1. VideoStreamsPosition.POSITION_TOP_RIGHT 2. VideoStreamsPosition.POSITION_TOP_LEFT 3. VideoStreamsPosition.POSITION_BOTTOM_RIGHT 4. VideoStreamsPosition.POSITION_BOTTOM_LEFT Possible values for visibility: 1. true 2. false Default Values: Position: VideoStreamsPosition.POSITION_BOTTOM_RIGHT Visibility: true
setNameLabelParams(String position, Boolean visibility, String backgroundColor)	This method is used to set the position, visibility & background color of the name label. Possible values for position: 1. VideoStreamsPosition.POSITION_TOP_RIGHT 2. VideoStreamsPosition.POSITION_TOP_LEFT 3. VideoStreamsPosition.POSITION_BOTTOM_RIGHT 4. VideoStreamsPosition.POSITION_BOTTOM_LEFT Possible values for visibility: 1. true 2. false Default Values: Position: VideoStreamsPosition.POSITION_BOTTOM_LEFT Visibility: true Background Colour: #333333
setZoomButtonParams(String position, Boolean visibility)	This method is used to set the position, visibility of the zoom button. Possible values for position: 1. VideoStreamsPosition.POSITION_TOP_RIGHT 2. VideoStreamsPosition.POSITION_TOP_LEFT 3. VideoStreamsPosition.POSITION_BOTTOM_RIGHT 4. VideoStreamsPosition.POSITION_BOTTOM_LEFT Possible values for visibility: 1. true 2. false Default Values: Position: VideoStreamsPosition.POSITION_BOTTOM_RIGHT Visibility: true
setUserListButtonParams(String position, Boolean visibility)	This method is used to set the position, visibility of the user list button. Possible Values for position: 1. VideoStreamsPosition.POSITION_TOP_RIGHT 2. VideoStreamsPosition.POSITION_TOP_LEFT 3. VideoStreamsPosition.POSITION_BOTTOM_RIGHT 4. VideoStreamsPosition.POSITION_BOTTOM_LEFT Possible Values for visibility: 1. true 2. false Default Values: Position: VideoStreamsPosition.POSITION_BOTTOM_RIGHT Visibility: true

Example:

Dart

MainVideoContainerSetting videoSettings = MainVideoContainerSetting();
videoSettings.setMainVideoAspectRatio(VideoStreamsMode.ASPECT_RATIO_CONTAIN);
videoSettings.setNameLabelParams(VideoStreamsPosition.POSITION_TOP_LEFT, true, "#000");
videoSettings.setZoomButtonParams(VideoStreamsPosition.POSITION_TOP_RIGHT, true);
videoSettings.setUserListButtonParams(VideoStreamsPosition.POSITION_TOP_LEFT, true);
videoSettings.setFullScreenButtonParams(VideoStreamsPosition.POSITION_TOP_RIGHT, true);