前言
参考资料
face-api的GitHub链接:face-api.js
项目代码来源:讲解如何使用webcam实现人脸检测:Build Real Time Face Detection With JavaScript
本文的代码与视频里大致相同,实测能跑。
前期准备
因为Chrome需要跨域,操作如下:
先找到Chrome的快捷方式
在"C:\Program Files\Google\Chrome\Application\chrome.exe"后面添加上
-disable-web-security -user-data-dir=F:\MyChromeDevUserData
文件的地址可以自己修改到一个足够空间的位置(此处的地址为F:\MyChromeDevUserData)
然后关闭浏览器(一定要关闭!)
重启浏览器
如果看到如下界面就表示成功开启跨域功能
(我看了很多类似的文章都没有提及这点,我是在自己试的时候发现要设置Chrome的)
正式开始
文件部分
- 新建文件夹
- 去GitHub上下载face-api,然后解压,将刚才下好的face-api.js目录里的/dist/face-api.min.js复制到自己的文件夹下。
- 然后再把/weights文件夹直接全部拖到自己的目录下,重命名为models,新建index.html和script.js。
代码部分
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>Document</title>
<script defer src="face-api.min.js"></script>
<script defer src="script.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>
script.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)
}, 100)
})
使用
- 打开已经可以跨域的Chrome
- 把index.html拖进Chrome
- 允许网页使用摄像头
- 等待
最后
真觉得搞不定可以去油管对着一步一步来,看看是哪步出了问题,这里的代码是实测可以跑的。