Video rendered in incorrect position

Video SDK Web
1

Description
When using renderVideo, the height, width, x and y coordinates are completely ignored. The video just fills the entire canvas. I’ve made sure the canvas height and widths are set and also tried setting using updateVideoCanvasDimensions using the resize callback code, which I can confirm is definitely working.

The video does get rendered on the canvas, and is of correct proportions, with black bars at the top and bottom. I just can’t position it at all on the canvas or give it a size, it always goes 100% height and width of the canvas.

UPDATE: This is working in the latest version of Safari and Firefox
UPDATE 2: This works on Safari and Firefox when using renderVideo to render your own video, but other people’s video goes full screen still.

This is also inside a React v17 application:

mediaStream.renderVideo(
        videoRef.current,
        state.activeSpeaker.id,
        240,
        135,
        200,
        200,
        VideoQuality.Video_720P
      );

My canvas size is 1682x1357, so plenty of space for the small video.

Which Web Video SDK version?
@zoom1234/videosdk v1.1.3 and v1.1.4

Device
macOS Big Sur
Chrome v92

Thanks in advance!

2

Hey @nickuk

Thanks for your feedback.

Does the issue reproduce on Chrome? Or only on Firefox and Safari? Have you applied the ShareArrayBuffer OT on your site? The VideoSDK provides an API called stream.isSupportMultipleVideos to check whether the platform supports rendering multiple videos. If not, the stream.renderVideo method will ignore the width,height,x,y parameters.

Thanks
Vic

3

Thanks @vic.yang,

I’ve figured it out to be related to the Cross-Origin isolation :slight_smile:

So, I know where I’m going now, but note that it looks as though multiple streams are only supported in Chromium based browsers. Is that correct to your knowledge?

I noticed that Google Meet uses video elements for each stream instead of drawing to canvas. Is there no way to do this with the Zoom Video SDK? I noticed share screen supports video and canvas but haven’t see anything about that for the video side.

What would be perfect is if you could add reference to https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation within the main Video SDKs documentation.

Also, maybe make reference to it on the Manage Video documentation of the Video Web SDK https://marketplace.zoom.us/docs/sdk/video/web/essential/video as the example shown is writing to multiple canvas’.

Finally, if multiple streams is only supported in Chrome, it’d also be great if you could add that as a Browser Support item on the main page Web video SDK page.

Thanks again,

Nick

4

Hey @nickuk ,

Correct.

Not at this time.

Good idea, we will add that here: https://marketplace.zoom.us/docs/sdk/video/web :slight_smile: (DEVELOPERS-1824)

Thanks,
Tommy

1 Like
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.