javascript - 为什么 GetUserMedia 无法在 Google Chrome 中显示视频?

标签 javascript html google-chrome

我的代码在这里

<!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 的控制台日志在这里:

Browser supports getUserMedia

Navigated to file:///home/xyz/sample.html

任何人都可以解释导致 chrome 或 opera 问题的原因吗?

提前致谢!

最佳答案

Chrome 不允许来自 file:/// url 的 getUserMedia(),而 Firefox 允许。

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

或者使用 Firefox。 ;)

关于javascript - 为什么 GetUserMedia 无法在 Google Chrome 中显示视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31209113/

相关文章:

javascript - “*[attribute^="string""如何/为什么是有效的查询选择器?(JS 错误?)

ajax - --disable-web-security 在 Chrome 中还能用吗?

javascript - 如何使 <td> 今天的日期 + 14

Javascript 拼接 while push 在事件处理程序中

javascript - 使用 Express、Node 和 Rest 从 AngularJS 发布数据

Javascript 获取表单数组值

html - 如何在汉堡菜单中加入链接?

html - 三个div并排,第三个固定位置

javascript - Firefox 与 Chrome 中的scrollTop() 不同

javascript - 获取 HTML 表中整个选定的列值