javascript 如何解决 iOS 11 Safari getUserMedia“无效约束”问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46981889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resolve iOS 11 Safari getUserMedia "Invalid constraint" issue
提问by mb-ca
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 OverconstrainedErrorto be thrown:
我正在尝试在 iOS 11 的 Safari 中运行以下代码。它应该提示用户授予对其设备相机的访问权限，然后将其显示在我的<video autoplay id="video"></video>元素中。但是，在 iOS 11 中运行时，会导致OverconstrainedError抛出an ：
{message: "Invalid constraint", constraint: ""}
- The code runs fine in Android and successfully opens the camera.
- I've attempted multiple valid configurations with no luck.
- 该代码在Android中运行良好并成功打开相机。
- 我尝试了多个有效的配置，但没有运气。
I know iOS 11 just came out so it may be a bug, but any thoughts? Has anyone else run into this?
我知道 iOS 11 刚刚发布，所以它可能是一个错误，但有什么想法吗？有没有其他人遇到过这个问题？
Code:
代码：
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);
});
}
Edit 1
编辑 1
I've run navigator.mediaDevices.getSupportedConstraints()and it returns the following:
我已经运行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
}
I've tried configurations omitting the videoproperty, but had no luck.
我试过省略video属性的配置，但没有运气。
采纳答案by mb-ca
It appears to have been a bug that was corrected, because I just tried it again and the error message no longer appears.
它似乎是一个已更正的错误，因为我刚刚再次尝试并且不再出现错误消息。
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 thencallback.
请注意，虽然错误消息消失了，但我确实必须再做一项更改才能使其工作，即添加video.srcObject = stream;到then回调中。
回答by kintaro
The invalid constraint error in safari is because the browser expects that you pass a correct width, one of:
safari 中的无效约束错误是因为浏览器希望您传递正确的宽度，其中之一：
- 320
- 640
- 1280
- 320
- 640
- 1280
the height is auto calculate in an aspect ratio of 4:3 for 320 or 640, and 16:9 for 1280, then if you pass a width of 320, you video stream is set in:
对于 320 或 640，高度以 4:3 的纵横比自动计算，对于 1280 以 16:9 的纵横比自动计算，那么如果您传递的宽度为 320，您的视频流设置为：
- 320x240
- 320x240
if you set a width of 640, you video stream is set in:
如果设置宽度为 640，则视频流设置为：
- 640x480
- 640x480
And if you set a width of 1280, then you video stream is set in:
如果您将宽度设置为 1280，那么您的视频流设置为：
- 1280x720
- 1280x720
In any other case you got a error "InvalidConstrain" for width value.
在任何其他情况下，您都会收到宽度值错误“InvalidConstrain”。
Also you can use a min, max, exact or ideal constrains for width, please check the MDN documentation
您也可以使用最小、最大、精确或理想的宽度约束，请查看MDN 文档
Here an example in this 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: In chrome you can set a width of height and the video stream is set in these sizes, Firefox do a fitness distance, and Safari expect a exact match.
PD：在 chrome 中，您可以设置高度的宽度，并将视频流设置为这些尺寸，Firefox 执行健身距离，而 Safari 期望完全匹配。
回答by Tom Roggero
Remember that the iOS Simulator that comes with Xcode does not support webcam or microphone, which is why you may get the OverconstrainedError (as per https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMediadocs, that means no device fits the passed options, even if you're not putting specifics)
请记住，Xcode 附带的 iOS 模拟器不支持网络摄像头或麦克风，这就是为什么您可能会收到 OverconstrainedError（根据https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMediadocs，这意味着没有设备适合传递的选项，即使您没有提供细节）
