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.
Hey @vinaykumar.t
Thanks for your feedback.
Could you share the session ID that’s experiencing issues with us for troubleshooting purposes?
Thanks
Vic
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
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
Thanks,@vic.yang!
The solution works perfectly for me. I appreciate the support.
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);
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
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
To fix overlapping participant videos in your Video WEB SDK, try adjusting the layout settings or check for CSS conflicts that may be causing the issue.