black borders appears for screen sharing

[shuming]

Steps to reproduce the problem:

const stream = await navigator.mediaDevices.getDisplayMedia({
   video: {
     width: "700",
     height: "400"
    },,
   audio: false,
});
const screenTrack = stream.getVideoTracks()[0];
// $("localVideo") === video tag
$("localVideo").srcObject = new MediaStream([screenTrack]);
$("localVideo").play();


Safari version: >= 16.3.1
OS Version: 14.3.1 (23D60)

demo: https://jsfiddle.net/ltsg0317/tuvb6Lyq/1/
pic: https://res.cloudinary.com/dhx2zug13/image/upload/v1709806033/webkit/screenshare_zdb2ou.png

[Ahmad Saleem]

I am able to reproduce this bug using Safari 17.4 on macOS Sonoma 17.4 and it shows Black Border around Screen while Chrome Canary 124 works without any issue and don't have any black border (more of mismatch in aspect ration like playing 16:10 or 4:3 on 16:9 screen).

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #1)
> I am able to reproduce this bug using Safari 17.4 on macOS Sonoma 17.4 and
> it shows Black Border around Screen while Chrome Canary 124 works without
> any issue and don't have any black border (more of mismatch in aspect ration
> like playing 16:10 or 4:3 on 16:9 screen).

Also reproducible on Safari Technology Preview 190.

[Radar WebKit Bug Importer]

<rdar://problem/124607137>

[youenn fablet]

Also might need https://bugs.webkit.org/show_bug.cgi?id=270568.

*** This bug has been marked as a duplicate of bug 269961 ***