为什么 GetUserMedia 无法在 Google Chrome 中显示视频？答案

【问题标题】：Why GetUserMedia can't show video in Google Chrome?为什么 GetUserMedia 无法在 Google Chrome 中显示视频？
【发布时间】：2015-09-21 10:21:24
【问题描述】：

我的代码在这里

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <div >
   <video autoplay="true" id="videoElement" src=""></video>
  </div>

  <script>

    navigator.getUserMedia = navigator.getUserMedia ||
                     navigator.webkitGetUserMedia ||
                     navigator.mozGetUserMedia ||
                     navigator.msGetUserMedia ||
                     navigator.oGetUserMedia;

    if (navigator.getUserMedia) {
            console.log("Browser supports getUserMedia");
            navigator.getUserMedia({ video: 'true' },
                      function(stream) {
                      console.log("on succes call back");
                      var video = document.getElementById("videoElement");
                      video.src = window.URL.createObjectURL(stream);
                      video.onloadedmetadata = function(e) {
                          video.play();
                      };
           },
           function(err) {
             console.log("The following error occured: " + err.name);
           }
     );
  } else {
      console.log("getUserMedia not supported");
  }

  </script>
  </body>

  </html>

我已将上述代码保存到 sample.html 文件中。当我在 Firefox 中打开文件时，我可以看到来自网络摄像头的视频。

这里的问题是当我使用 google chrome 或 opera（Crome 和 opera 的工作方式类似）浏览器打开文件时，我无法看到视频。

我的浏览器版本

Chrome：版本 41.0.2272.89（64 位）

来自 chrome 的控制台日志在这里：

浏览器支持getUserMedia

导航到文件：///home/xyz/sample.html

谁能解释导致chrome或opera出现问题的原因？

提前致谢！

【问题讨论】：

标签： javascript html google-chrome

【解决方案1】：

Chrome 不允许来自 file:/// 网址的 getUserMedia()，而 Firefox 允许。

要解决此问题，请运行本地 Web 服务器并改用 localhost/，然后将文件放在那里。如果您使用的是 Linux 或 OSX，请运行 python -m SimpleHTTPServer 之类的内容。对于 Windows see this answer。

或者使用火狐。 ;)

【讨论】：

感谢@jib，当我从服务器驱动网页时它起作用了。

【解决方案2】：

您需要使用命令标志--enable-usermedia-screen-capturing或通过在浏览器中打开链接chrome://flags/#enable-usermedia-screen-capture来设置它。

更新：请见谅。写错标志（感谢@jib） - 你需要使用--allow-file-access-from-files。

【讨论】：

这些标志仅用于屏幕共享，对常规摄像头/麦克风访问没有影响。
当然！我犯了一个错误，写错了标志。我们需要使用 --allow-file-access-from-files。
啊，不知道那个。很高兴知道。