iPhone X 上带有 chrome 的 navigator.mediaDevices.getUserMedia 出现问题

Question

我正在尝试让我的浏览器访问我的设备摄像头，以便我可以将媒体流输入到视频中，但是当我在 google chrome 上测试时 getUserMedia 不受支持，但是当我使用 safari 时我没有问题。

谷歌浏览器不再支持 getUserMedia 了吗？

我已经阅读了this article，但没有运气。

这是我目前正在使用的实现：

navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;

    let constraints = {
      audio: false,
      video: { facingMode: "user" }
    }

    if (navigator.getUserMedia) {
      navigator.getUserMedia(constraints,
         function(stream) {
            var video = document.querySelector('video');
            video.srcObject = stream;
            video.onloadedmetadata = function(e) {
              video.play();
            };
         },
         function(err) {
            alert("The following error occured: " + err.name);
         }
      );
   } else {
      console.log("getUserMedia not supported");
   }

Answer 1

在 iOS 11.2x 上遇到同样的问题。我的研究表明，FF 和 Chrome 在 OS 上受支持，但在 iOS 上不受支持，即使它们能够支持媒体设备。您可以测试简单的 mediaDevice 可用性：

            if (navigator.mediaDevices) {
            alert ("Media device supported");
        }
        else {
            alert ("Media device not supported");
        }

你也可以在这里查看：HTML5Test

iOS 上的 FF 和 Chrome 将显示“不支持媒体设备”，而 Safari 则表示支持。原因看起来苹果仍然没有免费使用 mediaDevices 访问其他浏览器。您可以想象其中的一些原因。 ;/ 所以这次不要责怪 Chrome 或 Firefox。

想知道它现在是否适用于 iOS 12。

Answer 2

这适用于桌面和手机上的 FF 和 Chrome。注意：桌面和手机上的宽度和高度是相反的。注意：FF 和 Chrome 允许它在 localhost 和 https 上运行。 Chrome 不允许它在 http 站点上运行。

function fnStreamVideo(){
    navigator.mediaDevices.getUserMedia({ video:true })
    .then(function(stream) {
        let video = document.getElementById('video');
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
            video.play();
            video.width=480;
            video.height=320;
        };
    })
    .catch(function(e){});
}