trackingjs+websocket+百度人脸识别API实现人脸签到
(编辑：jimmy 日期: 2024/11/6 浏览：3 次 )
在公司做了个年会的签到、抽奖系统。用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="/UploadFiles/2021-04-02/jquery-1.9.1.js">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(); JSONObject obj= baiduApi.identifyUserBybase64(imgStr);//返回百度云的计算结果 System.out.println(obj.toString()); Map<String, Object> resultMap = new HashMap<String, Object>(); int result_num = obj.getInt("result_num");//人脸个数 if(result_num == 1){ JSONObject result0 = obj.getJSONArray("result").getJSONObject(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.JSONObject.fromObject(resultMap).toString()); pw.flush(); pw.close(); }controller 中，BaiduFaceAPI类中的 identifyUserBybase64（）方法，以及base64字符串转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 JSONObject identifyUserBybase64(String base64Str){ // 传入可选参数调用接口 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.base64StrToByteArray(base64Str); return client.identifyUser(groupId, byt, options); } }public static byte[] base64StrToByteArray(String imgStr) { //对字节数组字符串进行Base64解码并生成图片 if (imgStr == null) //图像数据为空 return null; BASE64Decoder decoder = new BASE64Decoder(); try { //Base64解码 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 */ @OnError public void onError(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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>大屏幕</title> <script src="/UploadFiles/2021-04-02/jquery-1.9.1.js">最后发张成果图，我事先在百度人脸库传了一张胡歌的图片，然后用手机打开一张胡歌的图片，让电脑摄像头拍摄，抓到了人脸，识别出了这是胡歌。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：tracking.js页面人脸识别插件使用方法