JavaScript：使用 navigator.getUserMedia 获取网络摄像头视频时出错答案

【问题标题】：JavaScript : error fetching webcam video using navigator.getUserMediaJavaScript：使用 navigator.getUserMedia 获取网络摄像头视频时出错
【发布时间】：2016-07-11 07:04:03
【问题描述】：

我正在尝试获取网络摄像头视频并在浏览器中显示，以下是我使用的 html：

<!DOCTYPE html>
<html>
    <head>
        <title>DOCUMENT</title>

        <link href="style.css" rel="stylesheet" media="all" />
    </head>
    <body>

    <div class="booth">
        <video id="video" width="400" height="300" autoplay></video>
    </div>

    <script src="video.js"></script>
    </body>
</html>

和 CSS：

.booth{
    width: 400px;
    background: #CCC;
    border: 10px solid #ddd;
    margin: 0 auto;
}

这是我在这里使用的 javascript：

    (function(){
    var video = document.getElementById('video'),vendorUrl = window.URL || window.webkitURL;

    navigator.getUserMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);
    //capture video

    navigator.getUserMedia({
        video:true,
        audio:false
    }, function(stream){
        video.src = vendorUrlcreateObjectURL(stream);
        video.play();
    }, function(error){
        //an error occured
        console.log(error)

    });

})();

在 Safari 控制台中，我遇到一个错误，指出：

navigator.getUserMedia 不是函数。（在'navigator.getUserMedia'中，'navigator.getUserMedia'未定义）

在 chrome 控制台中，我收到此错误：

vendorUrlcreateObjectURL 未定义

请告诉我哪里出错了！

【问题讨论】：

stackoverflow.com/questions/28991835/…的可能重复
我尝试了该解决方案，但对我不起作用，顺便说一句，当我在 chrome 中运行此代码时，我遇到了另一个错误：'vendorUrlcreateObjectURL is not defined'

标签： javascript video-streaming html5-video

【解决方案1】：

您的第一个错误很奇怪，但我怀疑 Safari 会阻止您在 navigator 对象上创建新属性。

简单地创建一个局部变量比修改内置对象更安全：

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

if(!getUserMedia) {
  // Your error handling goes here
}

// ...

至于第二个错误，vendorUrlcreateObjectURL 不存在。试试URL.createObjectURL()！

【讨论】：

好吧 safari 不支持该功能！并感谢您的回答，这有效.. 如果您有任何方式在 safari 中访问网络摄像头，请告诉我！