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

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?

Hey @seth ,

Using a single canvas will have better performance.



1 Like

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;

Hey @vitalyateventcadence ,

Make sure you are providing the following 3 sizing requirements:

renderVideo sizing:

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

Canvas Aspect Ratio:

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

Canvas Sizing:

canvas {
  width: 800px;

Let me know if that helps! :slight_smile:


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

1 Like

Hey @vitalyateventcadence ,

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


Chrome in all cases. Most recent, Chrome92

Hey @vitalyateventcadence ,

I was able to reproduce this.

@vic.yang , do you know why stream.isSupportMultipleVideos() is true in the React sample app, but false in purejs-demo or other implementations (on Chrome)?


1 Like

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.


1 Like

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

1 Like

Thanks @vic.yang ! :slight_smile:


@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 .

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. :slight_smile: