getUserMedia 在 Chrome 中不起作用答案

【问题标题】：getUserMedia not working in ChromegetUserMedia 在 Chrome 中不起作用
【发布时间】：2015-05-02 19:49:06
【问题描述】：

我正在尝试设置视频流媒体网站。我发现，您可以在 getUserMedia 的帮助下从浏览器使用网络摄像头。这是我写的 javascript 代码：

function stream() {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||     navigator.msGetUserMedia || navigator.oGetUserMedia;
    if (navigator.getUserMedia) {
        navigator.getUserMedia({video: true, audio: true}, load, error);
    }
}

function load(source) {
    document.getElementById("video").src = window.URL.createObjectURL(source);
    alert("Connected");
}

function error(e) {
    alert("Error:") + e;
}

这里有我的 HTML 标签：

<video id="video" autoplay></video>

我的问题是，当我打开我的网站并允许浏览器使用网络摄像头和麦克风时，我可以听到自己的声音，但没有加载视频。视频帧调整为 2px x 2px 黑色正方形。我在哪里做错了？

【问题讨论】：

标签： javascript html video webcam

【解决方案1】：

虽然我无法在 Chrome 或 Firefox 上重现您的问题，但我相信您的问题在于尝试使用 autoplay。显示网络摄像头流的推荐方法是为loadedmetadata 添加一个侦听器并显式调用play。我的怀疑是您的浏览器在知道宽度和高度之前尝试播放流，导致状态无效。

MDN sn-p: (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia)

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

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         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");
}

对你来说关键部分是：

video.onloadedmetadata = function(e) {
  video.play();
};

另外，我不相信 msGetUserMedia 或 oGetUserMedia 存在。您应该避免在未验证它们是否存在的情况下添加浏览器前缀（因为它们可能存在于具有不同 API 的某个地方）。

当然，检查您是否真的有一个网络摄像头并且它已连接总是值得的！（例如，您可以从另一个应用程序使用它吗？从另一个网站呢？）

【讨论】：

我根据您的建议更改了代码，但没有帮助。此外，在 Windows 8 的相机应用程序中，我的网络摄像头工作得很好。我查看了有关 getUserMedia 的其他网站，但它们的演示也不起作用。我在我的手机（谷歌 Chrome 浏览器）上尝试了它，它在那里工作。也许我的电脑有问题？
如果您运行的是最新版本的 Chrome (42)，您可以尝试向开发人员报告：code.google.com/p/chromium/issues/list（他们可能会要求您运行一些诊断程序）
好的，但即使在 Firefox 中也无法正常工作。但是在Firefox中出现了一些错误，不知道是哪个错误。
好吧，我刚起床在我兄弟的电脑上试了一下。它在那里工作，那么可能是哪里出了问题？
@LinhyCZ ，你有没有弄清楚解决方案是什么？我注意到你的问题，但我只在mac上得到它。你有没有确定一个决议？谢谢！

【解决方案2】：

问题是您试图直接访问您的 ../*.html 文件。由于同源策略，Chrome 无法正确使用许多功能。有两种解决方案。

设置一个简单的 http 服务器。您可以通过启用 apache 为您提供本地文件来做到这一点。

禁用 chrome 的同源策略。

两者的快速谷歌将出现几个关于如何做的完整详细示例。我建议使用选项 1，因为这将模拟您的网页在运行时的行为方式。

【讨论】：

【解决方案3】：

您可以将流直接传递给视频标签。无需创建对象 URL。我的解决方案是对@Dave 解决方案的修改。

 video.srcObject = stream;

而不是这个

 video.src = window.URL.createObjectURL(stream);

【讨论】：