Description
Zoom documentation says that proper way to render participant video is after ‘peer-video-state-change’ event is fired to call method "stream.renderVideo(…)

This works fine for other participants except for your own user/self. We would like to show local user video as well.

Our question is: Is there a zoom recommended way to do this, how should we render local-users video stream properly?

Which Web Video SDK version?
1.1.3

Additional context

Previously, before upgrading to 1.1.3, we used a workaround that worked until recently, presumably from restrictions introduced in Chrome 92, but we’re not entirely sure.

We ended up with finding a different workaround by rendering local user camera directly from “navigator.mediaDevices.getUserMedia()”, but again, not sure if this is the preferred method.

seth:

Zoom documentation says that proper way to render participant video is after ‘peer-video-state-change’ event is fired to call method "stream.renderVideo(…)

This works fine for other participants except for your own user/self. We would like to show local user video as well.

Make sure you are passing in the right userId to render the self video.

We also have local video and audio functions that can help: https://marketplace.zoom.us/docs/sdk/video/web/essential/test#preview-media-devices

Thanks,
Tommy

Thanks for the quick reply @tommy . Jumping in real quick on Seth’s behalf…

stream.renderVideo(…) with self-userid is exactly what we did before 1.1.3. It stopped working with the update, presumably due to restrictions introduced in Chrome 92, but not sure.
Are you saying it actually is supposed to work and we should investigate why it isn’t for us? Or are you recommending that we use localVideoTrack.start not only during preview but during the actual session as well?

For Chrome 92, you can resolve the issue by enabling the Shared Array Buffer origin trial:

https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation

ian-at-cadence:

Are you saying it actually is supposed to work and we should investigate why it isn’t for us? Or are you recommending that we use localVideoTrack.start not only during preview but during the actual session as well?

Both should work.

Thanks,
Tommy

Hey @seth , @ian-at-cadence

Thanks for your feedback.

localVideoTrack is a wrapper of navigator.mediaDevices . It only renders video on the local side. If the peer side needs to receive the video stream. stream.startVideo is the correct way. The method returns a promise, once it is resolved, you can call the stream.renderVideo method. Following is the pseudocode：

async function startVideo(){
  await stream.startVideo();
  await stream.renderVideo(canvas,currentUserId,width,height,...)
Thanks