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

【问题标题】："hello world" on webcam capturing in HTML5 fails to workHTML5 中网络摄像头捕获的“hello world”无法正常工作
【发布时间】：2012-10-12 08:11:23
【问题描述】：

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

<!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 是否是旧的？有人可以指出一些工作示例吗？

谢谢

【问题讨论】：

可能不相关，但请检查您是否没有运行网络摄像头软件。相机自带的软件。我曾经遇到过问题......
不错，但没有运行网络摄像头软件。 :)

标签： javascript html html5-video webcam

【解决方案1】：

根据http://www.webrtc.org/running-the-demos，getUserMedia API 在 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://dev.opera.com/articles/view/playing-with-html5-video-and-getusermedia-support/

【讨论】：

谢谢。我尝试了您的示例，但出现 User denied access to use camera. 错误。此外，显然navigator 对象没有名为.getUserMedia() 的函数，因此我使用的是.webkitGetUserMedia()，这可能是错误吗？
尝试将这两行添加到：navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; window.URL = window.URL || window.webkitURL;
我在脚本顶部添加了这些行，但我遇到了和以前一样的问题。
您是否引用了video 元素？您需要获取video标签的实例，然后将内容替换为从摄像头获取的媒体流。我将发布更新的代码...告诉我它是否有效。
谢谢。我在我的 HTML 中输入了这样的内容：<video id="sourcevid" autoplay>Put your fallback message here.</video> 并添加了您在 javascript 代码开头添加的代码行，但我仍然收到相同的错误消息。你想让我用完整的 HTML+JS 更新我帖子中的代码吗？也许有一些愚蠢的错误，我一见钟情……