javascript – 如何解决iOS 11 Safari getUserMedia“无效约束”问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 如何解决iOS 11 Safari getUserMedia“无效约束”问题,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1869字,纯文字阅读大概需要3分钟。
内容图文
![javascript – 如何解决iOS 11 Safari getUserMedia“无效约束”问题](/upload/InfoBanner/zyjiaocheng/701/642ce5a22c444c9fbb67cb77d1662b16.jpg)
我试图在iOS 11的Safari中运行以下代码.它应该提示用户访问他们的设备相机,然后在我的< video autoplay id =“video”>< / video>中显示它.元件.但是,在iOS 11中运行时,会导致抛出OverconstrainedError:
{message: "Invalid constraint", constraint: ""}
>代码在Android中正常运行并成功打开相机.
>我尝试了多个有效的配置而没有运气.
我知道iOS 11刚出来所以它可能是一个bug,但是有什么想法吗?有没有其他人遇到这个?
码:
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
}
我尝试过省略视频属性的配置,但没有运气.
解决方法:
safari中的无效约束错误是因为浏览器期望您传递正确的宽度,其中之一是:
> 320
> 640
> 1280
高度自动计算宽高比为4:3(320或640),16:9(1280),如果传递宽度为320,则视频流设置为:
> 320×240
如果您将宽度设置为640,则视频流设置为:
> 640×480
如果您将宽度设置为1280,则视频流设置为:
> 1280×720
在任何其他情况下,您的宽度值都会出现“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期望完全匹配.
内容总结
以上是互联网集市为您收集整理的javascript – 如何解决iOS 11 Safari getUserMedia“无效约束”问题全部内容,希望文章能够帮你解决javascript – 如何解决iOS 11 Safari getUserMedia“无效约束”问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。