如何在 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）一样工作，其目标是找到相机提供的最佳匹配本机分辨率。

所以在 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}})
}

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

How to change dimensions with getUserMedia on iOS?

javascript

ios

webrtc

getusermedia