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
Created attachment 464371 [details] https://meet.google.com
There will be a bug when sharing the screen, but the shared window is normal
*** Bug 250199 has been marked as a duplicate of this bug. ***
<rdar://problem/104217613>
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.