Navigator.mediaDevices.getUserMedia无法在iOS 12 Safari上运行

Question

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

要重新创建它，请打开iPhone Web Inspector，然后在控制台中运行此代码段：

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中失败。

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

知道为什么吗？

注意：这是在用户被问及是否可以访问他们的相机之前发生的，排除了因为用户拒绝许可而可能发生的情况。

Answer 1

目前直接NotAllowedError有两个可能的原因：

1. getUserMedia requries https

在iOS和OSX中，Safari似乎需要https用于摄像头和麦克风访问。

使用an https link，iOS Safari 12适合我; same link in http获得NotAllowedError。

Chrome具有相同的要求。这与规范的方向一致，recently将getUserMedia限制在安全的环境中。尚未更新的浏览器仍会在http中暴露navigator.mediaDevices，但getUserMedia总是拒绝使用NotAllowedError。

在未来，希望浏览器完全在http中删除mediaDevices，以符合规范。

2. getUserMedia需要跨源iframe中的特征策略。

这在Safari 12中显示为新功能。在iframe中，getUserMedia的功能策略默认为跨源内容关闭。

This works对我来说：

<iframe
  allow="camera;microphone"
  src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
</iframe>

This doesn't work：

<iframe src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
</iframe>

...除了使用NotAllowedError失败之外，Safari还在Web控制台中发出警告：

The top-level frame has prevented a document with a different security origin to
call getUserMedia.

这也是the spec最近的更新。

Answer 2

在调用getUserMedia之前设置这三个属性为我解决了这个问题：

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

由于某种原因video.setAttribute()工作，但试图直接将值分配给视频对象，例如video.muted = ''没有。

此外，它似乎没有必要调用video.play()。

简单地将video.srcObject设置为getUserMedia返回的流为我工作。

这个medium post有一个工作演示和源代码的链接。

Answer 3

结果我的特殊问题是12.01中的一个错误。每个具有该版本的设备都存在问题，只要我将它们更新为更新版本，它就会消失。