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

Question

我正在尝试获取网络摄像头视频并在浏览器中显示，以下是我使用的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 is not a function. (In 'navigator.getUserMedia', 'navigator.getUserMedia' is undefined)

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

vendorUrlcreateObjectURL is not defined

请告诉我哪里做错了！

Answer 1

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

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

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

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

// ...

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

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

JavaScript : error fetching webcam video using navigator.getUserMedia

javascript

video-streaming

html5-video