Video WEB SDK participant video is overlapping

Video SDK
1

Hello Zoom Support Team,

We are currently utilizing Zoom Video SDK 1.10.8 within our application, and we have encountered an issue that we would appreciate your assistance with.

Following the guidelines provided, we have implemented a single HTML canvas rendering approach. Specifically, we have configured the system to display the video stream of the participant who is speaking using the following code snippet:


stream.renderVideo(
document.querySelector('#participant-videos-canvas'),
payload.userId, 1920, 1080, 0, 0, 3
);

this.stream.stopRenderVideo(
                                document.querySelector('#participants-canvas'),
                                this.oldActiveUserId
                            );
this.stream.renderVideo(
                                document.querySelector('#participants-canvas'),
                                payload[0].userId,1920,1080,0,0,3);

Additionally, we are correctly invoking stopRenderVideo for the previously active user. Despite adhering to these practices, we are experiencing difficulties when users join from mobile devices.

We kindly request your guidance and support in resolving this issue. Any insights or recommendations you can provide would be greatly appreciated.

Thank you for your attention to this matter.

Sincerely,
Vinay Thakkar

I’m trying to upload an image for more reference, but it’s showing me this error message.
An error occurred: Sorry, you can’t embed media items in a post.

2

Hey @vinaykumar.t

Thanks for your feedback.

Could you share the session ID that’s experiencing issues with us for troubleshooting purposes?

Thanks
Vic

3

Hi @vic.yang

I appreciate your response.

The session information is attached.

Session ID: +dY4ljR6TyOmqwWVey1uuA==
Session Name: 414db2c5-46eb-4906-be0d-16e7058ef0fc

If you require more information, please let me know.

Thanks,
Vinay Thakkar

4

Hey @vinaykumar.t

Are you rendering the active video on the same canvas? This is feasible, but several factors need to be considered:

  • If the active video is self-view and stream.isRenderSelfViewWithVideoElement() returns true, you need to use the video tag to render the self-video.

  • When listening to and handling the video-active-change event, pay attention to the state property in the payload. You can only render the video when the state is Active.

  • Be sure to stop rendering the old video before rendering a new one to avoid video overlap issues.

Here is a simple pseudocode example:

let activeVideoId = 0;
client.on("video-active-change", async (payload) => {
  const { state, userId } = payload;
  if (state === "Active") {
    if (activeVideoId !== userId) {
      // stop rendering the previous video first
      if (activeVideoId) {
        await stream.stopRenderVideo(canvas, activeVideoId);
      }
      await stream.renderVideo(
        canvas,
        userId,
        1280,
        720,
        0,
        0,
        VideoQuality.Video_720P
      );
    }
    activeVideoId = userId;
  } else {
    // No active video, stop rendering the previous video
    await stream.stopRenderVideo(canvas, activeVideoId);
    activeVideoId = 0;
  }
});

Thanks
Vic

5

Thanks,@vic.yang!

The solution works perfectly for me. I appreciate the support.

6

Hi, @vic.yang

Thanks for helping. I have one last question.
Is there a way to stop rendering video for every user in the stream?
like
await stream.stopRenderVideo(canvas);

7

Hey @vinaykumar.t

Is there a way to stop rendering video for every user in the stream?

Currently, there is no straightforward way to stop rendering all videos directly. You can stop them one by one using the stream.stopRenderVideo method.

Thanks
Vic

8

Hi @vic.yang ,

Thanks for the update,

Feedback :
The Zoom team should consider adding this feature to stop rendering video for every user in the stream. Having that would be very helpful in many ways.

Thanks,
Vinay Thakkar