快捷導航

trackingjs+websocket+百度人臉識別API實現(xiàn)人臉簽到

更新時間：2022年08月29日 08:40:39 作者：Geoff俊

這篇文章主要介為大家詳細紹了trackingjs+websocket+百度人臉識別API實現(xiàn)人臉簽到功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在公司做了個年會的簽到、抽獎系統(tǒng)。用java web做的，用公司的辦公app掃二維碼碼即可簽到，掃完碼就在大屏幕上顯示這個人的照片。之后領(lǐng)導讓我改得高大上一點，用人臉識別來簽到，就把掃二維碼的步驟改成人臉識別。

了解了相關(guān)技術(shù)后，大致思路如下：先用websocket與后臺建立通訊；用trackingjs在頁面調(diào)用電腦攝像頭，監(jiān)聽人臉，發(fā)現(xiàn)有人臉進入屏幕了，就把圖片轉(zhuǎn)成base64字符串，通過websocket發(fā)送到后端；后端拿到圖片，調(diào)用百度的人臉識別API，去人臉庫中匹配（當然事先要在百度云建立好了自己的人臉庫），得到相似度最高的那個人的信息，簽到表中紀錄這個人，然后把這個人在人臉庫中的姓名、照片等信息返回給前端顯示。流程圖如圖所示。

中間隔了幾天，實際嘗試后，發(fā)現(xiàn)上面的思路有問題，websocket傳輸?shù)臄?shù)據(jù)大小最大為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="js/jquery-1.9.1.js"></script>
 <script src="js/tracking-min.js"></script>
 <script src="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;//向后臺發(fā)照片的冷卻時間
 
   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");
   
   //講拍照的圖片數(shù)據(jù)發(fā)送到controller，調(diào)用百度云，簽到，返回簽到結(jié)果
   $.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！請更換瀏覽器！');
  } 
  //連接發(fā)生錯誤的回調(diào)方法 
  websocket.onerror = function () { 
  setMessageInnerHTML("WebSocket連接發(fā)生錯誤"); 
  }; 
  //連接成功建立的回調(diào)方法
  websocket.onopen = function () { 
  setMessageInnerHTML("WebSocket連接成功"); 
  } ;
  
  //接收到消息的回調(diào)方法 
  websocket.onmessage = function (event) { 
  setMessageInnerHTML(event.data); 
  };
  //連接關(guān)閉的回調(diào)方法
  websocket.onclose = function () { 
  setMessageInnerHTML("WebSocket連接關(guān)閉"); 
  };
  //監(jiān)聽窗口關(guān)閉事件，當窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
  window.onbeforeunload = function () { 
  closeWebSocket(); 
  }; 
  //將消息顯示在網(wǎng)頁上 
  function setMessageInnerHTML(innerHTML) { 
  document.getElementById('checkinMsg').innerHTML += innerHTML + '<br/>'; 
  } 
  //關(guān)閉WebSocket連接 
  function closeWebSocket() { 
  websocket.close(); 
  } 
  //發(fā)送消息 
  function send(msg) { 
  websocket.send(msg); 
  } 
  });
 
 </script>
  
</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();
 JSONObject obj= baiduApi.identifyUserBybase64(imgStr);//返回百度云的計算結(jié)果
 System.out.println(obj.toString());
 
 Map<String, Object> resultMap = new HashMap<String, Object>();
 
 int result_num = obj.getInt("result_num");//人臉個數(shù)
 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){//暫且設(shè)為如果大于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字符串轉(zhuǎn)byte[]的方法。
百度云人臉識別文檔地址：點擊打開鏈接

public class BaiduFaceAPI {
 //設(shè)置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; 
 
 /**
 * 構(gòu)造函數(shù)，實例化AipFace
 */
 public BaiduFaceAPI(){
  client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
  // 可選：設(shè)置網(wǎng)絡(luò)連接參數(shù)
  client.setConnectionTimeoutInMillis(2000);//建立連接的超時時間
  client.setSocketTimeoutInMillis(60000);//通過打開的連接傳輸數(shù)據(jù)的超時時間（單位：毫秒）
 
  // 可選：設(shè)置代理服務(wù)器地址, http和socket二選一，或者均不設(shè)置
  //client.setHttpProxy("proxy_host", proxy_port); // 設(shè)置http代理
  //client.setSocketProxy("proxy_host", proxy_port); // 設(shè)置socket代理
  
 }//人臉識別。從人臉庫中查找相似度最高的1張圖片
 public JSONObject identifyUserBybase64(String base64Str){
  // 傳入可選參數(shù)調(diào)用接口
  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) 
 { //對字節(jié)數(shù)組字符串進行Base64解碼并生成圖片 
  if (imgStr == null) //圖像數(shù)據(jù)為空 
   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) 
    {//調(diào)整異常數(shù)據(jù) 
     b[i]+=256; 
    } 
   } 
   return b;
  } 
  catch (Exception e) 
  { 
   return null; 
  } 
 }

websocket服務(wù)端:

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 {
 //靜態(tài)變量，用來記錄當前在線連接數(shù)。應(yīng)該把它設(shè)計成線程安全的。
 private static int onlineCount = 0;
 
 //concurrent包的線程安全Set，用來存放每個客戶端對應(yīng)的MyWebSocket對象。若要實現(xiàn)服務(wù)端與單一客戶端通信的話，可以使用Map來存放，其中Key可以為用戶標識
 private static CopyOnWriteArraySet<WebsocketServer> webSocketSet = new CopyOnWriteArraySet<WebsocketServer>();
 
 //與某個客戶端的連接會話，需要通過它來給客戶端發(fā)送數(shù)據(jù)
 private Session session;
 
 /**
 * 連接建立成功調(diào)用的方法
 * @param session 可選的參數(shù)。session為與某個客戶端的連接會話，需要通過它來給客戶端發(fā)送數(shù)據(jù)
 */
 @OnOpen
 public void onOpen(Session session){
 this.session = session;
 webSocketSet.add(this); //加入set中
 addOnlineCount(); //在線數(shù)加
 System.out.println("有新連接加入！當前在線人數(shù)為" + getOnlineCount());
 }
 
 /**
 * 連接關(guān)閉調(diào)用的方法
 */
 @OnClose
 public void onClose(){
 webSocketSet.remove(this); //從set中刪除
 subOnlineCount(); //在線數(shù)減
 System.out.println("有一連接關(guān)閉！當前在線人數(shù)為" + getOnlineCount());
 }
 
 /**
 * 收到客戶端消息后調(diào)用的方法
 * @param message 客戶端發(fā)送過來的消息
 * @param session 可選的參數(shù)
 */
 @OnMessage
 public void onMessage(String message, Session session) {
 System.out.println("來自客戶端的消息:" + message);
 //群發(fā)消息
 for(WebsocketServer item: webSocketSet){
 try {
 item.sendMessage(message);
 } catch (IOException e) {
 e.printStackTrace();
 continue;
 }
 }
 }
 
 /**
 * 發(fā)生錯誤時調(diào)用
 * @param session
 * @param error
 */
 @OnError
 public void onError(Session session, Throwable error){
 System.out.println("發(fā)生錯誤");
 error.printStackTrace();
 }
 
 /**
 * 這個方法與上面幾個方法不一樣。沒有用注解，是根據(jù)自己需要添加的方法。
 * @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="js/jquery-1.9.1.js"></script>
 
 <script type="text/javascript">
 
 $(function(){
 var websocket = null; 
 //判斷當前瀏覽器是否支持WebSocket 
 if ('WebSocket' in window) { 
 websocket = new WebSocket("ws://localhost:8081/BaiduFace/websocket"); 
 } else { 
 alert('當前瀏覽器不支持websocket！請更換瀏覽器！');
 } 
 //連接發(fā)生錯誤的回調(diào)方法 
 websocket.onerror = function () { 
 setMessageInnerHTML("WebSocket連接發(fā)生錯誤"); 
 }; 
 //連接成功建立的回調(diào)方法
 websocket.onopen = function () { 
 setMessageInnerHTML("WebSocket連接成功"); 
 } ;
 
 //接收到消息的回調(diào)方法 
 websocket.onmessage = function (event) { 
 setMessageInnerHTML(event.data); 
 };
 //連接關(guān)閉的回調(diào)方法
 websocket.onclose = function () { 
 setMessageInnerHTML("WebSocket連接關(guān)閉"); 
 };
 //監(jiān)聽窗口關(guān)閉事件，當窗口關(guān)閉時，主動去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會拋異常。
 window.onbeforeunload = function () { 
 closeWebSocket(); 
 }; 
 //將消息顯示在網(wǎng)頁上 
 function setMessageInnerHTML(innerHTML) { 
 document.getElementById('checkinMsg').innerHTML += innerHTML + '<br/>'; 
 } 
 //關(guān)閉WebSocket連接 
 function closeWebSocket() { 
 websocket.close(); 
 } 
 //發(fā)送消息 
 function send(msg) { 
 websocket.send(msg); 
 } 
 });
 
 </script>
</head>
<body>
 <div id="checkinMsg"></div>
</body>
</html>

我事先在百度人臉庫傳了一張圖片，然后用手機打開一張，讓電腦攝像頭拍攝，抓到了人臉，識別出了。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: