在 HTML5 中从 Web 浏览器捕获视频答案

【问题标题】：Capturing video from web browser in HTML5在 HTML5 中从 Web 浏览器捕获视频
【发布时间】：2013-02-25 16:06:43
【问题描述】：

我正在尝试按照本指南使用 HTML5 从网络摄像头捕获视频

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

我已复制并粘贴以下代码，但 Chrome 未请求使用我的相机的权限

<video autoplay></video>

<script>
  var onFailSoHard = function(e) {
    console.log('Reeeejected!', e);
  };

  // Not showing vendor prefixes.
  navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
    // See crbug.com/110938.
    video.onloadedmetadata = function(e) {
      // Ready to go. Do some stuff.
    };
  }, onFailSoHard);
</script>

当我点击指南中的“捕获视频”时，它可以工作，我的网络摄像头显示...

另一个网站有类似的代码，但它再次不适合我

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

<!-- HTML code -->
<video id="sourcevid" autoplay>Put your fallback message here.</video>

/* JavaScript code */
window.addEventListener('DOMContentLoaded', function() {
    // Assign the <video> element to a variable
    var video = document.getElementById('sourcevid');

    // Replace the source of the video element with the stream from the camera
    if (navigator.getUserMedia) {
        navigator.getUserMedia('video', successCallback, errorCallback);
        // Below is the latest syntax. Using the old syntax for the time being for backwards compatibility.
        // navigator.getUserMedia({video: true}, successCallback, errorCallback);
        function successCallback(stream) {
            video.src = stream;
        }
        function errorCallback(error) {
            console.error('An error occurred: [CODE ' + error.code + ']');
            return;
        }
    } else {
        console.log('Native web camera streaming (getUserMedia) is not supported in this browser.');
        return;
    }
}, false);

我想知道我是否遗漏了什么或有什么改变，因为到目前为止没有一个示例代码对我有用。

【问题讨论】：

标签： html

【解决方案1】：

发现发生了什么。对于任何想知道的人，在 Chrome 上，如果从服务器运行，您只能访问网络摄像头。它不仅适用于文件。

【讨论】：