javascript – 如何解决iOS 11 Safari getUserMedia“无效约束”问题

2019-10-05 07:33:40 阅读：326 来源： 互联网

我试图在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,camera,media,ios11
来源： https://codeday.me/bug/20191005/1855633.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何解决iOS 11 Safari getUserMedia“无效约束”问题