人脸识别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的人脸特征,然后创建人脸匹配器;以及执行人脸匹配检查。

相关推荐
熬夜学编程的小王5 分钟前
【C++篇】从基础到进阶:全面掌握C++ List容器的使用
开发语言·c++·list·双向链表·迭代器失效
悄悄敲敲敲7 分钟前
C++:智能指针
开发语言·c++
书埋不住我13 分钟前
java第三章
java·开发语言·servlet
好开心3321 分钟前
javaScript交互案例2
开发语言·前端·javascript·html·ecmascript·交互
tian-ming24 分钟前
(十八)JavaWeb后端开发案例——会话/yml/过滤器/拦截器
java·开发语言·前端
duansamve29 分钟前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis
_jacobfu32 分钟前
mac2024 安装node和vue
前端·javascript·vue.js
Ztiddler33 分钟前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
快意咖啡~34 分钟前
java.nio.charset.MalformedInputException: Input length = 1
java·开发语言·nio
李钢蛋37 分钟前
PHP函数---function_exists()详解
开发语言·php