【face-api.js】前端实现，人脸捕获、表情识别、年龄性别识别、人脸比对、视频人脸追踪、摄像头人物识别

face-api.js

效果展示

准备工作

• 官网看下简介，在线预览看下效果
• 官方的github文件拷下来
• npm i face-api.js
• 把模型文件拷进你的项目
  

主要布局

主要是在图片或视频元素上，盖一个相同大小的canvas

<template>
  <div>
    <!--  图片/视频 捕获区  -->
    <div class="detectBox">
      <img
        v-show="!trackVideoFaces && !trackCameraFaces"
        :src="base64"
        alt=""
        width="500"
        ref="img"
        id="myImg"
        @load="detectFactory"
      >

      <video
        v-if="trackVideoFaces"
        width="500"
        ref="video"
        id="myVideo"
        muted
        playsinline
        preload
        loop
        @durationchange="$refs.video.play()"
        @play="videoStatus = 1"
        @pause="videoStatus = 0"
      >
        <source src="./media/shylock.mp4" type="video/mp4">
        抱歉，您的浏览器不支持嵌入式视频。
      </video>

      <video
        v-if="trackCameraFaces"
        @loadedmetadata=""
        ref="video"
        id="myVideo"
        autoplay
        muted
        playsinline
        @play="videoStatus = 1"
        @pause="videoStatus = 0"
      />

      <canvas ref="canvas" />
    </div>
  </div>
</template>

加载训练模型

import * as faceapi from 'face-api.js';

export default {
   
	methods: {
   
	  	// 加载模型
	    init() {
   
	      const toast = this.$createToast({
   
	        txt: '模型加载中...',
	        mask: true
	      })
	
	      toast.show();
	
	      // 加载训练好的模型
	      // ageGenderNet:          年龄、性别识别模型，大约420KB
	      // faceExpressionNet:     人脸表情识别模型，识别表情,开心，沮丧，普通，大约310KB
	      // faceLandmark68Net：    68个点人脸地标检测模型（默认模型），大约350KB
	      // faceLandmark68TinyNet：68个点人脸地标检测模型（小模型），大约80KB
	      // faceRecognitionNet:    人脸识别模型，可以比较任意两个人脸的相似性，大约6.2MB
	      // ssdMobilenetv1：       SSD 移动网络 V1，大约5.4MB，准确的最高，推理时间最慢
	      // tinyFaceDetector:      微型人脸检测器（实时人脸检测器），与 SSD Mobilenet V1 人脸检测器相比，它速度更快、体积更小且资源消耗更少，但在检测小人脸方面的表现略逊一筹。移动和网络友好
	      // mtcnn                  大约2MB
	      // tinyYolov2             识别身体轮廓的算法，不知道怎么用
	      Promise.all([
	        faceapi.nets.faceRecognitionNet.loadFromUri('./models'),
	        faceapi.nets.faceLandmark68Net.loadFromUri('./models'),
	        faceapi.nets.faceLandmark68TinyNet.loadFromUri('./models'),
	        faceapi.nets.ssdMobilenetv1.loadFromUri('./models'),
	        faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
	        faceapi.nets.mtcnn.loadFromUri('./models'),
	        faceapi.nets.faceExpressionNet.loadFromUri('./models'),
	        faceapi.nets.ageGenderNet.loadFromUri('./models'),
	        // faceapi.nets.tinyYolov.loadFromUri('./models')
	      ])
	          .then((res) => {
   
	            this.entryFaces();
	            toast.hide();
	          }