javascript - 如何解决 iOS 11 Safari getUserMedia "Invalid constraint"问题

Question

我正在尝试在 iOS 11 的 Safari 中运行以下代码。它应该提示用户授予访问其设备摄像头的权限，然后将其显示在我的 <video autoplay id="video"></video> 中。元素。但是，在 iOS 11 中运行时，它会导致 OverconstrainedError。被抛出:

{message: "Invalid constraint", constraint: ""}

• 代码在 Android 中运行良好，并成功打开相机。
• 我尝试了多种有效的配置，但都没有成功。

我知道 iOS 11 刚出来所以它可能是一个错误，但有什么想法吗？还有其他人遇到过这个吗？

代码:

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia({video: true})
         .then(function(stream) {
             video.src = window.URL.createObjectURL(stream);
             video.play();
         })
         .catch(function(err) {
             console.log(err);
         });
}

---

编辑 1

我已经跑了 navigator.mediaDevices.getSupportedConstraints()并返回以下内容:

{
    aspectRatio: true,
    deviceid: true,
    echoCancellation: false,
    facingMode: true,
    frameRate: true,
    groupId: true,
    height: true,
    sampleRate: false,
    sampleSize: false,
    volume: true,
    width: true
}

我试过省略 video 的配置属性(property)，但没有运气。

Answer 1

safari 中的无效约束错误是因为浏览器希望您传递正确的宽度，其中之一:

• 320
• 640
• 1280

高度是自动计算的，320 或 640 的纵横比为 4:3，1280 的纵横比为 16:9，然后如果你传递 320 的宽度，你的视频流设置为:

• 320x240

如果您将宽度设置为 640，则您的视频流设置为:

• 640x480

如果您将宽度设置为 1280，那么您的视频流设置为:

• 1280x720

在任何其他情况下，您都会收到宽度值错误“InvalidConstrain”。

您还可以使用最小、最大、精确或理想的宽度约束，请查看 MDN documentation

这里有一个例子 codepen

var config = { video: { width: 320/*320-640-1280*/ } };
var start = () => navigator.mediaDevices.getUserMedia(config)
  .then(stream => v.srcObject = stream)
  .then(() => new Promise(resolve => v.onloadedmetadata = resolve))
  .then(() => log("Success: " + v.videoWidth + "x" + v.videoHeight))
  .catch(log);

var log = msg => div.innerHTML += "<p>" + msg + "</p>";

PD:在 chrome 中，您可以设置宽度和高度，视频流设置为这些尺寸，Firefox 执行 fitness distance , 和 Safari 期望完全匹配。