人脸识别face-api.js应用简介

前阵子学习了一下face-api.js ,偶有心得,跟大家分享一下。

face-api.js的原始项目是https://github.com/justadudewhohacks/face-api.js ,最后一个release是2020年3月22日的0.22.2版,组件较老,API文档很全,很适合开发参考。另有一位大佬的分支 https://github.com/vladmandic/face-api ,最近的release是2023年6月13日的1.7.12,组件较新,适合拿来使用。

face-api.js的人脸识别是基于对68个人脸特征点的检测来实现的,看得出来这个是基于二维图片识别来标识人脸的,可以在图片,视频中识别。跟咱们现在经常接触到的活体识别、3D结构光识别比可能要弱一些,不过胜在开源免费,也方便直接使用,在一些对人脸识别要求不高的场景,可以较好的应用。

vladmandic/face-api的release里包含demo,稍作修改就可以放在自己的项目里使用。比如webcam.js里,就有在浏览器中调用摄像头识别视频中人脸的方法。

具体怎么玩,可以这样弄下:

在后端定义一个人脸特征库 faces.json,格式如下:

[

{

uid:uid1,

descriptors:[

base64String1,

base64String2,

...

]

},

{

uid:uid2,

descriptors:[

base64String3,

base64String4,

...

]

}

...

]

一个用户可以登记一次或多次人脸特征(可以在自己的项目里自行限制),为了便与保存文件和网络传输,特征采用base64编码的字符串。其实face-api.js采集出来的人脸特征是一个Float32Array,包含128个浮点数。

人脸注册,前端可以用下面这段:

javascript 复制代码
  faceapi
    .detectSingleFace(video, optionsSSDMobileNet)
    .withFaceLandmarks()
	.withFaceDescriptor()
	.then((result) => {
		if (result) {
			fetch2s_reg(result.descriptor,userid).then({...});//将用户与特征绑定信息传到后端
			return true;
			}
		else {
 	     const fps = 1000 / (performance.now() - t0);
    	 requestAnimationFrame(() => detectVideo(video, canvas));
      	 return true;
      	}
    })

人脸识别,前端可以用下面这段:

javascript 复制代码
  faceapi
    .detectSingleFace(video, optionsSSDMobileNet)
    .withFaceLandmarks()
	.withFaceDescriptor()
	.then((result) => {
		if (result) {
			fetch2s_rec(result.descriptor).then({...});//将特征信息传到后端,后端进行匹配后返回前端结果
			return true;
			}
		else {
 	     const fps = 1000 / (performance.now() - t0);
    	 requestAnimationFrame(() => detectVideo(video, canvas));
      	 return true;
      	}
    })

前文介绍过一种后端可以向一个可信任前端调用的方法,在这里可以用一下。

可信任前端可以用于人脸识别匹配检查。浏览器访问它,将执行连接后端websocket,获取当前人脸库,创建人脸匹配器;每次后端收到新的人脸绑定信息后,也会更新人脸库,并将人脸库更新也传到这个可行前端,它重新创建人脸匹配器(根据已有的文档资料,发现只能根据全量人脸库,创建人脸匹配器,无法增量更新)

javascript 复制代码
let labeledDescriptors = [
  new faceapi.LabeledFaceDescriptors(
    'obama',
    [descriptorObama1, descriptorObama2]
  ),
  new faceapi.LabeledFaceDescriptors(
    'trump',
    [descriptorTrump]
  )
]
faceMatcher = new faceapi.FaceMatcher(labeledDescriptors)

人脸识别,其实调用很简单:

javascript 复制代码
let bestMatch = faceMatcher.findBestMatch(descriptor)

拿人脸匹配器根据输入参数人脸特征,返回最佳匹配结果和差异度。

匹配是找出与目标特征值欧几里得距离最小的特征值,以及这个最小值的大小。

其他注意要点:JS前端到nodejs后端,人脸特征float32array可以fetch方式传arraybuffer数据,uid可以放到header里传出;后端nodejs收到arraybuffer的float32array数组,直接转base64编码,更新内存中的人脸库json数组中,并通过websocket发送到可信前端以更新人脸匹配器,关于保存到json文件,不用每次更新都写入,可以定义一个接口,按请求来写入。可信前端需要处理获取人脸库,将base64编码的字符串还原位float32array的人脸特征,然后创建人脸匹配器;以及执行人脸匹配检查。

相关推荐
秋月华星24 分钟前
【flutter】TextField输入框工具栏文本为英文解决(不用安装插件版本
前端·javascript·flutter
*.✧屠苏隐遥(ノ◕ヮ◕)ノ*.✧1 小时前
C语言_数据结构总结8:链式队列
c语言·开发语言·数据结构·链表·visualstudio·visual studio
—Qeyser1 小时前
用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏
javascript·游戏·html
千里码aicood1 小时前
[含文档+PPT+源码等]精品基于Python实现的校园小助手小程序的设计与实现
开发语言·前端·python
讨厌下雨的天空1 小时前
C++之list
开发语言·c++·list
青红光硫化黑1 小时前
React基础之React.memo
前端·javascript·react.js
大麦大麦1 小时前
深入剖析 Sass:从基础到进阶的 CSS 预处理器应用指南
开发语言·前端·css·面试·rust·uni-app·sass
hhw1991122 小时前
c#面试题整理6
java·开发语言·c#
就叫飞六吧2 小时前
WangEditor快速实现版
node.js·mybatis
蠟筆小新工程師2 小时前
Deepseek可以通过多种方式帮助CAD加速工作
开发语言·python·seepdeek