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

Posted 2023-03-16

【中文标题】如何使用 javascript 访问网络摄像头中的图像帧

【英文标题】：How to access image frames in a webcam using javascript

【发布时间】：2020-06-13 04:25:01

【问题描述】：

我想做一个活的人脸识别系统。到目前为止，我的代码检测到了人脸。我希望能够处理或扫描网络摄像头中的帧以识别人脸。我正在使用 getUserMedia 加载网络摄像头。我想让识别过程生效，而不必存储图像进行识别。以下是我用来启动网络摄像头的代码。我是初学者，很抱歉有任何困惑，感谢您的帮助。谢谢！

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

【问题讨论】：

就我而言，我使用this 解决方案

【参考方案1】：

您不希望将网络摄像头捕获的图像以何种格式传送。将它们传递到 <canvas /> 元素中非常容易。

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

这是一些示例代码，基于"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 对象。它使您可以对要捕获的视频（和音频）进行大量控制。

【参考方案2】：

HTML

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

JavaScript

var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) 
 navigator.mediaDevices.getUserMedia( video: true ).then(function(stream) 
 video.src = window.URL.createObjectURL(stream);
 video.play();
 );

【讨论】：

谢谢。但是，此代码用于启动网络摄像头对吗？我这样做了。我需要处理来自网络摄像头视频的图像帧以对其应用人脸识别。再次感谢您的帮助！