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

【问题标题】：Navigator.mediaDevices.getUserMedia not working on iOS 12 SafariNavigator.mediaDevices.getUserMedia 在 iOS 12 Safari 上不起作用
【发布时间】：2019-09-14 22:21:47
【问题描述】：

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

要重新创建这个，打开iPhone Web Inspector，然后在控制台中运行这个sn-p：

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：当前上下文中用户代理或平台不允许该请求，可能是因为用户拒绝了权限。

知道为什么吗？

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

【问题讨论】：

Severisth，如果你用'/show'打开小提琴，它可以工作https://jsfiddle.net/jib1/og6up9d4/show
@ИскренСтаниславов 链接在 iOS 12.0、Safari 12 上不起作用（我正在使用 CrossBrowserTesting iPhone XS Max）

标签： ios iphone webrtc getusermedia ios12

【解决方案1】：

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

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

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

此外，似乎没有必要致电video.play()。

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

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

【讨论】：

这为我节省了一天！我不得不离开await video.play() 在桌面上继续工作（Firefox，没有尝试过 Chrome）。
此建议在 2020 年 5 月中旬仍然有效。iOS 13 不需要，只有 11 和 12。谢谢。
这在 2020 年 8 月仍然有效。playsinline 似乎是让它工作的参数。
2021 年 8 月仍然有效，仅在 iOS safari 中需要，桌面 safari 不需要
同样使用 video.play().catch((err) => function(){ alert(err)}) 来捕捉和查看错误。

【解决方案2】：

目前即时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 的最新更新。

【讨论】：

这对我在 iOS 12 Safari 上不起作用，即使使用 https 和 iframe sn-p。事实上，直接点击该链接甚至不起作用：webrtc.github.io/samples/src/content/getusermedia/gum 在这两种情况下，错误都是：NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
https 是我的问题。谢谢！
虽然我知道这背后的安全隐患，但在 localhost 或本地 Intranet IP 地址上进行开发/测试很糟糕。如果有一个开发标志来启用它，那就太好了。

【解决方案3】：

原来我的特殊问题是 12.01 中的一个错误。每个具有该版本的设备都有问题，一旦我将它们更新到新版本，它就消失了。

【讨论】：