HTML5 <video> 在 Chrome 中使用 navigator.getUserMedia()答案

【问题标题】：HTML5 <video> using navigator.getUserMedia() in ChromeHTML5 <video> 在 Chrome 中使用 navigator.getUserMedia()
【发布时间】：2015-09-04 22:09:55
【问题描述】：

我一直在使用 HTML5 <video> 元素，它在 Chrome 和 Firefox 中都可以使用，但是，由于某种原因，当我从本地文件加载它时它不起作用 chrome 但是它可以在 Firefox 中运行。

示例：http://codepen.io/asolar/pen/BoyPxZ

谁能告诉我为什么这在 chrome 中不起作用，而在 firefox 中起作用？我可以在 chrome 中更改某种类型的安全设置吗？

<html>
<head>
</head>
<body>

  <div>
    <video id="camera" width="640" height="480" autoplay style="display: inline;"></video>
  </div>

  <script type="text/javascript">

  window.addEventListener('load', function() {Video();}, false);

  // Setup the Audio and Video
  function Video() {

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;

    var constraints = {video: true, audio: true};
    navigator.getUserMedia(constraints, (function(stream)
    {
      PlayVideo(stream);
      //PlayAudio(stream);
    }),
    (function(err) {
      console.log("The following error occured: " + err.name);
    }));
  }

  // play the <video>
  function PlayVideo(stream) {
    video = document.querySelector('video');
    video.src = window.URL.createObjectURL(stream);
    video.onloadedmetadata = function(e) {
      video.play();
    }
  }

  </script>

</body>
</html>

【问题讨论】：

标签： google-chrome webkit html5-video video-processing getusermedia

【解决方案1】：

您可以为此责怪 Goolge： getUserMedia() 将在 Chrome 47 及更高版本中使用 http:// 引发错误（由于 Chrome 中的弃用）。 https://code.google.com/p/chromium/issues/detail?id=520765

【讨论】：