[Webkit-unassigned] [Bug 250200] The stream obtained through navigator.mediaDevices.getDisplayMedia has black edges on both sides of the video. And cannot set width and height

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=250200

--- Comment #5 from Eric Carlson <eric.carlson at apple.com> ---
Your video frames have black bars because the aspect ratio of the monitor is different than the aspect ratio of the capture size. This happens because your getDisplayMedia constraints doesn't specify a video stream width or height, so WebKit's default of 640x480 is used.

If you don't want black bars you can pass just a width or just a height in your getDisplayMedia constraints, and WebKit will pick the other using the screen's intrinsic aspect ratio.

For example, this will result in a video track that is 640px wide without bars:

  const constraints = {
    video: { width: 640 },
  };
  stream = await navigator.mediaDevices.getDisplayMedia({ video: { width: 640 } });
  video.srcObject = stream;

Simple example here: https://jsfiddle.net/eric_carlson/nvrbptg0/


Alternatively, you could start capture without specifying width or height and use the MediaStreamTrack's intrinsic size (get with track.getCapabilities()) to calculate and set a new size.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20230113/4f547117/attachment.htm>