2
2
3
3
使用 ` Vue ` 框架搭建演示,` H5 ` 、` Web ` 、` NodeJS ` 实现人脸检测识别,基于 ` TensorFlowJS ` 实现的 ` face-api.js ` 人脸识别库。
4
4
5
- 模型文件放在 ` public/models ` 目录下,部署时请确保网络路径能访问到模型文件。
5
+ 识别模型文件放在 ` public/models ` 目录下,部署时请确保网络路径能访问到模型文件。
6
6
7
- npm 主要安装以下 :
7
+ npm 主要安装识别库 :
8
8
9
9
``` shell
10
- npm i --save face-api.js
10
+ # 升级版作者库
11
+ npm i --save @vladmandic/face-api
12
+ # 原作者库
13
+ # npm i --save face-api.js
11
14
```
12
15
16
+ 安装识别库库后在 ` node_modules/@vladmandic/face-api/model ` 可以拿到模型文件。
17
+
13
18
- [ 本人在线示例-aliyun] ( https://env-00jxgaqjulpu-static.normal.cloudstatic.cn/face-api-demo-vue/index.html#/ )
14
19
- [ 本人在线示例-vercel] ( https://face-api-demo-vue-mu.vercel.app/ )
15
20
- [ 本人仓库 browser 示例 0.13.8 含 dist/文档/模型/示例] ( https://github.com/TsMask/face-api-demo )
16
- - [ GitHub face-api 使用文档] ( https://justadudewhohacks.github.io/face-api.js/docs/globals.html )
17
- - [ GitHub 作者识别库源码] ( https://github.com/justadudewhohacks/face-api.js )
18
- - [ GitHub 作者在线示例] ( https://justadudewhohacks.github.io/face-api.js )
21
+ - [ GitHub 原作者face-api 使用文档] ( https://justadudewhohacks.github.io/face-api.js/docs/globals.html )
22
+ - [ GitHub 原作者识别库源码] ( https://github.com/justadudewhohacks/face-api.js )
23
+ - [ GitHub 原作者在线示例] ( https://justadudewhohacks.github.io/face-api.js )
24
+ - [ GitHub 升级版作者face-api 使用文档] ( https://vladmandic.github.io/face-api/typedoc/index.html )
25
+ - [ GitHub 升级版作者识别库源码] ( https://github.com/vladmandic/face-api )
26
+ - [ GitHub 升级版作者在线示例] ( https://vladmandic.github.io/face-api/demo/index.html )
19
27
20
28
## 其他
21
29
22
- ### 使用前引入模型
23
-
24
- [ 关于mtcnn模型弃用] ( https://github.com/justadudewhohacks/face-api.js/issues/511 )
25
-
26
30
``` js
27
31
console .log (faceapi .nets );
28
- // ageGenderNet
29
- // faceExpressionNet
30
- // faceLandmark68Net
31
- // faceLandmark68TinyNet
32
- // faceRecognitionNet
33
- // ssdMobilenetv1
34
- // tinyFaceDetector
35
- // tinyYolov2
32
+ // const nets: {
33
+ // ssdMobilenetv1: SsdMobilenetv1;
34
+ // tinyFaceDetector: TinyFaceDetector;
35
+ // tinyYolov2: TinyYolov2;
36
+ // faceLandmark68Net: FaceLandmark68Net;
37
+ // faceLandmark68TinyNet: FaceLandmark68TinyNet;
38
+ // faceRecognitionNet: FaceRecognitionNet;
39
+ // faceExpressionNet: FaceExpressionNet;
40
+ // ageGenderNet: AgeGenderNet;
41
+ // }
42
+ //
36
43
// 放在public/models内
37
- // 通过url地址访问
44
+ // 载入模型
45
+ // await faceapi.nets.ssdMobilenetv1.load("/models");
46
+ // 通过url地址
38
47
// await faceapi.nets.ssdMobilenetv1.loadFromUri("/models");
39
- // 本地路径
48
+ // 本地相对路径
40
49
// await faceapi.nets.ssdMobilenetv1.loadFromDisk("../../public/models");
41
50
```
42
51
@@ -61,14 +70,18 @@ const detections2 = await faceapi.detectSingleFace(输入, 使用的模型参数
61
70
### 识别库工具
62
71
63
72
``` js
64
- // 请求json格式文件数据
73
+ // 请求json格式文件数据 Any
65
74
const json = await faceapi .fetchJson (" http://www.example.com/file/example.json" );
75
+ // 请求视频文件 HTMLImageElement
76
+ const imageEl = await faceapi .fetchImage (" http://www.example.com/file/example.jpg" );
77
+ // 请求视频文件 HTMLVideoElement
78
+ const videoEl = await faceapi .fetchVideo (" http://www.example.com/file/example.mp4" );
66
79
67
80
// 从Blob/File对象创建HTMLImageElement
68
- const imgEl = await faceapi .bufferToImage (imgFile );
81
+ const imageEl = await faceapi .bufferToImage (fileBlob );
69
82
70
83
// 从图像或视频元素创建画布元素
71
- const canvas = faceapi .createCanvasFromMedia (HTMLImageElement | HTMLVideoElement )
84
+ const canvasEl = faceapi .createCanvasFromMedia (HTMLImageElement | HTMLVideoElement )
72
85
```
73
86
74
87
----
@@ -97,26 +110,29 @@ const canvas = faceapi.createCanvasFromMedia(HTMLImageElement | HTMLVideoElement
97
110
编译执行环境:
98
111
99
112
100
-
101
-
102
-
113
+
114
+
115
+
116
+ - face-api:
` @vladmandic/[email protected] `
103
117
104
118
## 项目结构
105
119
106
120
``` text
107
121
face-api-demo-vue
108
- ┌─public 应用引用静态资源的目录
122
+ ┌─public 目录-静态资源
109
123
├─src
110
- │ ├─components 复用组件目录
111
- │ ├─router 页面路由配置文件目录
112
- │ ├─utils 常用函数工具文件目录
113
- │ ├─views 页面视图文件目录
114
- │ ├─App.vue 配置App全局应用页面
115
- │ └─main.js Vue初始化入口文件
116
- ├─babel.config.js Babel格式规范化配置
117
- ├─package-lock.json 依赖版本校验信息
118
- ├─package.json 项目依赖包、编译配置
119
- └─README.md 项目说明
124
+ │ ├─assets 目录-编译资源
125
+ │ ├─components 目录-复用组件
126
+ │ ├─router 目录-页面路由配置
127
+ │ ├─utils 目录-常用函数工具
128
+ │ ├─views 目录-页面视图
129
+ │ ├─App.vue 文件-配置App全局
130
+ │ └─main.js 文件-Vue初始化
131
+ ├─index.html 文件-页面容器
132
+ ├─package-lock.json 文件-项目依赖版本锁
133
+ ├─package.json 文件-项目信息
134
+ ├─README.md 文件-项目说明
135
+ └─vite.config.js 文件-Vite配置
120
136
```
121
137
122
138
## Project setup / 项目依赖安装初始化
0 commit comments