Custom meeting UI: Resized User Cam + Shared View

[Erlend]

Hello, I have some difficulties with implementing a custom meeting UI. Here’s an illustration of what I’d like to achieve:

• The first thing would be to resize the video of the users in the meeting and place them in an appropriate corner.

• The second thing would be to share a view for both users of the meeting.

I have looked at other threads on the forum and many answers just refer to the Zoom sample, Zoom example2, and the documentation.

Here’s the start of the documentation for “Customized video UI”. It says:

Our customizable view is called MobileRTCVideoView . Implement the MobileRTCVideoView function in the code layout. The Zoom SDK interface will use the MobileRTCVideoView function as the video container.

Does the view have to be placed in another activity, or could it be added as a separate view object of the main activity?

I have downloaded the samples and got the code, but I haven’t been able to open them in Android Studio. example2 only have Constants.java, MainActivity.java, and MyMeetingActivity.java, but there’s some code which I don’t know where it’s placed, e.g. of functions like showLeaveDialog() and showParticipants().

Creating an instant meeting with customMeetingUI false works as intended.

I appreciate some pointers as to where I should start with implementing a custom meeting ui shown on the image above.

[Erlend]

My apologies for bumping this thread, but I really would appreciate some concrete advice. Just analyzing the samples and documentation has been very difficult.

[carson.zoom (Carson)]

Hi Erlend,

Pardon again for the late response. Regarding your questions:

We provide 2 demo apps for Android SDK, the example2 is a simple app that shows how to embed a Zoom meeting UI into an Activity. Our SDK provides 2 different ways of meeting UI:

• Zoom default UI - the same UI as you see in the regular Zoom meeting client
• Custom UI - you have the full control of your UI, and we just provide the corresponding interfaces to help you achieve your own meeting UI

So the example2 is using Zoom default UI, which could not be modified to the layout you are showing in your sketch. If you would like to experience the real Custom UI, you will need to use the demo app “sample”:https://github.com/zoom/zoom-sdk-android/tree/master/mobilertc-android-studio/sample

You may follow the instruction here to download, to run, to build the “sample” app:https://marketplace.zoom.us/docs/sdk/native-sdks/android/getting-started/prerequisites, once you are able to build the app, if your account support custom UI, you may enable it in the “Settings” and start a meeting to feel the Custom UI. The Custom UI in the demo app might look similar to the default UI, but every component is “handmade” in the app and configurable:

Once you have a feeling of the Custom UI, you may refer to the “Navigating SDK sample files” in https://github.com/zoom/zoom-sdk-android#navigating-sdk-sample-files and locate the implementation of each feature in our demo app.

Here is a brief process of how to create a video view in Custom UI:

1. Create a MobileRTCVideoView and put it into the layout
2. Get MobileRTCVideoViewManager from MobileRTCVideoView.getVideoViewManager()
3. Use the MobileRTCVideoViewManager to subscribe to the video of the host or users.

Please have a try, let me know if any other questions. Thank you!

[Erlend]

Hi Carson,

Thank you for your reply. I finally managed to enable the custom meeting ui after following the Zoom sample, as you said. I copied and integrated a lot of the java classes, and so I don’t have a full understanding of how everything fits together. The camera feed is still in fullscreen, and this is something I’ll look into later when I have time.

[carson.zoom (Carson)]

Hi Erlend,

Glad to hear from you. Yes, the Custom UI code in the sample app is in full screen mode, but since everything is customizable, you may configure it into any way you like and play around with it. Let me know if any other questions.

Thanks!