我想做一个活人脸识别系统。到目前为止,我的代码检测到人脸。我希望能够处理或扫描网络摄像头中的帧以识别面孔。我正在使用 getUserMedia 加载网络摄像头。我想让识别过程实时进行,而不必存储图像进行识别。以下是我用来启动网络摄像头的代码。我是初学者,对于任何困惑,我们深表歉意,我们将不胜感激。谢谢!
function startVideo() {
document.body.append('Loaded')
navigator.getUserMedia(
{ video: {} },
stream => video.srcObject = stream,
err => console.error(err)
)
最佳答案
您没有为要传送的网络摄像头捕获的图像选择哪种格式。将它们传送到 <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目的。它使您可以对要捕获的视频(和音频)进行大量控制。
关于javascript - 如何使用 javascript 访问网络摄像头中的图像帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60462332/