# Are there any known issues with using multiple canvas elements for peer video streams?

**URL:** <https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948>\
**Category:** Web\
**Created:** [August 17, 2021, 4:06pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948 "2021-08-17T16:06:55Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![seth](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/seth/32/30679_2.png) [@seth](https://devforum.zoom.us/u/seth)\
**Post date:** [August 17, 2021, 4:06pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/1 "2021-08-17T16:06:55Z")

</div>

**Description**  
In our product that utilizes Zoom Video SDK, we use separate/different canvas elements for each peer video stream. Recently it was noticed that zoom’s own example uses the same canvas for all peers.

The question is do multiple canvases have any known ramifications? Should we rewrite our code to use a single canvas?

**Which Web Video SDK version?**  
1.1.3

---

<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:** [August 17, 2021, 4:25pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/2 "2021-08-17T16:25:57Z")

</div>

Hey @seth ,

Using a single canvas will have better performance.

Related:

> [@Too many active WebGL contexts. And all videos disappears after that](https://devforum.zoom.us/t/too-many-active-webgl-contexts-and-all-videos-disappears-after-that/51620/3):
>
> Hey @mx_ryabov , It appears you may not be using the canvas elements correctly, and it may be causing the issues with garbage collection. I see you are calling stopRender on the old canvas and startRender on the new one, but typically, you should be called on the exact same canvas. In addition, our API allows users to draw multiple streams on a single canvas, so I would encourage you to take a closer look at our demo app. slight_smile If you are able to reproduce the issue on our sample app…

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![vitalyateventcadence](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vitalyateventcadence/32/51920_2.png) [@vitalyateventcadence](https://devforum.zoom.us/u/vitalyateventcadence)\
**Post date:** [August 26, 2021, 12:51pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/3 "2021-08-26T12:51:22Z")

</div>

Jumping in Seth’s behalf…  
While trying to render multiple video on canvas we discovered problem we seems can not overcome. renderVideo seems does not respect coordinates passed to it and renders video on whole canvas.  
See image below. Canvas size is 800x800, expected result that video will be rendered in top-left half of it. In reality it takes whole canvas as you can see.

Could you maybe point us what do we do wrong?  
(edit: we did update to 1.1.4 before trying that)  
(edit2: found this following property and it returns false in our code. Any ideas?)

/\*\*

- Whether the browser is support render multiple videos simultaneously  
\*/  
function isSupportMultipleVideos(): boolean;

 ![image_2021_08_26T10_46_09_743Z](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/8/a/8a06d072118ac8de14f424dbd9373ce0a0090793.jpeg)

---

<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:** [August 26, 2021, 5:30pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/4 "2021-08-26T17:30:01Z")

</div>

Hey @vitalyateventcadence ,

Make sure you are providing the following 3 sizing requirements:

renderVideo sizing:

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

```

Canvas Aspect Ratio:

```auto
<canvas id="canvas" width="1920" height="1080"></canvas>

```

Canvas Sizing:

```css
canvas {
  width: 800px;
}

```

Let me know if that helps! 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![vitalyateventcadence](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vitalyateventcadence/32/51920_2.png) [@vitalyateventcadence](https://devforum.zoom.us/u/vitalyateventcadence)\
**Post date:** [August 27, 2021, 9:00am UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/5 "2021-08-27T09:00:51Z")

</div>

Hey @tommy

We had pretty much exactly the same set up as you described. As I mentioned it was noticed later that this function [Stream | @zoom/videosdk](https://marketplacefront.zoom.us/sdk/custom/web/modules/stream.html#issupportmultiplevideos)  
returns ‘false’ for us and does not work. When we took zoom demo react app from github there both rendering to canvas works and issupportmultiplevideos returns true.  
It seems like these are related, could you clarify?

Thanks in advance.

---

<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:** [August 27, 2021, 10:11pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/6 "2021-08-27T22:11:45Z")

</div>

Hey @vitalyateventcadence ,

Which browser are you using? 🙂 Chrome only supports multiple video streams, aka Gallery Type View.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![vitalyateventcadence](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vitalyateventcadence/32/51920_2.png) [@vitalyateventcadence](https://devforum.zoom.us/u/vitalyateventcadence)\
**Post date:** [August 30, 2021, 6:37am UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/7 "2021-08-30T06:37:58Z")

</div>

Chrome in all cases. Most recent, Chrome92

---

<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:** [August 31, 2021, 8:50pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/8 "2021-08-31T20:50:25Z")

</div>

Hey @vitalyateventcadence ,

I was able to reproduce this.

@vic.yang , do you know why `stream.isSupportMultipleVideos()` is `true` in the [React sample app](https://github.com/zoom/sample-app-videosdk), but `false` in [purejs-demo](https://github.com/zoom/sample-app-videosdk/tree/master/purejs-demo) or other implementations (on Chrome)?

Thanks,  
Tommy

---

<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:** [September 1, 2021, 1:22am UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/9 "2021-09-01T01:22:56Z")

</div>

Hey @tommy @vitalyateventcadence

In react sample app, wepack devserver returns the correct CORP headers, but in purejs demo, it doesn’t. Rendering multiple videos requires [SharedArrayBuffer](https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation).

Thanks  
Vic

---

<div class="post-metadata">

**Author:** ![vitalyateventcadence](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/vitalyateventcadence/32/51920_2.png) [@vitalyateventcadence](https://devforum.zoom.us/u/vitalyateventcadence)\
**Post date:** [September 1, 2021, 5:56am UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/10 "2021-09-01T05:56:28Z")

</div>

Figured it on our side too. Thank you for confirming.

---

<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:** [September 1, 2021, 3:10pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/11 "2021-09-01T15:10:56Z")

</div>

Thanks @vic.yang ! 🙂

-Tommy

---

<div class="post-metadata">

**Author:** ![Gaurav24](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/gaurav24/32/17714_2.png) [@Gaurav24](https://devforum.zoom.us/u/Gaurav24)\
**Post date:** [September 2, 2021, 11:15am UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/12 "2021-09-02T11:15:27Z")

</div>

@tommy I am using your Zoom meeting integration in react. But i am facing some issue pls help me out in this it’s humble request to you.

1. What is that var registrantToken

2. When i am clicking on join button it’s showing me some error pls check it

Pls guide me how to solve this issue .

---

<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:** [September 2, 2021, 5:26pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/13 "2021-09-02T17:26:41Z")

</div>

Hey @Gaurav24 ,

This topic is already solved.

Please create a new topic and fill out the post template so we have enough info to help. 🙂

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:** [September 2, 2021, 5:26pm UTC](https://devforum.zoom.us/t/are-there-any-known-issues-with-using-multiple-canvas-elements-for-peer-video-streams/55948/14 "2021-09-02T17:26:45Z")

</div>

Closed on September 2, 2021, 5:26pm UTC


