Question

自从Apple的iOS 11 webRTC和getUserMedia介绍以来，我能够将相机的输入转移到<video>元素，但可以＆＃39;使用传统方法设置其维度（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

这看起来像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更改维度？

1 个答案: