如何解决 iOS 11 Safari getUserMedia“无效约束"问题 [英] How to resolve iOS 11 Safari getUserMedia "Invalid constraint" issue

问题描述

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

I'm attempting to run the following code in Safari in iOS 11. It should prompt the user to give access to their devices camera and then display it in my <video autoplay id="video"></video> element. However, when running in iOS 11, it results in an OverconstrainedError to be thrown:

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

• 代码在Android中运行良好，成功打开摄像头.
• 我尝试了多种有效配置，但都没有成功.

我知道 iOS 11 刚刚发布，所以它可能是一个错误，但有什么想法吗?有没有其他人遇到过这种情况?

I know iOS 11 just came out so it may be a bug, but any thoughts? Has anyone else run into this?

代码:

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 属性的配置，但没有成功.

I've tried configurations omitting the video property, but had no luck.

推荐答案

好像是bug已经修正了，因为我刚刚再试了一遍，错误信息就没有了.

It appears to have been a bug that was corrected, because I just tried it again and the error message no longer appears.

请注意，虽然错误消息消失了，但我确实必须再做一项更改才能使其正常工作，即在 thenvideo.srcObject = stream;> 回调.

Note that while the error message went away, I did have to make one more change for it to work, which was adding video.srcObject = stream; in the then callback.

这篇关于如何解决 iOS 11 Safari getUserMedia“无效约束"问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！