使用face-api实现html前端摄像头人脸检测

face-api的github链接:face-api.js

里面的readme写的有点难以理解，再附一个讲解的网址：讲解如何使用webcam实现人脸检测：Build Real Time Face Detection With JavaScript
本文代码基本就是这个视频里的代码扒过来的，看不了视频的直接看这篇文章就可以了。

1. 准备

下载face-api：https://github.com/justadudewhohacks/face-api.js.git
新建一个自己的文件夹，将刚才下好的face-api.js目录里的/dist/face-api.min.js复制到自己的文件夹下，然后再把/weights文件夹直接全部拖到自己的目录下，新建index.html和face_detect.js。这里的目录设置如图所示：

2. 代码文件

index.html的代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Face Detection</title><script defer src="face-api.min.js"></script><script defer src="face_detect.js"></script><style>body {margin: 0;padding: 0;width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;}canvas {position: absolute;}</style></head><body><video id="video" width="720" height="560" autoplay muted></video></body>
</html>

face_detect.js的代码如下：

const video = document.getElementById('video')Promise.all([faceapi.nets.tinyFaceDetector.loadFromUri('./models'),faceapi.nets.faceLandmark68Net.loadFromUri('./models'),faceapi.nets.faceRecognitionNet.loadFromUri('./models'),faceapi.nets.faceExpressionNet.loadFromUri('./models'),
]).then(startVideo);function startVideo() {navigator.getUserMedia({ video: {} },(stream) => (video.srcObject = stream),(err) => console.error(err));}video.addEventListener("play", () => {const canvas = faceapi.createCanvasFromMedia(video);document.body.append(canvas);const displaySize = { width: video.width, height: video.height };faceapi.matchDimensions(canvas, displaySize);setInterval(async () => {const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();const resizedDetections = faceapi.resizeResults(detections, displaySize);canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);faceapi.draw.drawDetections(canvas, resizedDetections);faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);faceapi.draw.drawFaceExpressions(canvas, resizedDetections);}, 100);});

大功告成~似乎是不能直接点击index.html运行的，会报404的错误（找不到face-api的model），可以用vscode之类的服务端来打开。配合python下的tornado网络框架使用也可。

使用face-api实现html前端摄像头人脸检测相关推荐

【Python3-OpenCV】实现实时摄像头人脸检测
OpenCV 是一个C++库,目前流行的计算机视觉编程库,用于实时处理计算机视觉方面的问题,它涵盖了很多计算机视觉领域的模块.在Python中常使用OpenCV库实现图像处理. 本文将介绍如何在Pyt ...
python 摄像头标定_python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
Python 3 利用 Dlib 19.7 实现摄像头人脸检测特征点标定 0.引言利用python开发,借助Dlib库捕获摄像头中的人脸,进行实时特征点标定: 图1 工程效果示例(gif) 图2 工 ...
【优秀课设】基于OpenCV-Python的摄像头人脸检测追踪控制系统
基于OpenCV-Python的摄像头人脸检测追踪控制系统资源: download.csdn.net/download/weixin_53403301/25496828 采用OpenCV-Pytho ...
摄像头人脸检测的树莓派指纹识别系统
摄像头人脸检测的树莓派指纹识别系统前言:此项目主要用了摄像头.指纹识别.继电器.Led模块等设备.用于实现智能门锁功能,即摄像头检测到人来之后,打开继电器给指纹模块供电,led显示文字. 代码: i ...
纯前端实现人脸检测，并给你的头像戴上口罩！
本文来自社区投稿与征集,作者 Howard Zhang,东华大学研究生在读,中科院计算所客座学生. 本文转自:https://zhuanlan.zhihu.com/p/104070435 根据春节的起 ...
使用UWP人脸检测API在WPF中进行人脸检测
目录介绍先决条件背景人脸检测标记人脸查看模型视图结论 Download repository 介绍通用Windows平台的Windows.Media.FaceAnalysis名称空间 ...
基于OpenCV的摄像头人脸检测
一.选题背景二.设计目的和意义三.设计方案四.特征分类器的选择 4.1 常用人脸检测的特征分类器 4.2 人脸的Haar特征分类器介绍 4.3 人脸的Haar特征分类器使用五.设计中主要函数介 ...
[python][mediapipe]摄像头人脸检测
import cv2 import mediapipe as mp# 导入BlazeFace模型 mp_face_detection = mp.solutions.face_detection mod ...
python+opencv摄像头人脸检测+代码注释
比较简单直接上代码: #导入模块 import cv2 #摄像头 cap=cv2.VideoCapture('1.mp4')falg = 1 num = 1while(cap.isOpened()): ...

使用face-api实现html前端摄像头人脸检测

1. 准备

2. 代码文件

使用face-api实现html前端摄像头人脸检测相关推荐

最新文章

热门文章