vue基于face-api.js实现人脸识别

一、face-api.js

Face-api.js 是一个 JavaScript API，是基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现。它实现了一系列的卷积神经网络（CNN），它实现了三种卷积神经网络（CNN）架构，用于完成人脸检测、识别和特征点检测任务。

二、引入

npm i face-api.js

三、加载模型数据

import {
  detectSingleFace,
  nets,
  matchDimensions,
  resizeResults,
  draw,
  SsdMobilenetv1Options,
  Box,
} from 'face-api.js';

created() {
    // 指定面部检测器
    this.options = new SsdMobilenetv1Options({
    // 最小置信阈值
    // 默认值：0.5 
      minConfidence: 0.9
    });
  }
  mounted() {
    this.canvas = this.$refs["canvas"] as HTMLCanvasElement;
    this.video = this.$refs["video"] as HTMLVideoElement;
    this.init();
  }

要加载模型，您必须提供相应的 manifest.json 文件以及model weight files (shards)作为资产。只需将它们复制到您的公共或资产文件夹。模型的 manifest.json 和 shard files 必须位于同一目录/可在同一路径下访问。

假设模型位于public/models：

async init(){
    await nets.ssdMobilenetv1.loadFromUri('/models')
}

四、调用摄像头

this.getUserMedia(
      streams => {
        //后续用于停止视频流
        this.stream = streams;
        //显示视频
        if (this.video) this.video['srcObject'] = streams;
      },
      err => (this.getUserMediaFail = true),
    );

/** @name 调用摄像头 */
  getUserMedia(
    success: NavigatorUserMediaSuccessCallback,
    error: NavigatorUserMediaErrorCallback,
  ) {
//优先使用前置摄像头（如果有的话）：{ video: { facingMode: "user" } }
//强制使用后置摄像头：{ video: { facingMode: { exact: "envir