javascript - 我应该如何显示 getUserMedia()

Question

我在网上找到了一些代码来访问我的网络摄像头。它访问网络摄像头，但不显示它所看到的内容。我知道这是正常的，因为文档中没有 html，但我想知道如何显示结果。我找到的代码是:

var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); });

感谢您的帮助。

Answer 1

您的 HTML 中可能缺少用于“转储”网络摄像头流的 video 标记。由于通过标签名称 (video) 引用标签并不是一个好主意，因此您应该使用 ID(例如 #webcam)。只需使用该 id 创建一个视频标签即可:

<video id="webcam"></video>

在 document.querySelector 中更新您的代码以引用您的新标签:

var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('#webcam'); // <- Here
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); });

这是 JSFiddle 的一个工作示例.

此外，请记住允许网络浏览器使用您的网络摄像头和麦克风。