renderVideo for single user taking all spaces inside the canvas

[Adrii (Adrien)]

Description
I created a canvas where I can displayed 9 users (3 lines of 3 users).
I don’t know if I did something wrong but even if I set coordinates correctly and if I have only one user : it takes all the canva’s space…

I saw a lot of example apps, I didn’t find any strange things in my code.

Browser Console Error
No error in console

Which Web Video SDK version?
1.7.0

Video SDK Code Snippets
I’m using SolidJS.
I need to display 9 users (3 lines of 3 users) in the same grid.
I created a canvas slot system with hard corded coordinates that I attribute to each joined user.

My canvas :

  <canvas
          ref={participantElement}
          id="participant-videos-canvas"
          height="1080"
          width="1920"
        ></canvas>

CSS :

canvas {
  width: 100%;
  height: auto;
}

If i did just one time this :

await stream.renderVideo(
          participantElement,
          userId,
          640,
          360,
          0,
          0, 
          VideoQuality.Video_360P
        );

The rendered video takes up all the space when I want it to just take up 640x360. If try with another coordinates, the problem persists.

Did I misunderstand something ?

Screenshots

Device (please complete the following information):

• Device: Macbook Pro 16" M2 Pro
• OS: MacOS 13.3.1
• Browser: Chrome
• Browser Version : 112.0.5615.137 (official build) (arm64)

[donte.zoom (Donte)]

Hi, @Adrii ,

Welcome and thank you for posting in the Zoom Developer Forum. When you say the rendered video takes up all the space, are you trying to have the videos side-by-side, is that accurate?

[Adrii (Adrien)]

Hi Donte,

Pictures speak louder than words

The goal is to have this :

If I have only one connected participant (except myself), I want this :

But, I have this…

As I said in my question, even if I set coordinates / width / height correctly (with renderVideo), “user 1” take the entire canvas. Is it normal ?

[vic.yang (Vic)]

Hey @Adrii

Thanks for your feedback.

Did you enable SharedArrayBuffer on your site?
https://developers.zoom.us/docs/video-sdk/web/browser-support/#notes
https://developers.zoom.us/docs/video-sdk/web/gallery-view/

If not, only up to a maximum of 4 video streams can be rendered on the same canvas, but it required the explicit option enforceMultipleVideos when calling the client.init method. Otherwise, the stream will cover the entire canvas.

Thanks
Vic

[Adrii (Adrien)]

Hello Vic,

Thank you for you answer !

I was sure it was enabled… but not. Thank you very much, sorry for this silly question…

Have a nice day !

[donte.zoom (Donte)]

@Adrii,

Happy to hear you got it sorted out! I am linking our support documentation on SharedArrayBuffer for reference.

Implementing Cross-Origin Isolation

Should you have any additional questions, please let us know.

[donte.zoom (Donte)]

Welcome to the Zoom Developer Forum. Can you elaborate on what you mean by setting the canvas accurately on mobile? Please share a screenshot of what you are seeing and an example of what you would like to achieve for our reference. This will help diagnose what may be happening.