2

I have been trying to set screen share video quality using height constraint but on the latest version of MAC Safari, it's not working.

MAC OS Version: 13.1 Safari Version: 16.2

Here is code

let constraints = {
      aspectRatio: 1.777,
      frameRate: 15,
      height: 480
    }

navigator.mediaDevices
.getDisplayMedia({video :constraints})
.then((stream) => {
    // success
})
.catch(e => {
    // error
});

I have tried this constraint but not working

var constraints = {
      mandatory: {
        maxHeight: 480,
        aspectRatio: 1.777,
        frameRate: 15,
      },
      optional: []
    }

4 Answers 4

2

I had the same issue with 16.2.1 and apparently they have improved screen capture in 16.1 to support sharing Window or Screen when calling getDisplayMedia and somehow it breaks height and width constraints, all you need to do is removed height in your constraints then it should works.

let constraints = {
      aspectRatio: 1.777,
      frameRate: 15
    }

https://webkit.org/blog/13399/webkit-features-in-safari-16-1/

2
  • Just an update, it still not working on 16.1 unfortunately but fine on 16.2.x and 15.x
    – Brian Liu
    Jan 6 at 3:25
  • @Brain nope - still a problem on 16.2 (18614.3.7.1.5)
    – t1gor
    Mar 17 at 7:57
2

After checking the webkit update, found the issue has come up due to a change in the WebKit engine. Here is the link

The issue will fix in Safari 16.4 version. Here is the release node link

0

2023/01/10 Update

After hours of investigation for nothing but just people asking for helps and opened WebKit bug tickets without answers. I found Google Meet screen sharing works nicely on all Safari 16.x, so I hijacked the native API navigator.mediaDevices.getDisplayMedia to see what are the constraints Google Meet is using and this works nicely for me on 16.1 16.2, 16.4 (Safari Technology Preview), 15,x and 14.x

navigator.mediaDevices.getDisplayMedia({ height: { max: 1205 }, width: { max: 2880 }, frameRate: 5 });
0

Can confirm: for us

video: { frameRate: '15', width: 1920, height: 1080 }

does not work in 16.3 but works in 16.4 (Safari Tech Preview), while

video: { frameRate: '15', width: { max: 1920 }, height: { max: 1080 } }

works in both 16.3 and 16.4

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.