Question

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

2020-02-29

6537

javascript tensorflow artificial-intelligence face-recognition getusermedia

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

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

Answer 1

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

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

以下是一些示例代码，基于 “官方”webrtc 示例。

初始化

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 对象。它让您可以对要捕获的视频（和音频）进行大量控制。

Answer 2

HTML

<center><video id="video" width="640" height="480" 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();
 });
}