getUserMedia误差webRTC

Question

我从webRTC开始，尝试访问我的相机，但是代码不起作用，尽管里面没有错误。

守则是：

navigator.getUserMedia = ( navigator.getUserMedia ||           
                               navigator.webkitGetUserMedia || navigator.mozGetUserMedia 
                            || navigator.msGetUserMedia);
if (navigator.getUserMedia){
    var constrains ={video:true};
    function successCallback(localMediaStream){
        var video = document.querySelector("video");
        window.stream = localMediaStream;
        video.src = window.URL.createObjectURL(localMediaStream);
        video.onloadedmetadata =function(e){
            video.play();
        }
    }
    function errorCallback(error){
        console.log("Error: ",error);
    }
    navigator.getUserMedia(constrains,successCallback,errorCallback);
}else{
    alert('Sorry, the browser you are using doesn\'t support getUserMedia');
}

你能帮帮我吗？

Answer 1

我猜想上面的代码是放在html文件中并通过点击文件直接访问的( url类似于file:///...)，这种方式在火狐中可以工作，但是不能在chrome中工作，为了让摄像头捕获在chrome上工作，您需要在某个服务器上托管文件。

另外，在不相关的情况下，您可以替换

    video.onloadedmetadata =function(e){
        video.play();
    }

用简单的

    video.play();

Answer 2

是否有一个有效的HTML5视频元素来设置流并不明显。如果您这样做了，您可以使用开发人员工具来验证已经在源上设置了流。

如果您的开发机器上有一个web服务器，您可以这样托管您的代码，并“本地”查看它。