首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

trackingjs+websocket+百度人脸识别API实现人脸签到

Posted in Javascript onNovember 26, 2018

在公司做了个年会的签到、抽奖系统。用java web做的，用公司的办公app扫二维码码即可签到，扫完码就在大屏幕上显示这个人的照片。之后领导让我改得高大上一点，用人脸识别来签到，就把扫二维码的步骤改成人脸识别。

了解了相关技术后，大致思路如下：先用websocket与后台建立通讯；用trackingjs在页面调用电脑摄像头，监听人脸，发现有人脸进入屏幕了，就把图片转成base64字符串，通过websocket发送到后端；后端拿到图片，调用百度的人脸识别API，去人脸库中匹配（当然事先要在百度云建立好了自己的人脸库），得到相似度最高的那个人的信息，签到表中纪录这个人，然后把这个人在人脸库中的姓名、照片等信息返回给前端显示。流程图如图所示。

trackingjs+websocket+百度人脸识别API实现人脸签到

中间隔了几天，实际尝试后，发现上面的思路有问题，websocket传输的数据大小最大为8KB，超出就自动与后台断开了，没法传图片。

所以又改变了一下，直接上流程图。其实就是把图片改为用ajax传给controller

trackingjs+websocket+百度人脸识别API实现人脸签到

下面给出代码

拍摄页面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;//向后台发照片的冷却时间
 
   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 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);//返回百度云的计算结果
 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="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！请更换浏览器！');
 } 
 //连接发生错误的回调方法 
 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 id="checkinMsg"></div>
</body>
</html>

最后发张成果图，我事先在百度人脸库传了一张胡歌的图片，然后用手机打开一张胡歌的图片，让电脑摄像头拍摄，抓到了人脸，识别出了这是胡歌。

trackingjs+websocket+百度人脸识别API实现人脸签到

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

trackingjs+websocket+百度人脸识别API实现人脸签到

- Author -

Geoff俊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据
Mar 16 Javascript
一个简单的js树形菜单
Dec 09 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
树结构之JavaScript
Jan 24 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
Bootstrap警告（Alerts）的实现方法
Mar 22 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
Python版实现微信公众号扫码登陆
May 28 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
tracking.js页面人脸识别插件使用方法
Apr 16 #Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 #Javascript
Vue.js的动态组件模板的实现
Nov 26 #Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 #Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 #Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 #Javascript
Vuex的初探与实战小结
Nov 26 #Javascript
嵌套(1) android studio(3) Sqlite(2) OpenLayer(1) 循环(3) 多维数组(1) 二维数组(2) 安卓(1) IDEA(2) 移动开发(2)
You might like
一家之言的经验之谈php＋mysql扎实个人基本功
2008/03/27 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
js 目录列举函数
2008/11/06 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
2016/02/16 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python实现全排列的打印
2018/08/18 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
django修改models重建数据库的操作
2020/03/31 Python
python实现猜单词游戏
2020/05/22 Python
网络工程师个人的自我评价范文
2013/10/01 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
小学教师办公室制度
2014/02/03 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
保研推荐信
2014/05/09 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js