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

本文介绍: Chr o m e上基于 face–api的HTML5网页前端的人脸特征点检测

前言

参考资料

face–api的Gi tHub 链接:face-api.js
项目代码来源：讲解如何使用 web cam 实现人脸检测:Build Real Time Face Detection With JavaScript

前期准备

因为Chr o m e 需要跨域，操作如下：
先找到Chrom e的快捷方式
Chrome的快捷方式
在”C:Pro g ram FilesGoogl eChrom eAp pli cat ion chrome.exe“后面添加上

–di sa ble–web–security –user–data–dir=F:MyChrom eDe vUs e rDa t a

文件的地址可以自己修改到一个足够空间的位置（此处的地址为F:MyChrom eDevUserDa t a）
然后关闭浏览器（一定要关闭！）
重启浏览器
如果看到如下界面就表示成功开启跨域功能
Chrome跨域开启成功
（我看了很多类似的文章都没有提及这点，我是在自己试的时候发现要设置Chrome的）

正式开始

文件 部分

新建文件夹
去Gi tHub上下载 face–api，然后解压，将刚才下好的face–api.js 目录里的/dist/face–api.min.js 复制到自己的文件夹下。
然后再把/wei g hts文件夹直接全部拖到自己的目录下，重命名为models，新建 index.html和script.js。

代码 部分

index.html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    <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>

scri pt.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)
})