Question

经过几个小时的挣扎，我在这里。我有以下代码，显然应该启动我的网络摄像头并在网页上提示流：

<!doctype html>
<html>
  <head>
    <title>HTML5 Webcam Test</title>
  </head>
  <body>
    <video id="sourcevid" autoplay>Put your fallback message here.</video>
    <div id="errorMessage"></div>
    <script>
    video = document.getElementById('sourcevid');
    navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; 
    window.URL = window.URL || window.webkitURL;
    function gotStream(stream) {
       if (window.URL) {
          video.src = window.URL.createObjectURL(stream);
       } else {
          video.src = stream; // Opera.
       }

       video.onerror = function(e) {
          stream.stop();
       };

       stream.onended = noStream;
    }

    function noStream(e) {
       var msg = 'No camera available.';
       if (e.code == 1) {
          msg = 'User denied access to use camera.';
       }
       document.getElementById('errorMessage').textContent = msg;
    }


    navigator.webkitGetUserMedia({video: true}, gotStream, noStream);
    </script> 
 </body>
</html>

控制台中没有错误，但也没有网络摄像头流。只是“用户拒绝使用相机”。

我尝试了另一个例子，显示的时间太长了，但很明显，一旦我尝试运行页面，流就会进入.onended函数：

function gotStream(stream) {
    video.src = URL.createObjectURL(stream);
    video.onerror = function () {
      stream.stop();
    };
    stream.onended = noStream;
    [...]

noStream是一个打印内容的简单函数：

function noStream() {
   document.getElementById('errorMessage').textContent = 'No camera available.';
}

所以基本上当我运行第二个例子时，我在网页上显示“没有可用的摄像头”。

我正在使用Chrome版本22.0.1229.94，我看到某个地方需要启用一些标记，但我无法在chrome://flags中找到它们。标志的名称是Enable MediaStream和Enable PeerConnection，但在我的版本中我只有第二个，我启用了。

有什么想法？ API我用的是旧的吗？有人能指点我一些有用的例子吗？

由于

Answer 1

根据http://www.webrtc.org/running-the-demos，{1}} API在Chrome 21的稳定版本中可用，无需使用任何标记。

我认为错误发生是因为您尝试实例化流而没有正确定义url流。请注意，您需要在Chrome和Opera中以不同方式访问网址流。

我会创建代码的结构，如下所示：

getUserMedia

修改

您需要将源视频元素替换为媒体流。编辑了上面的代码。

function gotStream(stream) { if (window.URL) { video.src = window.URL.createObjectURL(stream) || stream; video.play(); } else { video.src = stream || stream; // Opera. video.play(); } video.onerror = function(e) { stream.stop(); }; stream.onended = noStream; } function noStream(e) { var msg = 'No camera available.'; if (e.code == 1) { msg = 'User denied access to use camera.'; } document.getElementById('errorMessage').textContent = msg; } var options = {video: true, toString: function(){return 'video';}}; navigator.getUserMedia(options, gotStream, noStream);

我建议阅读这两篇文章：

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

http://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/

在HTML5中捕获网络摄像头的“hello world”无法正常工作

1 个答案: