ios - 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: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

知道为什么吗？

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

Answer 1

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

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

出于某种原因，video.setAttribute() 可以工作，但尝试将值直接分配给视频对象时，例如 video.muted = '' 不工作。

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

简单地将 video.srcObject 设置为 getUserMedia 返回的流对我有用。

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