前端使用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形成截图画面，把图片保存下来发给后端。