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

[seth (Seth Callaway)]

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

[tommy (Tommy Gaessler)]

Hey @seth ,

Using a single canvas will have better performance.

Related:

Too many active WebGL contexts. And all videos disappears after that

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. If you are able to reproduce the issue on our sample app…

Thanks,
Tommy

[vitalyateventcadence (Vitaliy)]

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;

[tommy (Tommy Gaessler)]

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!

Thanks,
Tommy

[vitalyateventcadence (Vitaliy)]

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.

[tommy (Tommy Gaessler)]

Hey @vitalyateventcadence ,

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

Thanks,
Tommy

[vitalyateventcadence (Vitaliy)]

Chrome in all cases. Most recent, Chrome92

[tommy (Tommy Gaessler)]

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)?

Thanks,
Tommy

[vic.yang (Vic)]

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.

Thanks
Vic

[vitalyateventcadence (Vitaliy)]

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

[tommy (Tommy Gaessler)]

Thanks @vic.yang !

-Tommy

[Gaurav24 (Gaurav)]

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

[tommy (Tommy Gaessler)]

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