How can I make the Speaker View in Zoom SDK Video on the Web, is there any configuration that needs to be done, or how can I hide the host or make it appear minimized when a second participant enters.
Can this view or a similar one be done in video SDK?
Hi @bmanzano ,
Thanks for your post! You can achieve this view through some styling configurations. Please take a look at the react-demo of the Video SDK web sample app to see one way this can be achieved.
Thanks,
Rehema
How can I apply the configurations, I already looked at https://marketplace.zoom.us/docs/sdk/overview/websdk-gallery-view/ and it does not explain how to make those screen changes, since it only applies in SDK meeting and not in SDK Video, it always shows me all the participants in a grid as I show it in the following image, I would like the host to be displayed smaller so that the other participants can be seen in the center as shown in the image at the beginning of the post .
Hi Benigno - I think what you may be after is this part here - https://developer.zoom.us/docs/sdk/video/web/essential/video/#render-participant-videos
Specifically this bit -
stream.renderVideo(document.querySelector('#participants-canvas'), payload.userId, 960, 540, X_CORD, Y_CORD, 2)
You can specify the exact size and location of each video. Here is a 4x4 example - https://developers.zoom.us/docs/sdk/video/web/essential/video/#example-4x4-gallery-view-layout
You would want to modify this section to get the results you are after.:
stream.renderVideo(document.querySelector('#participants-canvas'), participants[0].userId, 960, 540, 0, 540, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[1].userId, 960, 540, 960, 540, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[2].userId, 960, 540, 0, 0, 2)
stream.renderVideo(document.querySelector('#participants-canvas'), participants[3].userId, 960, 540, 960, 0, 2)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.