RESOLVED WORKSFORME250200
The stream obtained through navigator.mediaDevices.getDisplayMedia has black edges on both sides of the video. And cannot set width and height 
https://bugs.webkit.org/show_bug.cgi?id=250200
Summary The stream obtained through navigator.mediaDevices.getDisplayMedia has black ...
mawencan
Reported 2023-01-06 02:31:00 PST
mac m1 air ``` const shareOptions: DisplayMediaStreamOptions = { video: true, audio: { echoCancellation: true, noiseSuppression: true, sampleRate: 44100, }, }; stream = await navigator.mediaDevices.getDisplayMedia(shareOptions); video.srcObject = stream; video.play(); ``` There are black edges on both sides of the video. I hope the video content is covered without black edges -------------------- Or by https://meet.google.com To reproduce
Attachments
https://meet.google.com (679.57 KB, image/png)
2023-01-06 02:31 PST, mawencan 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
mawencan
Comment 1 2023-01-06 02:31:38 PST
Created attachment 464371 [details] https://meet.google.com
mawencan
Comment 2 2023-01-06 02:35:43 PST
There will be a bug when sharing the screen, but the shared window is normal
Alexey Proskuryakov
Comment 3 2023-01-07 11:20:04 PST
*** Bug 250199 has been marked as a duplicate of this bug. ***
Radar WebKit Bug Importer
Comment 4 2023-01-13 02:31:18 PST
<rdar://problem/104217613>
Eric Carlson
Comment 5 2023-01-13 11:46:16 PST
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.
Note You need to log in before you can comment on or make changes to this bug.