Video+Screen Demo is Flawed

[JoshuaPerk]

The Video+Screen Demo/Example found here (source code) gets distored when a window beyond the full screen is shared.

The reason being is below. We're telling the screen track to take on the height / width of the users screen (even when the full screen isn't shared. Consequently, the video gets distorted if so.

screen.width = window.screen.width;
screen.height = window.screen.height;
screen.fullcanvas = true;
camera.width = 320;
camera.height = 240;
camera.top = screen.height - camera.height;
camera.left = screen.width - camera.width;

Is there a way to dynamically know the height/width of the element that was shared or otherwise solve for the distortion issue while still rendering the camera on the canvas?

[antoBit]

I don't know if someone still needs this, but what I did was check if the displaySurface is browser or monitor:

    const { displaySurface } = stream.getVideoTracks()[0].getSettings()

    if (displaySurface === "browser") {
      screen.width = window.innerWidth
      screen.height = window.innerHeight
    }

Hope this helps :)