# stream.renderVideo() error on connected user

**URL:** <https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385>\
**Category:** Web\
**Created:** [March 23, 2021, 11:12pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385 "2021-03-23T23:12:43Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![treedis](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/treedis/32/25135_2.png) [@treedis](https://devforum.zoom.us/u/treedis)\
**Post date:** [March 26, 2021, 4:09pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/21 "2021-03-26T16:09:53Z")

</div>

For me this is still not working  
I’m doing the following:

```auto
this.client.on("connection-change", async (payload) => {
   if (payload.state !== "Connected") return;
   this.stream = this.client.getMediaStream();
   await this.stream.startVideo();
   const session = this.client.getSessionInfo();
   const canvas = document.querySelector("#user-video");
   await this.stream.renderVideo(canvas,session.userId,160,80,0,0,1);
})

```

The camera is being turned on but nothing is being rendered to the canvas. Canvas has no CSS at the moment.

Also my canvas is as following:

```auto
<canvas id="user-video"></canvas>

```

What am I doing wrong? There is no error. It just won’t render. I tried Firefox, Chrome and Safari

Also it is not clear from the documentation what are the arguments to startVideo:  
What is video?

```auto
try{
  const canvas = ['capture-canvas-1', 'capture-canvas-2'];
  const video = 'capture-video';
  await stream.startVideo(canvas, video);
} catch (error) {
  console.log(error);
}

```

---

<div class="post-metadata">

**Author:** ![ktae13](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ktae13/32/24978_2.png) [@ktae13](https://devforum.zoom.us/u/ktae13)\
**Post date:** [March 26, 2021, 4:35pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/22 "2021-03-26T16:35:34Z")

</div>

Hi @treedis

1. I am not 100% sure, but I think `startVideo()` needs to be called on main thread.  
Try call it outside of `connection-change`.
2. I think the example needs to be updated. If you see the actual function,  
`startVideo(option?: CaptureVideoOption): ExecutedResult`.  
As you see, it doesn’t take canvas or video. it takes cameraId, captureHeight and captureWidth as option.  
Actual rendering is happening on `renderVideo()` call, which as already mention above, you would try to call it on main thread.

---

<div class="post-metadata">

**Author:** ![treedis](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/treedis/32/25135_2.png) [@treedis](https://devforum.zoom.us/u/treedis)\
**Post date:** [March 26, 2021, 4:42pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/23 "2021-03-26T16:42:14Z")

</div>

On the main thread you mean like this?

```auto
const signature = generateInstantToken(topic);
await this.client.join(topic, signature, name);
this.stream = this.client.getMediaStream();
await this.stream.startVideo();
const session = this.client.getSessionInfo();
const canvas = document.querySelector("#user-canvas");
await this.stream.renderVideo(canvas,session.userId,160,80,0,0,1);

```

I tried, it still shows nothing.

After debugging a bit, I see that nothing happens after `this.stream.renderVideo`, even if I try to do console.log. It seems that it blocks the executions and not throwing any error.

---

<div class="post-metadata">

**Author:** ![ktae13](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ktae13/32/24978_2.png) [@ktae13](https://devforum.zoom.us/u/ktae13)\
**Post date:** [March 26, 2021, 4:55pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/24 "2021-03-26T16:55:49Z")

</div>

I think you still needs to wait for `connection-change` to call `getMediaStream()`. What I can suggest is to create a button to enable/disable camera, and try to call `startVideo()` and `renderVideo()` using the button.

```auto
this.client.on("connection-change", async (payload) => {
   if (payload.state !== "Connected") return;
   this.stream = this.client.getMediaStream();
})

```

```auto
startVideo = async () => {
    try {
      if (!this.stream.isCapturingVideo()) {
        await this.stream.startVideo();
        // below could move to 'video-active-change' listener/
        const session = this.client.getSessionInfo();
        const canvas = document.querySelector("#user-video");
        await this.stream.renderVideo(canvas,session.userId,160,80,0,0,1);
      }
    } catch (error) {
      console.error('startVideo ERROR: ', error);
    }
  }

```

And call `startVideo`, from a button.

---

<div class="post-metadata">

**Author:** ![treedis](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/treedis/32/25135_2.png) [@treedis](https://devforum.zoom.us/u/treedis)\
**Post date:** [March 26, 2021, 5:03pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/25 "2021-03-26T17:03:09Z")

</div>

This works! thank you so much.  
By the way, you can’t await on the renderVideo function. It won’t resolve and block rest of the execution

---

<div class="post-metadata">

**Author:** ![treedis](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/treedis/32/25135_2.png) [@treedis](https://devforum.zoom.us/u/treedis)\
**Post date:** [March 26, 2021, 5:12pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/26 "2021-03-26T17:12:17Z")

</div>

I had to do this:

```auto
startVideo = async () => {
    try {
      if (!this.stream.isCapturingVideo()) {
        await this.stream.startVideo();
        const session = this.client.getSessionInfo();
        const canvas = document.querySelector("#user-canvas");
        //we don't await on renderVideo because it never resolves
        this.stream.renderVideo(canvas, session.userId, 160, 80, 0, 0, 1);
      }
    } catch (err) {
      throw err;
    }
  };

```

otherwise if I await there, `await startVideo()` blocks the thread as it never resolves.

---

<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:** [March 29, 2021, 5:48pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/27 "2021-03-29T17:48:19Z")

</div>

Hey @treedis ,

Happy to hear you got it sorted out! Thanks for sharing your solution @ktae13 ! 🙂

Let us know if we can help with anything else.

-Tommy

---

<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:** [April 29, 2021, 3:48am UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/28 "2021-04-29T03:48:59Z")

</div>

Closed on April 29, 2021, 3:48am UTC

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

[Previous page](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385.md?page=1)