0

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

<!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 MediaStreamand Enable PeerConnection，但在我的版本中，我只有第二个，我启用了它。

有什么想法吗？我正在使用的 API 是否是旧的？有人可以指出一些工作示例吗？

谢谢

4

1 回答 1

1

根据http://www.webrtc.org/running-the-demos，该getUserMediaAPI 在 Chrome 21 的稳定版本上可用，无需使用任何标志。

我认为发生错误是因为您试图实例化流而没有正确定义 url 流。考虑到您需要在 Chrome 和 Opera 中以不同方式访问 url 流。

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

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);

编辑：

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

video = document.getElementById('sourcevid');

我推荐阅读这两篇文章：

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

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

于 2012-10-12T08:43:05.067 回答