# 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:** 20\
**Page:** 1

<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 23, 2021, 11:12pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/1 "2021-03-23T23:12:44Z")

</div>

**Description**  
Hello, I am trying to use Video SDK for my new project, and getting following error while second user is connected with client.join(). First user is already connected, and started the video, and getting the error on second user joins.

**Error**  
{  
reason: “user is not send video” ​,  
type: “INVALID\_PARAMETERS”  
}

**Which Web Video SDK version?**  
Downloaded `zoom-instant-sdk-web-1.0.2`, but ZoomInstant.VERSION is 1.0.0.

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:

1. first user join()
2. first user starts video
3. second user join()
4. Gets error on ‘video-active-change’ event.

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

- Device: Macbook
- OS: Big Sur v. 11.2.1
- Browser: Chrome
- Browser Version: Version 89.0.4389.90 (Official Build) (x86\_64)

---

<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 24, 2021, 6:04pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/2 "2021-03-24T18:04:34Z")

</div>

Hey @ktae13 ,

Thank you for reporting this issue, we are investigating it and will report back once we find the root cause. (CS-3209) 🙂

-Tommy

---

<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 24, 2021, 6:45pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/3 "2021-03-24T18:45:27Z")

</div>

Hi @tommy

Thanks for the reply. I just wanted to confirm if this was the (known) issue with the current version of SDK, and how long it would take to fix the issue. I am creating a prototype for new project, and need to have (fully) functional zoom video sdk asap.

Thank you,  
Best,  
KB

---

<div class="post-metadata">

**Author:** ![jremi](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jremi/32/24847_2.png) [@jremi](https://devforum.zoom.us/u/jremi)\
**Post date:** [March 24, 2021, 7:08pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/4 "2021-03-24T19:08:56Z")

</div>

Guys, I also want to mention that I am also having the same exact issue …

Let me also mention some additional context…

Your documentation is a bit misleading…

The link below under the heading **Render Video** reflects that on the `video-active-change` event that is emitted that the payload object when `payload.state === 'Active'` should include a property called `id` (e.g: `payload.id` … However, from my testing the object DOES NOT return `id` it returns `userId` … I have also tried using the `userId` but same error as above.

Please resolve so I can also test your SDK.

Regards,

For example…

> **[Manage Video - Essential Guides - Web - Video SDKs - Zoom Software...](https://marketplace.zoom.us/docs/sdk/video/web/essential/video)**
>
> Manage Video
> 
> All methods can be accessed through a stream instance retrieved through the client.getMediaStream method:
> 
> 
> 
> Video IDs
> 
> Within the scope o...

---

<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 24, 2021, 7:09pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/5 "2021-03-24T19:09:10Z")

</div>

Hey @ktae13 ,

We are looking into this to see if it is an issue with the current version.

However, it seems like you may be trying to stream user 2’s video before they turn their webcam on. Can you confirm?

Thanks,  
Tommy

---

<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 24, 2021, 7:09pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/6 "2021-03-24T19:09:48Z")

</div>

Thanks for your feedback @jremi , we will get this docs fixed. (DEVELOPERS-1067)

-Tommy

---

<div class="post-metadata">

**Author:** ![jremi](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jremi/32/24847_2.png) [@jremi](https://devforum.zoom.us/u/jremi)\
**Post date:** [March 24, 2021, 7:10pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/7 "2021-03-24T19:10:42Z")

</div>

Thank you, I’m kinda stuck for now until I can get some additional insight from your dev team.

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:** [March 24, 2021, 7:11pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/8 "2021-03-24T19:11:15Z")

</div>

Understood @jremi , we will work to resolve this asap.

-Tommy

---

<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 24, 2021, 8:13pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/9 "2021-03-24T20:13:13Z")

</div>

@tommy  
I am not trying to stream user 2’s video. When user 2 joins the meeting, I am getting `video-active-change` message for user 1, and getting the error while processing user 1’s video on user 2’s screen.

@jremi I also had issues with the misleading doc. For example, `renderVideo`'s parameters on the example is wrong, but SDK reference has right values([Stream | @zoomus/instantsdk](https://marketplacefront.zoom.us/sdk/custom/web/modules/stream.html#rendervideo))

Thanks,

---

<div class="post-metadata">

**Author:** ![jremi](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jremi/32/24847_2.png) [@jremi](https://devforum.zoom.us/u/jremi)\
**Post date:** [March 24, 2021, 8:30pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/10 "2021-03-24T20:30:56Z")

</div>

@ktae13 … the SDK reference looks good.

Either way, when I do the `stream.startVideo()` it fires off the event on the `.on('video-active-change')` which is GOOD and the payload that comes in DOES have `{state: "Active", userId: "XXXXXXXXX"}`

My webcam light turns on the macbook…

The problem is that when I run for example:  
` await stream.renderVideo(canvas, payload.userId, 300, 200, 0, 0, 1)`

The canvas shows nothing. I have verified that I have the the corect canvas element being passed in …

For example:

` const canvas = document.querySelector("#canvas-video-capture1");`

This canvas is a valid DOM element on the page.

Any ideas?

---

<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 24, 2021, 8:50pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/11 "2021-03-24T20:50:36Z")

</div>

@jremi That is also my another problem.  
Mentioning @tommy just in case. 🙂

Here’s couple scenarios.  
**[I’m the only one in the meeting]**

1. Join()
2. startVideo(‘canvas id’) ==\> video started, but not render on canvas.
3. got `video-active-change`  
3.1. calling stream.renderVideo(‘canvas’…) =\> start render on canvas.

**[Two players in the meeting]**

1. Join u1
2. Join u2
3. u1 startVideo
4. u2 gets `video-active-chage`, but u1 doesn’t get it.  
4.1 so, video is rendered on u2 screen, but not on u1 screen.
5. When u2 leaves, u1 gets `video-active-chage` and displays its video now.

---

<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 24, 2021, 9:30pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/12 "2021-03-24T21:30:32Z")

</div>

@jremi I was able to render video after startVideo.  
What you need to do is

```auto
await this.stream.startVideo();
await this.stream.renderVideo(canvas, userId, 300, 200, 0, 0, 1);

```

It seems like `video-active-change` is not for **MY** video, but for others only.

---

<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 24, 2021, 9:42pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/13 "2021-03-24T21:42:51Z")

</div>

Hey @ktae13 ,

Thanks for sharing this.

@jremi , are you still stuck?

-Tommy

---

<div class="post-metadata">

**Author:** ![jremi](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jremi/32/24847_2.png) [@jremi](https://devforum.zoom.us/u/jremi)\
**Post date:** [March 25, 2021, 5:15am UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/14 "2021-03-25T05:15:01Z")

</div>

@tommy @ktae13

Yes, I am still stuck.

When I run …

- `await stream.startVideo()` is triggering the `video-active-change` event. ✅

- Inside the `video-active-change` event handler the `payload object is emitted with `payload.state === ‘Active’` ✅

- Inside this conditional check for the `Active` state the `renderVideo` method is called.

Example: `await stream.renderVideo(canvas, userId, 300, 200, 0, 0, 1);`

Canvas is the DOM element of the canvas on the page. This is assigned via querySelector. The userId is provided via the emitted payload object in the event `payload.userId`

- The MacBook green camera light turns ON ✅.

DESPITE all of the above NOTHING is rendered to the canvas. I get no video appearing on the page. 🚫

Example snippets of the most critical parts.:

```auto
// Global button handler function to start video
window.startVideo = async function () {
  if (!stream.isCapturingVideo()) {
    console.log("Starting video...");
    await stream.startVideo("canvas-video-capture1");
  }
};

// Client event handler for video-active-change event.
client.on("video-active-change", async (payload) => {
  console.log("Zoom video-active-change:", payload);
  if (payload.state === "Active") {
    const canvas = document.querySelector("#canvas-video-capture1");
    await stream.renderVideo(canvas, payload.userId, 300, 200, 0, 0, 1);
  } else if (payload.state === "Inactive") {
    await stream.stopRenderVideo();
  }
});

```

-J

---

<div class="post-metadata">

**Author:** ![jremi](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/jremi/32/24847_2.png) [@jremi](https://devforum.zoom.us/u/jremi)\
**Post date:** [March 25, 2021, 5:38am UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/15 "2021-03-25T05:38:39Z")

</div>

**UPDATE: I have SOLVED my issue.**

I needed to use `<canvas>` tag. I was using accidentally `<div>`

Thank you!

---

<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 25, 2021, 4:24pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/16 "2021-03-25T16:24:35Z")

</div>

Hey @jremi ,

Happy to hear you resolved your issue. 🙂

We are going to be updating the docs to clear up confusion around this.

Thanks,  
Tommy

---

<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 25, 2021, 4:31pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/17 "2021-03-25T16:31:11Z")

</div>

Hey @tommy,  
Wonder if there’s any update on my original question, and would report more issues I have while using video sdk.

1. Calling client.leave() throws error.  
1.1 `WebSocket is already in CLOSING or CLOSED state.`  
1.2 `Uncaught (in promise) {type: "INVALID_OPERATION"}`
2. Calling client.join() after client.leave() throws error.  
2.1 `Connect error: {type: "INVALID_OPERATION", reason: "duplicated operation"}`
3. Video render warning on renderVideo() call.  
3.1 `RENDER WARNING: there is no texture bound to the unit 0 ~ 4`  
3.2 `WebGL: too many errors, no more errors will be reported to the console for this context.`
4. Video doesn’t render on stream.startVideo() and stream.renderVideo() after stream.stopVideo().  
4.1 There’s no warning or error on this stage, camera light is on, but not rendering on canvas.
5. Not receiving `video-active-change` for some participants.  
5.1 I am testing it on my local machine only with 3 different browsers, and I am not sure if it is by design, but not every participants receives `video-active-change` event when some of participants starts video.  
5.2 Because of this, I am having hard time to render the all videos from all participants.

I will keep add more when I find more issues, but hope they all could be fixed soon.

Thanks,  
Best,  
KB

---

<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 25, 2021, 4:57pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/18 "2021-03-25T16:57:41Z")

</div>

Hey @ktae13 ,

For additional issues, please create new topics and fill out the post template so we have enough info to debug and for easier tracking. 🙂

Here is a possible solution for your original issue:

Since we support rendering multiple videos (gallery view), the `video-active-change` event is not essential for rendering video. There are two events that you can take into account: `peer-video-state-change` and `user-updated`.

```auto
client.on('peer-video-state-change',async (payload)=>{
    const { action,userId } = payload;
    if(action==='Start'){
      /* 
        render video on canvas 

        we recommend the aspect = 16/9, and please note that the origin of the coordinates is the lower left corner of the canvas.

      */
      await stream.renderVideo(canvas,userId,width,height,x,y,quality);
    }else if(action==='Stop'){
      await stream.stopRenderVideo(canvas,userId);
    }
  })

```

If you need to display a list of users in pages, we recommend that you maintain a list of rendered videos by yourself. You can render or stop rendering videos when the users in the list change. Listen to the `user-updated` and `user-removed` events to update the list of rendered videos.

```auto
let renderedList = [];
  let page = 0
  let pageSize = 5;
  const canvas = document.querySelector('.video-canvas');// canvas to render the video
  const handleParticipantsChange = (participants)=>{
    const pageParticipants = participants.filter((user,index)=>Math.floor(index/pageSize)===page);
    const videoParticipants = pageParticipants.filter(user=>user.bVideoOn);
    /** For performance reasons, the SDK can only render 9 videos at the same time， we recommand 
     * to stop rendering the old video and then render a new video
     * **/
    const removedVideoParticipants = renderedList.filter(user=>videoParticipants.findIndex(user2=>user2.userId===user.userId)===-1);
    if(removedVideoParticipants.length>0){
      removedVideoParticipants.forEach(async (user)=>{
        await stream.stopRenderVideo(canvas,user.userId);
      })
    }
    const addedVideoParticipants = videoParticipants.filter(user=>renderedList.findIndex(user2=>user2.userId===user.userId)===-1);
    if(addedVideoParticipants.length>0){
      addedVideoParticipants.forEach(async (user)=>{
        // render new video
      await stream.renderVideo(canvas,user.userId,width,height,x,y,quality);
      });
    }
    renderedList = videoParticipants;
  }
  client.on('user-updated',()=>{
    const participants = client.getParticipantsList();
    handleParticipantsChange(participants);
  })
  client.on('user-removed',()=>{
    const participants = client.getParticipantsList();
    handleParticipantsChange(participants);
  })

```

For more details please refer to the tutorial and the sample demo project (React). This is a full demo of how to manage multi-user video rendering and paging.

If you have followed the guidance to render video, but there is still no drawing on the canvas, please check whether you have set the `width` and `height` attributes of the canvas.

Thanks,  
Tommy

---

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

</div>

Thanks @tommy ,

Marking it as resolved.

I didn’t know about `peer-video-state-change` event, since I thought `video-active-change` handles every video related events. 🙂

I guess I would need to take a look at the sample codes more carefully.

Thank you,  
Best,  
KB

---

<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 25, 2021, 7:24pm UTC](https://devforum.zoom.us/t/stream-rendervideo-error-on-connected-user/46385/20 "2021-03-25T19:24:03Z")

</div>

Happy to hear that suggestion resolved the issue for you! 🙂

We will be updating the docs to make this more clear.

-Tommy

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