使用 Vue 框架搭建演示，H5、Web、NodeJS 实现人脸检测识别，基于 TensorFlowJS 实现的 face-api.js 人脸识别库。

起初在 2018 年时，有个项目用人脸检测，当时我在百度寻找了一下关于在浏览器网页 JavaScript 实现人脸识别的方法很少，好多都是用 百度AI 人脸识别接口来实现的。当时 Python 人工智能方面最为热门，很多是做人脸识别和数据分析处理，在 GitHub 上找到人脸识别、机器视觉都是基于 OpenCV 来处理图片，当时发现有个 NodeJS 图像识别处理叫做 opencv4nodejs 的识别库，在作者的仓库内还发现 face-api.js 这个人脸识别库。采用 TensorFlowJS 机器学习库进行模型训练，提升识别功能精确度，感觉不错而且功能也强。

安装依赖库,模型文件放在 public\models 目录下，npm 主要安装以下：

npm i --save face-api.js
npm i --save webrtc-adapter

演示项目说明

示例参考 face-api.js 作者提供示例源码 examples-browser。

内含功能：

脸标志检测
人脸表情识别
年龄和性别识别
人脸提取
人脸识别
人脸识别多图处理
BBT 图片相似度
BBT 图片相似度多查找
BBT 人脸识别
Video 人脸跟踪
Video 人脸识别
WebRTC 人脸跟踪
WebRTC 人脸识别
WebRTC 媒体流基础

编译执行环境：

NodeJS：v12.13.0
Vue 脚手架：@vue/cli@4.3.1
Vue：^2.6.11
face-api.js：^0.22.2
webrtc-adapter：^7.5.1

演示项目结构

face-api-demo-vue
┌─public                  应用引用静态资源的目录
├─src
│ ├─components            复用组件目录
│ ├─router                页面路由配置文件目录
│ ├─utils                 常用函数工具文件目录
│ ├─views                 页面视图文件目录
│ ├─App.vue               配置App全局应用页面
│ └─main.js               Vue初始化入口文件
├─babel.config.js         Babel格式规范化配置
├─package-lock.json       依赖版本校验信息
├─package.json            项目依赖包、编译配置
└─README.md               项目说明

其他

使用前引入模型

console.log(faceapi.nets);
// ageGenderNet
// faceExpressionNet
// faceLandmark68Net
// faceLandmark68TinyNet
// faceRecognitionNet
// ssdMobilenetv1
// tinyFaceDetector
// tinyYolov2
// 放在public/models内
// 通过url地址访问
// await faceapi.nets.ssdMobilenetv1.loadFromUri("/models");
// 本地路径
// await faceapi.nets.ssdMobilenetv1.loadFromDisk("../../public/models");

侦测人脸

detectAllFaces ：检测图像中的所有脸部
detectSingleFace ：检测图像中具有最高置信度得分的脸部

默认情况下，detectAllFaces 和 detectSingleFace 使用 SSD Mobilenet V1 人脸检测器。

您可以通过传递相应的 options 对象来指定面部检测器：

const detections1 = await faceapi.detectAllFaces(输入, 使用的模型参数)
const detections2 = await faceapi.detectSingleFace(输入, 使用的模型参数)

输入：使用 HTMLImageElement | HTMLVideoElement | HTMLCanvasElement 类型

使用的模型参数：配置识别度和修改人脸框，请看 识别库说明 或者 查阅文档。

识别库工具

// 请求json格式文件数据
const json = await faceapi.fetchJson("http://www.example.com/file/example.json");

// 从Blob/File对象创建HTMLImageElement
const imgEl = await faceapi.bufferToImage(imgFile);

// 从图像或视频元素创建画布元素
const canvas = faceapi.createCanvasFromMedia(HTMLImageElement | HTMLVideoElement)

推荐阅读

OpenCVJS的人脸框跟踪

OpenCV.js机器视觉，只有人脸框检测绘制，模型识别精度不高。

代码提供

face-api-demo Browser搭建

0.13.8版含 dist/文档/模型/示例，express服务启动。

代码提供

face-api-demo VUE搭建

基于 TensorFlowJS 实现，功能含检测、识别、绘制、对比。