Navigator.mediaDevices.getUserMedia在iOS 12 Safari上不起作用 [英] Navigator.mediaDevices.getUserMedia not working on iOS 12 Safari

问题描述

从iOS 12开始，navigator.mediaDevices.getUserMedia()在Safari中返回错误.

As of iOS 12, navigator.mediaDevices.getUserMedia() is returning an error in Safari.

要重新创建它，请打开 iPhone Web检查器，然后在控制台中运行以下代码段:

To recreate this, open iPhone Web Inspector, then run this snippet in the console:

var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
  .then(function() {
    console.log('getUserMedia completed successfully.');
  })
  .catch(function(error) {
    console.log(error.name + ": " + error.message);
  });

您会看到它在桌面浏览器和iOS 11 Safari中成功运行，但在iOS 12 Safari中失败.

You'll see that this runs successfully in desktop browsers, and in iOS 11 Safari, but fails in iOS 12 Safari.

NotAllowedError:在当前上下文中，用户代理或平台不允许该请求，可能是因为用户拒绝了权限.

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

知道为什么吗?

注意:这是在询问用户是否可以访问其摄像头之前发生的，排除了由于用户拒绝许可而造成的可能性.

推荐答案

在调用getUserMedia之前设置以下三个属性可以为我解决问题:

Setting these three attributes before calling getUserMedia solved the problem for me:

    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    video.setAttribute('playsinline', '');

由于某些原因video.setAttribute()可以工作，但是尝试直接将值分配给视频对象，例如video.muted = ''则不行.

For some reason video.setAttribute() works but trying to assign the value directly to the video object for example video.muted = '' does not.

另外，似乎没有必要调用video.play().

Also it appears that it's not necessary to call video.play().

只需将video.srcObject设置为getUserMedia返回的流就对我有用.

Simply setting the video.srcObject to the stream returned by getUserMedia worked for me.

此中级帖子包含指向工作中的链接演示和源代码.

This medium post has a link to a working demo & source code.

这篇关于Navigator.mediaDevices.getUserMedia在iOS 12 Safari上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！