Bug 250200

Summary:

The stream obtained through navigator.mediaDevices.getDisplayMedia has black edges on both sides of the video. And cannot set width and height

Product:

WebKit

Reporter:

mawencan <1044926436>

Component:

WebRTC

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED WORKSFORME

Severity:

Major

CC:

eric.carlson, webkit-bug-importer, youennf

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

Attachments:

Description	Flags
https://meet.google.com	none

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.