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

Question

自 Apple 的 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 的错误信息:

Invalid constraint

---

失败的尝试:设置 mandatory , ideal , minHeight等等

---

这是一个错误吗？是否有任何已知的替代品？

Answer 1

这看起来像是 Safari 中的错误。像 width: 306 这样的裸值是 supposed to mean ideal ，但 Safari 似乎将它们视为 exact，并且失败并显示错误，除非它与用户相机提供的驱动程序分辨率完全匹配。

除此之外，Safari 似乎与其他浏览器(如 Firefox 和 Edge)一样工作，其目标是找到相机提供的最佳匹配 native 分辨率。

所以在 Safari 解决这个问题之前坚持使用范围。

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

...或使用具有回退策略的通用值:

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