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上的一个工作示例。

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

我该如何显示getUserMedia（）

1 个答案: