标签：拍照 tracking facecanvas 检测 js 人脸识别 人脸 tracker var
前端使用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形成截图画面，把图片保存下来发给后端。
标签：拍照,tracking,facecanvas,检测,js,人脸识别,人脸,tracker,var 来源： https://blog.csdn.net/qq_44724176/article/details/112848559
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。