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

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

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

HTML

<center><video id="video" width="640" height="480" autoplay></video></center>

---

您不知道网络摄像头捕获的图像要以什么格式发送。将它们交付到

元素中非常容易

• 你用口香糖打开一个视频流，然后
• 在
  元素中预览它，然后
• 使用drawImage将该元素的快照复制到画布

下面是一些基于

初始化 快照按钮单击处理程序 请参阅

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);
};

启动并预览视频流

---

显然这很简单。传递给gUM的参数是一个对象。它可以让您对要捕获的视频（和音频）进行大量控制

多谢各位。但是，此代码用于启动网络摄像头是否正确？我做到了。我需要处理网络摄像头视频中的图像帧，以便在其上应用人脸识别。再次感谢你的帮助！

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

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);