使用 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/[email protected] - 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)
npm install
npm run serve
npm run build
npm run lint
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent