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不是一个函数。（在＆navider.getUserMedia＆＃39;，＆＃39; navigator.getUserMedia＆＃39;未定义）

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

未定义vendorUrlcreateObjectURL

请告诉我哪里出错了！

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获取网络摄像头视频时出错

1 个答案: