Question

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

谷歌浏览器不再支持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

Safari表示支持时，

FF和iOS上的Chrome将显示“不支持媒体设备”。原因似乎是苹果仍未免费提供使用mediaDevices的其他浏览器的访问权。您可以想象有一些原因。 ; /所以这次不要怪Chrome或Firefox。

知道它现在是否可以在iOS 12中运行很有趣。

Answer 2

您使用的是过时的语法。 navigator.getUserMedia已被弃用。您需要使用navigator.mediaDevices.getUserMedia：

navigator.mediaDevices.getUserMedia(constraints).then(
    function success(stream) {
        var video = document.querySelector('video');
        video.srcObject = stream;
        // Rest of your code...
    }
);

当前的iOS 11.2+版本，Chrome桌面，Safari，Edge和Samsung浏览器完全支持

navigator.mediaDevices.getUserMedia。

Answer 3

此功能适用于台式机和手机上的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){});
}

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

3 个答案: