# Participants video not rendered

**URL:** <https://devforum.zoom.us/t/participants-video-not-rendered/53592>\
**Category:** Web\
**Created:** [July 5, 2021, 7:41am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592 "2021-07-05T07:41:40Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![edwin.syarief](https://avatars.discourse-cdn.com/v4/letter/e/7ea924/32.png) [@edwin.syarief](https://devforum.zoom.us/u/edwin.syarief)\
**Post date:** [July 5, 2021, 7:41am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/1 "2021-07-05T07:41:40Z")

</div>

**Description**  
Participants video not rendered in canvas

**Error**  
There is no error

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

**Screenshots**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/0/f/0fc5d59a3879b0701480fee1c8423060584c4687.jpeg)

**Device (please complete the following information):**

- Device: Laptop
- OS: Windows 10
- Browser: Edge
- Browser Version Version 91.0.864.64 (Official build) (64-bit)

```auto
    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:

```auto
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));
    }

```

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [July 8, 2021, 7:42am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/2 "2021-07-08T07:42:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![edwin.syarief](https://avatars.discourse-cdn.com/v4/letter/e/7ea924/32.png) [@edwin.syarief](https://devforum.zoom.us/u/edwin.syarief)\
**Post date:** [July 8, 2021, 10:13am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/3 "2021-07-08T10:13:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [July 8, 2021, 10:32am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/4 "2021-07-08T10:32:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![edwin.syarief](https://avatars.discourse-cdn.com/v4/letter/e/7ea924/32.png) [@edwin.syarief](https://devforum.zoom.us/u/edwin.syarief)\
**Post date:** [July 8, 2021, 11:14am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/5 "2021-07-08T11:14:04Z")

</div>

Hi @vic.yang ,

Yes, I’m using:

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

```

And also here is the code to render the video:

```auto
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

---

<div class="post-metadata">

**Author:** ![ephraimwwt](https://avatars.discourse-cdn.com/v4/letter/e/779978/32.png) [@ephraimwwt](https://devforum.zoom.us/u/ephraimwwt)\
**Post date:** [July 8, 2021, 3:11pm UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/6 "2021-07-08T15:11:22Z")

</div>

@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

```auto
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.

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [July 9, 2021, 1:20am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/7 "2021-07-09T01:20:17Z")

</div>

Hey @edwin.syarief

According to the [HTMLCanvasElement.width - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/width), `width` should be a positive integer. This might be an issue.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![edwin.syarief](https://avatars.discourse-cdn.com/v4/letter/e/7ea924/32.png) [@edwin.syarief](https://devforum.zoom.us/u/edwin.syarief)\
**Post date:** [July 11, 2021, 5:39am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/8 "2021-07-11T05:39:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![edwin.syarief](https://avatars.discourse-cdn.com/v4/letter/e/7ea924/32.png) [@edwin.syarief](https://devforum.zoom.us/u/edwin.syarief)\
**Post date:** [July 11, 2021, 11:05am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/9 "2021-07-11T11:05:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sohail.sarfaraz](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/sohail.sarfaraz/32/29126_2.png) [@sohail.sarfaraz](https://devforum.zoom.us/u/sohail.sarfaraz)\
**Post date:** [July 13, 2021, 5:19am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/10 "2021-07-13T05:19:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![edwin.syarief](https://avatars.discourse-cdn.com/v4/letter/e/7ea924/32.png) [@edwin.syarief](https://devforum.zoom.us/u/edwin.syarief)\
**Post date:** [July 13, 2021, 5:34am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/11 "2021-07-13T05:34:33Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/b/f/bf108a4ca66cce896c81e2c0dbc22510cd8a79de.png)

Best Regards,

---

<div class="post-metadata">

**Author:** ![edwin.syarief](https://avatars.discourse-cdn.com/v4/letter/e/7ea924/32.png) [@edwin.syarief](https://devforum.zoom.us/u/edwin.syarief)\
**Post date:** [July 13, 2021, 5:35am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/12 "2021-07-13T05:35:16Z")

</div>

And this one

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/4/54f1f9838a58fe5b8f74c9c053ed56534531c8d5.png)

---

<div class="post-metadata">

**Author:** ![edwin.syarief](https://avatars.discourse-cdn.com/v4/letter/e/7ea924/32.png) [@edwin.syarief](https://devforum.zoom.us/u/edwin.syarief)\
**Post date:** [July 13, 2021, 6:00am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/13 "2021-07-13T06:00:38Z")

</div>

Please help @vic.yang , @ephraimwwt ,

![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/2/c2932585629f8e63f1401b8dc1c325f3ffba4aa0.png)

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

Best Regards

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [July 16, 2021, 6:43pm UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/14 "2021-07-16T18:43:14Z")

</div>

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:

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

```

Start Video Function that triggers after button press:

```auto
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

---

<div class="post-metadata">

**Author:** ![imran03](https://avatars.discourse-cdn.com/v4/letter/i/cc9497/32.png) [@imran03](https://devforum.zoom.us/u/imran03)\
**Post date:** [July 31, 2021, 3:46am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/15 "2021-07-31T03:46:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vic.yang](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vic.yang/32/24656_2.png) [@vic.yang](https://devforum.zoom.us/u/vic.yang)\
**Post date:** [August 2, 2021, 3:07am UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/16 "2021-08-02T03:07:02Z")

</div>

Hey @imran03

Thanks for your feedback. Starting from Chrome 93, you should register an [OT](https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trial) for `SharedArrayBuffer`, maybe that‘s the cause of the problem.

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [September 1, 2021, 1:07pm UTC](https://devforum.zoom.us/t/participants-video-not-rendered/53592/17 "2021-09-01T13:07:26Z")

</div>

Closed on September 1, 2021, 1:07pm UTC

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