在公司做了个年会的签到、抽奖系统。用java web做的，用公司的办公app扫二维码码即可签到，扫完码就在大屏幕上显示这个人的照片。之后领导让我改得高大上一点，用人脸识别来签到，就把扫二维码的步骤改成人脸识别。
了解了相关技术后，大致思路如下：先用websocket与后台建立通讯；用trackingjs在页面调用电脑摄像头，监听人脸，发现有人脸进入屏幕了，就把图片转成 64字符串，通过websocket发送到后端；后端拿到图片，调用百度的人脸识别API，去人脸库中匹配（当然事先要在百度云建立好了自己的人脸库），得到相似度最高的那个人的信息，签到表中纪录这个人，然后把这个人在人脸库中的姓名、照片等信息返回给前端显示。流程图如图所示。
![\"\"](\"/images/51jb/1543221634D1lz543221K634.png\")
中间隔了几天，实际尝试后，发现上面的思路有问题，websocket传输的数据大小最大为8KB，超出就自动与后台断开了，没法传图片。
所以又改变了一下，直接上流程图。其实就是把图片改为用ajax传给controller
![\"\"](\"/images/51jb/1543221634154032216UeN34.png\")
下面给出代码
拍摄页面trackingjs.jsp
<%@ page language=\"java\" contentType=\"text/html; charset=UTF-8\" pageEncoding=\"UTF-8\"%>
<!DOCTYPE html >
<html>
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
< >Insert here</ >
< src=\"js/jquery-1.9.1.js\"></ >
< src=\"js/tracking-min.js\"></ >
< src=\"js/face-min.js\"></ >
<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>
< >
$(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. Tracker(\'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. = function () {
setMessageInnerHTML(\"WebSocket连接发生错误\");
};
//连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML(\"WebSocket连接成功\");
} ;
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
};
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML(\"WebSocket连接关闭\");
};
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window. = function () {
closeWebSocket();
};
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById(\'checkinMsg\').innerHTML += innerHTML + \'<br/>\';
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
//发送消息
function send(msg) {
websocket.send(msg);
}
});
</ >
</head>
<body>
<div class=\"container\">
<video id=\"video\" preload autoplay loop muted></video>
<canvas id=\"canvas\" width=\"581\" height=\"436\"></canvas>
</div>
<div class=\"message\">
<canvas id=\"shortCut\" width=\"290\" height=\"218\" ></canvas>
<div id=\"checkinMsg\"></div>
</div>
</body>
</html>
controller:
@RequestMapping(value=\"/identifyUser\")
public void identifyUser(HttpServletRequest request,HttpServletResponse response) throws IOException, InterruptedException{
response.setHeader(\"Content-Type\", \"application/json;charset=utf-8\");
PrintWriter pw= response.getWriter();
String imgStr = request.getParameter(\"imgStr\");
BaiduFaceAPI baiduApi = new BaiduFaceAPI();
JSON obj= baiduApi.identifyUserBy 64(imgStr);//返回百度云的计算结果
System.out.println(obj.toString());
Map<String, > resultMap = new HashMap<String, >();
int result_num = obj.getInt(\"result_num\");//人脸个数
if(result_num == 1){
JSON result0 = obj.getJSONArray(\"result\").getJSON (0);
resultMap.put(\"result\", \"true\");
double score = result0.getJSONArray(\"scores\").getDouble(0);//与人脸库中最相似的人脸的相似度
if(score>=85){//暂且设为如果大于85则可以认为是同一个人
resultMap.put(\"user\",result0.getString(\"user_info\"));
}else{
resultMap.put(\"user\",\"404\");
}
}else{
resultMap.put(\"result\",\"false\");
}
pw.write(net.sf.json.JSON .from (resultMap).toString());
pw.flush();
pw.close();
}
controller 中，BaiduFaceAPI类中的 identifyUserBy 64（）方法，以及 64字符串转byte[]的方法。
百度云人脸识别文档地址：点击打开链接
public class BaiduFaceAPI {
//设置APPID/AK/SK
private static final String APP_ID = \"你的appid\";
private static final String API_KEY = \"你的apikey\";
private static final String SECRET_KEY = \"你的secretkey\";
//定义AipFace
private AipFace client;
/**
* 构造函数，实例化AipFace
*/
public BaiduFaceAPI(){
client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
// 可选：设置网络连接参数
client.setConnectionTimeoutInMillis(2000);//建立连接的超时时间
client.setSocketTimeoutInMillis(60000);//通过打开的连接传输数据的超时时间（单位：毫秒）
// 可选：设置代理服务器地址, http和socket二选一，或者均不设置
//client.setHttpProxy(\"proxy_host\", proxy_port); // 设置http代理
//client.setSocketProxy(\"proxy_host\", proxy_port); // 设置socket代理
}//人脸识别。从人脸库中查找相似度最高的1张图片
public JSON identifyUserBy 64(String 64Str){
// 传入可选参数调用接口
HashMap<String, String> options = new HashMap<String, String>();
//options.put(\"ext_fields\", \"faceliveness\");//判断活体
options.put(\"user_top_num\", \"1\");
String groupId = \"group1\";
byte[] byt = ImageUtil. 64StrToByteArray( 64Str);
return client.identifyUser(groupId, byt, options);
}
}
public static byte[] 64StrToByteArray(String imgStr)
{ //对字节数组字符串进行 64解码并生成图片
if (imgStr == null) //图像数据为空
return null;
64Decoder decoder = new 64Decoder();
try
{
// 64解码
byte[] b = decoder.decodeBuffer(imgStr);
for(int i=0;i<b.length;++i)
{
if(b[i]<0)
{//调整异常数据
b[i]+=256;
}
}
return b;
}
catch (Exception e)
{
return null;
}
}
websocket服务端:
package com.digitalchina.communication.remote.service;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint(\"/websocket\")
public class WebsocketServer {
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
private static CopyOnWriteArraySet<WebsocketServer> webSocketSet = new CopyOnWriteArraySet<WebsocketServer>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
/**
* 连接建立成功调用的方法
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加
System.out.println(\"有新连接加入！当前在线人数为\" + getOnlineCount());
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(){
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减
System.out.println(\"有一连接关闭！当前在线人数为\" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
* @param message 客户端发送过来的消息
* @param session 可选的参数
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println(\"来自客户端的消息:\" + message);
//群发消息
for(WebsocketServer item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
/**
* 发生错误时调用
* @param session
* @param error
*/
@
public void (Session session, Throwable error){
System.out.println(\"发生错误\");
error.printStackTrace();
}
/**
* 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException{
this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebsocketServer.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebsocketServer.onlineCount--;
}
}
大屏幕欢迎页面jsp:
<%@ page language=\"java\" contentType=\"text/html; charset=UTF-8\" pageEncoding=\"UTF-8\"%>
<!DOCTYPE html >
<html>
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
< >大屏幕</ >
< src=\"js/jquery-1.9.1.js\"></ >
< type=\"text/ \">
$(function(){
var websocket = null;
//判断当前浏览器是否支持WebSocket
if (\'WebSocket\' in window) {
websocket = new WebSocket(\"ws://localhost:8081/BaiduFace/websocket\");
} else {
alert(\'当前浏览器不支持websocket！请更换浏览器！\');
}
//连接发生错误的回调方法
websocket. = function () {
setMessageInnerHTML(\"WebSocket连接发生错误\");
};
//连接成功建立的回调方法
websocket.onopen = function () {
setMessageInnerHTML(\"WebSocket连接成功\");
} ;
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
};
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML(\"WebSocket连接关闭\");
};
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window. = function () {
closeWebSocket();
};
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById(\'checkinMsg\').innerHTML += innerHTML + \'<br/>\';
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
//发送消息
function send(msg) {
websocket.send(msg);
}
});
</ >
</head>
<body>
<div id=\"checkinMsg\"></div>
</body>
</html>
最后发张成果图，我事先在百度人脸库传了一张胡歌的图片，然后用手机打开一张胡歌的图片，让电脑摄像头拍摄，抓到了人脸，识别出了这是胡歌。
![\"\"](\"/images/51jb/1543221634Z1B543d22163j4.jpg\")
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
-
Jmeter的压测使用
2026-05-19栏目： 教程
-
maven常用命令
2026-05-19栏目： 教程
-
Java常用命令之jstat
2026-05-19栏目： 教程
-
阿里云第六代云服务器实例类型、特性及可选区域介绍
2026-05-19栏目： 教程
-
Greenplum6单机安装攻略
2026-05-19栏目： 教程