javascript - 如何使用 javascript 访问网络摄像头中的图像帧

Question

我想做一个活人脸识别系统。到目前为止，我的代码检测到人脸。我希望能够处理或扫描网络摄像头中的帧以识别面孔。我正在使用 getUserMedia 加载网络摄像头。我想让识别过程实时进行，而不必存储图像进行识别。以下是我用来启动网络摄像头的代码。我是初学者，对于任何困惑，我们深表歉意，我们将不胜感激。谢谢!

    function startVideo() {
  document.body.append('Loaded')
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )

Answer 1

您没有为要传送的网络摄像头捕获的图像选择哪种格式。将它们传送到 <canvas /> 中非常容易元素。

• 您使用 gUM 打开视频流，然后
• 在 <video /> 中预览元素，然后
• 使用 drawImage 将该元素的快照复制到您的 Canvas 。

这是一些示例代码，基于 "official" webrtc sample.

初始化

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
canvas.width = 480;
canvas.height = 360;
const button = document.querySelector('button');

快照按钮点击处理程序

参见 drawImage()方法调用...这就是捕捉视频预览元素的原因。

button.onclick = function() {
  /* set the canvas to the dimensions of the video feed */
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  /* make the snapshot */
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
};

开始并预览视频流

navigator.mediaDevices.getUserMedia( {audio: false, video: true })
.then(stream => video.srcObject = stream)
.catch(error => console.error(error); 

显然这很简单。您传递给 gUM 的参数是 MediaStreamConstraints目的。它使您可以对要捕获的视频(和音频)进行大量控制。