Scaling Issues when Share Screen in Firefox / Safari


Format Your New Topic as Follows:

Video SDK Type and Version
Share the Video SDK type and version you’re working with to give relevant context.
Version 1.4 Web SDK

Description
Details on your question, workflow or the problem you’re trying to solve.
Trying to integrate share screen feature using zoom in our Vue based app. User suppose to be able to share their screen and record the zoom session using share screen.

Error?
The full error message or issue you are running into, where applicable.
Basically when you initiate the share screen function in the stream, the video of the screen share will project to the relevent canvas element. however, it is shown on 1:1 scale instead of trying to fit inside the canvas (with a predefined width and height property). This cause problems especially when you are using a retina display like on Macs.

However, the same code works beautifully on chrome where the video is projected on a video element. it scaled within the confines of the video element without issues.

here is the video of the screen share feature in action:-

Troubleshooting Routes
The troubleshooting attempt types you’ve already exhausted, including testing with the appropriate sample app (found on Zoom · GitHub).

using sample code on the documentation produced same results. In the reference, there’s a ScreenShareOption inteface with captureWidth and captureHeight option. doesn’t do anything.

How To Reproduce
Steps to reproduce the behavior including:
1. Authentication method or app type
2. Any errors
3. Browser/client type and version

  1. as per normal
  2. no errors, the video works, i can record and capture the stream but it does not scale into the canvas properly.
  3. this behavior is observed on Safari & Firefox.

Hey @erwinkarim

Thanks for your feedback.

It seems the issue of the sample app. We will update it later.

For the issue that you had when using the Video SDK, We recommend using the following HTML structure:

<div class="share-viewport">
  <canvas class="share-canvas" width="1920" height="1080"></canvas>
</div>
.share-viewport {
  width: [fit to the window];
  height: [fic to the window];
}
.share-canvas {
  width: 100%;
  height: 100%;
}

The share-viewport container serves as the viewport, it can fit to the window or parent container, the share-canvas is the actual place to draw the sharing content, and the width and height attributes are the properties of the canvas, but you can style it with CSS, so it can be fit in the viewport.

Hope this can help you.

Thanks
Vic

Hi Vic,

thanks, this actually works with some css magic

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