前端使用tracking.js进行人脸识别

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

上一篇:姿态估计论文笔记|结合检测和跟踪进行视频中的人体姿势估计|Combining detection and tracking for human pose estimation in videos


下一篇:WACV 2021 论文大盘点-目标跟踪篇