基于face-api的HTML5网页前端的人脸特征点检测

RicardoY.Peng

已于 2022-06-23 18:58:25 修改

阅读量1k

点赞数 2

分类专栏：随手做一下文章标签：前端 html5 chrome javascript

于 2022-06-23 18:49:52 首次发布

本文链接：https://blog.csdn.net/RicardoYPeng/article/details/125432500

版权

随手做一下专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

参考资料

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跨域开启成功
（我看了很多类似的文章都没有提及这点，我是在自己试的时候发现要设置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)
})