如何在iOS上使用getUserMedia更改尺寸？

Question

由于苹果的iOS 11 webRTC和getUserMedia介绍，我能够让相机的输入<video>元素，但不能用传统的方法来设置它的尺寸（height和width）。

这有效：

var constraints = {
    audio: false,
    video: { facingMode: 'user' }
};

navigator.mediaDevices.getUserMedia(constraints).then(
    function success(stream) {
         video.srcObject = stream;
    }
);

这不起作用（仅在iOS上），并且没有显示图像：

var constraints = {
    audio: false,
    video: { facingMode: 'user', width: 306, height: 180 }
};

navigator.mediaDevices.getUserMedia(constraints).then(
    function success(stream) {
         video.srcObject = stream;
    }
);

来自的错误消息catch：

约束无效

---

失败的尝试：设置mandatory，ideal，minHeight等。

---

这是错误吗？有没有其他已知的选择？

Answer 1

This looks like a bug in Safari. Bare values like width: 306 are supposed to mean ideal, but Safari appears to treat them like exact, and fails with an error unless it exactly matches a driver resolution offered by the user's camera.

Except for that, Safari appears to work like other browsers like Firefox and Edge, where the goal is to find best-match native resolutions offered by the camera.

So stick to ranges until Safari fixes this.

navigator.mediaDevices.getUserMedia({video: {width: {min: 320, max: 640}}})

...or use common values with a fallback strategy:

try {
  await navigator.mediaDevices.getUserMedia({video: {width: 320}})
} catch(e) {
  await navigator.mediaDevices.getUserMedia({video: {width: 640}})
}