Fetch the repository succeeded.
This action will force synchronization from TsMask/face-api-demo-vue, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
使用 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。
内含功能：
编译执行环境：
v12.13.0@vue/cli@4.3.1^2.6.11^0.22.2^7.5.1face-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 使用 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
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手