在公司做了个年会的签到、抽奖系统。用java web做的，用公司的办公app扫二维码码即可签到，扫完码就在大屏幕上显示这个人的照片。之后领导让我改得高大上一点，用人脸识别来签到，就把扫二维码的步骤改成人脸识别。
了解了相关技术后，大致思路如下：先用websocket与后台建立通讯；用trackingjs在页面调用电脑摄像头，监听人脸，发现有人脸进入屏幕了，就把图片转成base64字符串，通过websocket发送到后端；后端拿到图片，调用百度的人脸识别API，去人脸库中匹配（当然事先要在百度云建立好了自己的人脸库），得到相似度最高的那个人的信息，签到表中纪录这个人，然后把这个人在人脸库中的姓名、照片等信息返回给前端显示。流程图如图所示。
中间隔了几天，实际尝试后，发现上面的思路有问题，websocket传输的数据大小最大为8KB，超出就自动与后台断开了，没法传图片。
所以又改变了一下，直接上流程图。其实就是把图片改为用ajax传给controller
下面给出代码
拍摄页面trackingjs.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="https://www.jb51.net/js/jquery-1.9.1.js"></script> <script src="https://www.jb51.net/js/tracking-min.js"></script> <script src="https://www.jb51.net/js/face-min.js"></script> <style> * { padding: 0; margin: 0; } .container { position: relative; width: 581px; height: 436px; float:left; } .message{ float:left; } video, #canvas { position: absolute; width: 581px; height: 436px; } </style> <script> $(function () { var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var shortCut = document.getElementById('shortCut'); var scContext = shortCut.getContext('2d'); var time =10000;//向后台发照片的冷却时间 var tracker = new tracking.ObjectTracker('face'); tracker.setInitialScale(4); tracker.setStepSize(2); tracker.setEdgesDensity(0.1); tracking.track('#video', tracker, {camera: true}); var flag=true; tracker.on('track', function (event) { if (event.data.length === 0) { context.clearRect(0, 0, canvas.width, canvas.height); }else{ context.clearRect(0, 0, canvas.width, canvas.height); event.data.forEach(function (rect) { context.strokeStyle = '#ff0000'; context.strokeRect(rect.x, rect.y, rect.width, rect.height); context.fillStyle = "#ff0000"; //console.log(rect.x, rect.width, rect.y, rect.height); }); if(flag){ console.log("拍照"); getPhoto(); flag=false; setTimeout(function(){flag=true;},time); }else{ //console.log("冷却中"); } } }); function getPhoto() { scContext.drawImage(video,0,0,290,218); var imgStr = shortCut.toDataURL("image/png"); //讲拍照的图片数据发送到controller，调用百度云，签到，返回签到结果 $.ajax({ url:"identifyUser", type:"post", dataType:"json", data:{ imgStr:imgStr.substring(imgStr.indexOf(",")+1) }, success:function(result){ if(result.result == "true"){ if(result.user != "404"){ send("user_info:"+result.user); } } } }); } var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8081/BaiduFace/websocket"); } else { alert('当前浏览器不支持websocket！请更换浏览器！'); } //连接发生错误的回调方法 websocket.onerror = function () { setMessageInnerHTML("WebSocket连接发生错误"); }; //连接成功建立的回调方法 websocket.onopen = function () { setMessageInnerHTML("WebSocket连接成功"); } ; //接收到消息的回调方法 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); }; //连接关闭的回调方法 websocket.onclose = function () { setMessageInnerHTML("WebSocket连接关闭"); }; //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); }; //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('checkinMsg').innerHTML += innerHTML + '<br/>'; } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } //发送消息 function send(msg) { websocket.send(msg); } }); </script> </head> <body> <div> <video preload autoplay loop muted></video> <canvas></canvas> </div> <div> <canvas ></canvas> <div></div> </div> </body> </html>
controller: