在公司做了个年会的签到、抽奖系统。用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="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>
最后发张成果图，我事先在百度人脸库传了一张胡歌的图片，然后用手机打开一张胡歌的图片，让电脑摄像头拍摄，抓到了人脸，识别出了这是胡歌。

————————————————
版权声明：本文为CSDN博主「Geoff俊」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_40673464/article/details/79048583

trackingjs+websocket+百度人脸识别API，实现人脸签到的更多相关文章

  1. 转《trackingjs+websocket+百度人脸识别API，实现人脸签到》流程

    先用websocket与后台建立通讯:用trackingjs在页面调用电脑摄像头,监听人脸,发现有人脸进入屏幕了,就把图片转成base64字符串,通过websocket发送到后端:后端拿到图片,调用百 ...

  2. 免费人脸识别APi

    今天对应一些免费的人脸识别的api 做了一下简单的对比,觉得百度开发出来的人脸识别接口还是最符合的我的要求,简单易用,容易上手. 据说百度的一些门禁也使用上了人脸识别的功能了,功能很强大,而且能识别出 ...

  3. 某简单易懂的人脸识别 API 的开发环境搭建和简易教程

    最近接了个人脸识别相关的项目,是基于某个非常简单易懂的人脸识别 API:face_recognition 做的.这个库接口非常傻瓜,很适合新手上手,而且可以研究其源码来学习 dlib 这个拥有更加灵活 ...

  4. 微信公众平台消息接口开发（24）图片识别之人脸识别API

    微信公众平台开发模式 微信 公众平台 消息接口 开发模式 企业微信公众平台 图片识别 人脸识别 API 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/archi ...

  5. C#百度图片识别API调用返回数据包解析

    百度图片识别api接口 public static JObject GeneralBasic(string apikey,string secretkey,string path) { var cli ...

  6. MUI框架-11-MUI前端 +php后台接入百度文字识别API

    MUI框架-11-MUI前端 +php后台接入百度文字识别API 这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以 这里使用的是 php 来介绍,已经解决所有问题,因为 ...

  7. 3D动态人脸识别技术分析——世纪晟人脸识别实现三维人脸建模

    - 目录 - 国内3D动态人脸识别现状概况 - 新形势下人脸识别技术发展潜力 - 基于深度学习的3D动态人脸识别技术分析 1. 非线性数据建模方法 2. 基于3D变形模型的人脸建模 - 案例结合——世 ...

  8. 利用百度文字识别API识别图像中的文字

      本文将会介绍如何使用百度AI开放平台中的文字识别服务来识别图片中的文字.百度AI开放平台的访问网址为:http://ai.baidu.com/ ,为了能够使用该平台提供的AI服务,你需要事先注册一 ...

  9. python 与 百度人脸识别api

    用python来做人脸识别代码量少 思路清晰, 在使用之前我们需要在我们的配置的编译器中通过pip       install baidu-aip  即可 from aip import AipFac ...

随机推荐

  1. iOS项目运行出现：[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object

    说白了就是 字典初始化 的时候 放入空的值了 下面这个比较具体 错误原因: NSDictionary *dic = @{@"key":value}这个初始化方法,发现keys co ...

  2. Java基础 awt Frame 设置窗体的背景颜色

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  3. 002-Python3-基础语法-赋值、显示类型、数据类型[数值、字符串、列表、元祖、集合、字典]

    一.基础语法 参看地址:https://www.runoob.com/python3/python3-tutorial.html 基础数据类型 Python 中的变量不需要声明.每个变量在使用前都必须 ...

  4. Gulp 搭建前端非SPA 项目， 修改文件浏览器自动刷新

    起因:需要搭建一个自动打包处理 sass / js (es6),自动监听文件变化时浏览器自动刷新的开发环境 项目目录 project build -css -js *.html src -html - ...

  5. DL Practice：Cifar 10分类

    Step 1:数据加载和处理 一般使用深度学习框架会经过下面几个流程: 模型定义(包括损失函数的选择)——>数据处理和加载——>训练(可能包括训练过程可视化)——>测试 所以自己写代 ...

  6. python：将时间戳格式化为yyyyMMdd hh:mm:ss

    import time #将10位时间戳或者13位转换为时间字符串,默认为2017-10-01 13:37:04格式 def timestamp_to_date(time_stamp, format_ ...

  7. 【ARM-Linux开发】用VS2013+VELT-0.1.4进行海思平台 Linux内核 的开发

    1.1    什么是VELT VELT的全称是Visual EmbedLinuxTools,它是一个与visual gdb类似的visual studio插件,用以辅助完成Linux开发.利用这个插件 ...

  8. python之 小甲鱼教程 Easygui 篇

    博客转自 https://blog.csdn.net/bestallen/article/details/51933427 终于有点实质性可以看到摸到的界面了,搜了一下虽然easygui用的不多,但是 ...

  9. html遮罩层实现

    html文件内容如下 <!--调出子窗口按钮--> <button class="add" onclick="addClick();"> ...

  10. 更改ubuntu桌面环境

    1.修改桌面环境 update-alternatives --config x-session-manager 2.卸载某一种ppa源下面的软件 sudo apt-get install ppa-pu ...