本文首发于政采云前端团队博客:基于 Web 端的人脸识别身份验证 https://www.zoo.team/article/web-face-recognition
人脸识别效果图
近些年来,随着生物识别技术的逐渐成熟,基于深度学习的人脸识别技术取得了突破性进展,准确率显著提高。现阶段,人脸识别身份验证作为非常重要的身份验证方式,已被广泛的应用于诸多行业和领域,例如:支付宝付款、刷脸签到等方面。
其优点在于,以人脸为识别对象,识别过程更加友好、便捷,只需被识别者进入摄像范围内即可,不会引起被识别者的反感和警惕。目前,市面上的应用场景主要集中在移动端,而基于 Web 浏览器端的人脸识别身份验证方案较少。
本文将介绍基于 Web 浏览器端的人脸识别身份验证的整体方案,以及重点讲解如何在 Web 浏览器中实现人脸自动采集。
在上述方案中,想必大家对摄像头检测、实时视频流数据获取、Canvas 图片绘制这些都比较熟悉,我这边就不详细讲解了。部分同学没接触过也没关系,具体实现比较简单,可以直接看 源码 (https://github.com/Angela-Chen/face-api-demo),源码里面关于这些都有详细的注解。
下面我详细讲下,如何使用 face-api.js 在实时视频流中进行人脸的检测
1、引入 face-api
script 标签方式,获取 最新脚本 (https://github.com/justadudewhohacks/face-api.js/tree/master/dist)
<script src="face-api.js"></script>
或者 使用 npm 方式
npm install face-api.js
2、加载模型数据
“加载模型数据是异步操作。需要等模型数据加载完成后,才能开始人脸检测。
// 加载所有模型数据,models 是存放模型数据文件的目录
await faceapi.loadModels('/models');
// 加载单个指定的模型数据
await faceapi.loadTinyFaceDetectorModel('/models');
await faceapi.loadSsdMobilenetv1Model('/models');
await faceapi.loadMtcnnModel('/models');
3、检测人脸
“当人脸被检测到符合模型的配置参数后,就会被认为检测到人脸了,然后返回一个detection对象,包括了人脸匹配度、人脸坐标等信息。可用于后续自定义绘制人脸边界框,以及阈值的逻辑判断。
- faceapi.detectAllFaces :检测图像中的所有人脸
- faceapi.detectSingleFace :检测单个人脸,返回图像中具有最高置信度得分的人脸
// 数据源支持:HTMLImageElement | HTMLVideoElement | HTMLCanvasElement 类型
// 不同的模型有不同的配置参数,下面会详细介绍
const detections1 = await faceapi.detectAllFaces(待检测的数据源, 模型的配置参数);
const detections2 = await faceapi.detectSingleFace(待检测的数据源, 模型的配置参数);
4、常用人脸检测模型介绍
(1) Tiny Face Detector 是一款性能非常高的实时人脸检测模型,与 SSD Mobilenet V1 人脸检测模型相比,它更快,更小,资源消耗更少,量化模型的大小仅为 190 KB(tiny_face_detector_model),但它在检测小脸时的表现稍差。加载时长 8 ms左右
// 模型的配置参数
new faceapi.TinyFaceDetectorOptions({
// 输入的数据源大小,这个值越小,处理速度越快。常用值:128, 160, 224, 320, 416, 512, 608
inputSize: number, // default: 416
// 用于过滤边界的分数阈值,大于等于这个值才被认为检测到了人脸,然后返回一个detection对象
scoreThreshold: number // default: 0.5
});
(2) SSD Mobilenet V1 对于面部检测,该模型实现了基于 MobileNetV1 的 SSD(单次多盒检测器)。神经网络将计算图像中每个面部的位置,并将返回边界框以及每个面部的概率。该面部检测器旨在获得检测面部边界框而不是低推理时间的高精度。量化模型的大小约为 5.4 MB(ssd_mobilenetv1_model)。加载时长 2-3s 左右
// 模型的配置参数
new faceapi.SsdMobilenetv1Options({
// 最小置信值,大于等于这个值才被认为检测到了人脸,然后返回一个detection对象
minConfidence: number, // default: 0.5
// 最多返回人脸的个数
maxResults: number // default: 100
});
(3) MTCNN MTCNN(多任务级联卷积神经网络)代表了 SSD Mobilenet v1 和 Tiny Yolo v2 的替代面部检测模型,它提供了更多的配置空间。通过调整输入参数,MTCNN 应该能够检测各种面部边界框大小。MTCNN 是一个 3 级级联 CNN,它同时返回 5 个面部标志点以及每个面的边界框和分数。此外,型号尺寸仅为 2 MB。加载时长 1-2s 左右
// 模型的配置参数
new faceapi.MtcnnOptions({
// 人脸尺寸的最小值,小于这个尺寸的人脸不会被检测到
minFaceSize: number, // default: 20
// 用于过滤边界的分数阈值,分别可以设置3个阶段盒子的阈值。
scoreThresholds: number[], // default: [0.6, 0.7, 0.7]
// 比例因子用于计算图像的比例步长
scaleFactor: number, // default: 0.709
// 经过CNN的输入图像缩放版本的最大数量。数字越小,检测时间越短,但相对准确度会差一些。
maxNumScales: number, // default: 10
// 手动设置缩放步长 scaleSteps
scaleSteps?: number[],
});
const errorMap = {
'NotAllowedError': '摄像头已被禁用,请在系统设置或者浏览器设置中开启后重试',
'AbortError': '硬件问题,导致无法访问摄像头',
'NotFoundError': '未检测到可用摄像头',
'NotReadableError': '操作系统上某个硬件、浏览器或者网页层面发生错误,导致无法访问摄像头',
'OverConstrainedError': '未检测到可用摄像头',
'SecurityError': '摄像头已被禁用,请在系统设置或者浏览器设置中开启后重试',
'TypeError': '类型错误,未检测到可用摄像头'
};
await navigator.mediaDevices.getUserMedia({video: true})
.catch((error) => {
if (errorMap[error.name]) {
alert(errorMap[error.name]);
}
});