Participants video not rendered

Video SDK Web
1

Description
Participants video not rendered in canvas

Error
There is no error

Which Web Client SDK version?
“@zoom1234/videosdk”: “^1.1.0”

Screenshots

image
image1269×485 114 KB

Device (please complete the following information):

  • Device: Laptop
  • OS: Windows 10
  • Browser: Edge
  • Browser Version Version 91.0.864.64 (Official build) (64-bit)
    let zoomConfig = this.getZoomConfig();
    let zoomSignature = this.getZoomSignature(zoomConfig);
    await zmClient.join(
      zoomConfig.topic,
      zoomSignature,
      zoomConfig.name,
      zoomConfig.password
    );

    this.currentStream = zmClient.getMediaStream();
    this.currentStream.startVideo();
    this.currentStream.startAudio();
    this.currentAudioTrack = ZoomVideo.createLocalAudioTrack();
    this.currentVideoTrack = ZoomVideo.createLocalVideoTrack();

On peer-video-state-change:

let stream = zmClient.getMediaStream();
    const {
      action,
      userId
    } = payload;
    if (action === 'Start') {
      await stream.renderVideo(document.getElementById("std_video_" + userId), userId, 320, 180, 100, 100, 2);
    } else if (action === 'Stop') {
      await stream.stopRenderVideo(document.getElementById("std_video_" + userId));
    }
2

Hey @edwin.syarief

Thanks for your feedback.

LocalAudioTrack and LocalVideoTrack are for testing local media devices.

stream.renderVideo will render videos on the canvas, make sure the first parameter is an HTMLCanvasElement, and Video SDK supports render multiple videos on the same canvas.

In addition please make sure you have set the width and height attributes of the canvas.

Thanks
Vic

3

Hey @vic.yang ,

Thanks for your response. I already pass HTMLCanvasElement, and set the width and height, even I’ve tried to render all participants video in a single canvas object, there was no error, but no video shown.

Is there any other way to know what is the issue? Or maybe is it possible to get the Mediastream of each participants and render it to video tag

Best Regards,
Edwin

4

Hey @edwin.syarief

Please do not get the MediaSteam for each participant, and do not render on Video tag. Please confirm again that width and height are attributes of Canvas (canvas.width=1920) not the CSS style( canvas{ width:1920px}).

Thanks
Vic

1 Like
5

Hi @vic.yang ,

Yes, I’m using:

<canvas id="vrStreamVideo" width="570px" height="320px" style={{ marginTop: "-600px", backgroundColor: "#000" }}></canvas>

And also here is the code to render the video:

let stream = zmClient.getMediaStream();
let video = document.getElementById("vrStreamVideo");
let currentUser = zmClient.getCurrentUserInfo();
await stream.renderVideo(video, currentUser.userId, 320, 180, 0, 0, 2);

Is there any issue at my code? Thanks.

Best Regards,
Edwin

6

@edwin.syarief

Looks like a timing issue. We ran into something similar. You need to wait for the person that has turned their video on to actually be sharing their stream. So listen to

client.on('user-updated', (payload) => {
                console.log('user-updated', payload);
            });

Once this is triggered you can then call zoom.getAllUser(). This will give you a list of all the active users.

Then you need to loop through those and look for the user.bVideoOn to be true. Once you have that you can render the video with their user id.

If you do it prematurely then it seems that there is no actual stream (or it give you an empty stream). Then once the data is updated to the real stream you are still listening to the old one because you do not have a mechanism to switch.

Let me know if that makes sense.

1 Like
7

Hey @edwin.syarief

According to the HTMLCanvasElement.width - Web APIs | MDN, width should be a positive integer. This might be an issue.

Thanks
Vic

1 Like
8

Hey @vic.yang ,

I already change the width & height into positive interger, but the video still not rendered.

I also checked at item when zmClient.getAllUser() , all users bvideoOn is true

Is there any other example?

Thanks

9

Hi @ephraimwwt ,

Thanks for response, I’ve make sure that bVideoOn is true, and render video, but the video is not showing, only the audio.

So, we can hear audio from other participants but not able to see their video

10

Issue still exist, so what is the solution for video that is not showing.

11

Hi Guys, I’ve uploaded the log files hope it will helps, the strange thing is, the current user only send the audio, not the video even when their camera is on

image
image1867×104 5.77 KB

Best Regards,

12

And this one

image
image1083×144 8.08 KB

13

Please help @vic.yang , @ephraimwwt ,

image

Here is the current code, there is no error, and camera is on. But couldn’t get video rendered at Canvas.

Best Regards

14

Hey @edwin.syarief , @sohail.sarfaraz ,

Make sure you have the connection-change event listener as well as the stream.startVideo() function and the stream.renderVideo function. You can see my example below:

Required Event Listener:

this.client.on("connection-change", async (payload: any) => {
  console.log(payload);
  this.stream = this.client.getMediaStream();
})

Start Video Function that triggers after button press:

this.stream.startVideo().then((data: any) => {
  console.log(data);

  const session = this.client.getSessionInfo();
  console.log(session);

  this.stream.renderVideo(this.canvas, session.userId, 300, 100, 0, 0, 2)

}).catch((error: any) => {
  console.log(error);
})

Let me know if this helps.

Thanks,
Tommy

15

Followed all the suggestion above but still unable to show video on the canvas :frowning:

16

Hey @imran03

Thanks for your feedback. Starting from Chrome 93, you should register an OT for SharedArrayBuffer, maybe that‘s the cause of the problem.

Thanks
Vic

17

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.