前端使用tracking.js进行人脸识别
背景
因为要在一个客户端上增加人脸识别功能，最终找到了第三方库tracking.js，基于此库完成了前端部分的需求开发。
大致流程为：初始化打开摄像头获取视频流、创建监听->检测视频中人脸->进行拍照->保存图片文件至本地->调取后端命令
提示：以下是本篇文章正文内容，下面案例可供参考
一、引入第三方库
因为我的前端代码是jquery、bootstrap、nwjs写的，所以直接下载第三方包引用就可以了。tracking.js
<script src="js/tracking.js"></script>
<script src="js/face.js"></script>
第一个是主包，第二个是一个检测人脸的包。
二、使用步骤
1.初始化打开摄像头获取视频流、创建检测
代码如下（示例）：
var tipFlag = false // 是否检测
var faceflag = false // 是否进行拍照
var informationTitle = $("#informationTitle_bind")//人脸提示
// 获取video、canvas实例
var facevideo = document.getElementById('video_bind');
var facecanvas = document.getElementById('canvas_bind');
var facecontext = facecanvas.getContext('2d');
// 使用监听人脸的包
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
// 每次打开弹框先清除canvas没拍的照片
facecontext.clearRect(0, 0, facecanvas.width, facecanvas.height);
//打开摄像头
var tra = tracking.track('#video_bind', tracker, { camera: true });
// 创建监听 每帧都会触发
tracker.on('track', function(event) {
});
2.检测视频中人脸
代码如下（示例）：
tracker.on('track', function(event) {
if(!tipFlag){
facecontext.clearRect(0, 0, facecanvas.width, facecanvas.height);
if (event.data.length === 0) {
//未检测到人脸
if(!faceflag){
informationTitle.html('未检测到人脸')
}
} else if (event.data.length === 1) { // 长度为多少代表检测到几张人脸
//检测到一张人脸
if(!tipFlag){
informationTitle.html('识别成功，正在拍照，请勿乱动~')、
// 给检测到的人脸绘制矩形
event.data.forEach(function(rect) {
facecontext.strokeStyle = '#a64ceb';
facecontext.strokeRect(rect.x, rect.y, rect.width, rect.height);
});
if(!faceflag){// 检测到人脸进行拍照，延迟两秒
faceflag = true
setTimeout(() => {
tackPhoto () // 拍照
tipFlag = true
}, 2000);
}
}
} else {
//检测到多张人脸
if(!faceflag){
informationTitle.html('只可一人进行人脸识别！')
}
}
}
});
3.拍照
当检测到视频中只有一张人脸时候，进行拍照代码如下（示例）：
//保存照片至canvas 利用canvas覆盖video形成截图界面
facecontext.drawImage(facevideo, 0, 0, facecanvas.width, facecanvas.height)
4.保存文件至本地
利用node模块fs写文件至本地，代码如下（示例）：
//转换照片为base64格式
let imgData = facecanvas.toDataURL('image/png', 0.3)
//过滤data:URL
var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = Buffer.from(base64Data, 'base64');
fs.writeFile("/tmp/face.png", dataBuffer, function(err) {
if(err) {
}else{
}
});
5.关闭摄像头以及取消监听的方法
// 关闭摄像头
facevideo.srcObject.getTracks().forEach(track => track.stop());
// 取消监听
tra.stop()
总结
本文人脸识别功能，前端要做的工作就是通过第三方库检测到人脸，通过canvas覆盖video形成截图画面，把图片保存下来发给后端。