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要求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中的错误。每个具有该版本的设备都存在该问题，当我将它们更新为较新版本时，它就消失了。

Navigator.mediaDevices.getUserMedia在iOS 12 Safari上不起作用

3 个答案:

1。 getUserMedia要求https

2。 getUserMedia需要跨域iframe中的功能策略。