Render user video

The code on this page only works with the custom UI.

In custom UI mode, the SDK provides multiple options to render user video after a user subscribes to another user's video. After following the steps to render a user's video, each option contains a different type of video stream.

• Single attendee - A single user's video.
• Active speaker - A single user's video that automatically updates when the active speaker changes.
• Preview - A preview of the local user's video.
• Share - The content being shared by another user.

Regardless of which render option you are using, the SDK utilizes four main components.

• MobileRTCVideoView - The area where the video is rendered.
• MobileRTCVideoViewManager - An object that sets up the video view.
• MobileRTCVideoUnitRenderInfo - An object that defines the video's X and Y dimensions.
• ICustomizedVideoSink - A listener that indicates if a video's subscription fails.

Subscribe to error data

Before subscribing to the video, implement ICustomizedVideoSink to know when a video subscription fails. To pass it into the SDK, you'll need a reference to the MobileRTCVideoView instance being set up.

val videoViewListener = ICustomizedVideoSink { errorCode, size, userId ->
    // Handle error logic
}
val videoViewManager = videoView.videoViewManager
videoViewManager.addListener(videoViewListener)

ICustomizedVideoSink videoViewListener = new ICustomizedVideoSink() {
    @Override
    public void onSubscribeUserFail(int errorCode, int size, long userId) {
    }
};
MobileRTCVideoViewManager videoViewManager = videoView.getVideoViewManager();
videoViewManager.addListener(videoViewListener);

When you've finished using the video view, remove the listener to avoid leaks.

videoViewManager.removeListener(videoViewListener)

videoViewManager.removeListener(videoViewListener);

Define video view

The primary user-facing component is MobileRTCVideoView. This class extends FrameLayout. You can include the view using XML, or programmatically.

Include the view in an XML layout with this code.

<us.zoom.sdk.MobileRTCVideoView
    android:id="@+id/videoView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Or include the view programmatically, similar to typical Android View objects.

Create a new MobileRTCVideoView instance.

val myVideoView = MobileRTCVideoView(context)

MobileRTCVideoView myVideoView = new MobileRTCVideoView(context);

Get the MobileRTCVideoView from the XML layout.

val myVideoView = mMainLayoutView.findViewById(R.id.videoView)

MobileRTCVideoView myVideoView = mMainLayoutView.findViewById(R.id.videoView);

Subscribe to video streams

Each MobileRTCVideoView instance created by the SDK has an associated MobileRTCVideoViewManager. Use these to manage the lifecycle of the video subscription rendered on each video view.

To obtain a MobileRTCVideoViewManager reference, access the videoViewManager for the view where video will be rendered.

val videoViewManager = videoView.videoViewManager

MobileRTCVideoViewManager videoViewManager = videoView.getVideoViewManager();

Before subscribing, create a MobileRTCVideoUnitRenderInfo instance to define the video's dimensions.

val renderInfo = MobileRTCVideoUnitRenderInfo(xPercent, yPercent, widthPercent, heightPercent)

MobileRTCVideoUnitRenderInfo renderInfo = new MobileRTCVideoUnitRenderInfo(xPercent, yPercent, widthPercent, heightPercent);

The videoViewManager subscribes to a video stream based on the four options listed at the top of the page. To subscribe to a single attendee's video, call addAttendeeVideoUnit. This requires the userId of the user whose video is being subscribed to. Access this in InMeetingUserInfo.userId.

Learn how to retrieve a userId on Access in-meeting user info.

videoViewManager.addAttendeeVideoUnit(userId, renderInfo)

videoViewManager.addAttendeeVideoUnit(userId, renderInfo);

To subscribe to the active speaker stream, call addActiveVideoUnit.

videoViewManager.addActiveVideoUnit(renderInfo)

videoViewManager.addActiveVideoUnit(renderInfo);

To subscribe to the local preview of the user associated with this SDK instance, call addPreviewVideoUnit.

videoViewManager.addPreviewVideoUnit(renderInfo)

videoViewManager.addPreviewVideoUnit(renderInfo);

To subscribe to the video being shared by another user, call addShareVideoUnit.

To keep listening to the current sharing status and know when to subscribe to the shared view, use the onSharingStatus callback from InMeetingShareController.InMeetingShareListener.

videoViewManager.addShareVideoUnit(userId, renderInfo)

videoViewManager.addShareVideoUnit(userId, renderInfo);

Manage existing video streams

While an attendee's video subscription is active, it can be updated to resubscribe to another user. To update the attendee's video unit with a new user or size, call updateAttendeeVideoUnit.

videoViewManager.updateAttendeeVideoUnit(userId, renderInfo)

videoViewManager.updateAttendeeVideoUnit(userId, renderInfo);

To resize any other type of video unit, use the update methods providing only the render info.

videoViewManager.updatePreviewVideoUnit(renderInfo)
videoViewManager.updateShareVideoUnit(renderInfo)
videoViewManager.updateActiveVideoUnit(renderInfo)

videoViewManager.updatePreviewVideoUnit(renderInfo);
videoViewManager.updateShareVideoUnit(renderInfo);
videoViewManager.updateActiveVideoUnit(renderInfo);

Finally, when a video unit is no longer being used, end the subscription with the method associated with the type of video unit.

videoViewManager.removeActiveVideoUnit()
videoViewManager.removeAllAttendeeVideoUnit()
videoViewManager.removeAttendeeVideoUnit(userId)
videoViewManager.removePreviewVideoUnit()
videoViewManager.removeShareVideoUnit()

videoViewManager.removeActiveVideoUnit();
videoViewManager.removeAllAttendeeVideoUnit();
videoViewManager.removeAttendeeVideoUnit(userId);
videoViewManager.removePreviewVideoUnit();
videoViewManager.removeShareVideoUnit();