javascript - getUserMedia 在 Chrome 中不起作用

Question

我正在尝试设置视频流网站。我发现，您可以在 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 黑色方 block 。我哪里做错了？

Answer 1

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

MDN 片段:(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 的某处)。

---

当然，始终值得检查您是否确实拥有网络摄像头并且已连接! (例如，您可以从另一个应用程序使用它吗？从另一个网站怎么样？)