trackingjs+websocket+百度人脸识别API实现人脸签到
在公司做了个年会的签到、抽奖系统。用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>
最后发张成果图，我事先在百度人脸库传了一张胡歌的图片，然后用手机打开一张胡歌的图片，让电脑摄像头拍摄，抓到了人脸，识别出了这是胡歌。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript动态创建link标签到head里的方法
本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码 代码如下: var cssURL = '/style.css', linkTag = $('<l
-
js实现每日签到功能
本文实例为大家分享了js实现每日签到功能的具体代码,供大家参考,具体内容如下 js: var calUtil = { getDaysInmonth : function(iMonth, iYear){ //当前年月的总天数 var dPrevDate = new Date(iYear, iMonth, 0); return dPrevDate.getDate(); }, bulidCal : function(iYear, iMonth) { //构建当前年月对应的日历 var aMonth =
-
基于JavaScript实现每日签到打卡轨迹功能
本文实例为大家分享了js实现每日签到打卡轨迹功能的具体代码,供大家参考,具体内容如下 1. 核心文件 calendar.js var calUtil = { //当前日历显示的年份 showYear:2018, //当前日历显示的月份 showMonth:1, //当前日历显示的天数 showDays:1, eventName:"load", //初始化日历 init:function(signList){ calUtil.setMonthAndDay(); calUtil.draw(
-
trackingjs+websocket+百度人脸识别API实现人脸签到
在公司做了个年会的签到.抽奖系统.用java web做的,用公司的办公app扫二维码码即可签到,扫完码就在大屏幕上显示这个人的照片.之后领导让我改得高大上一点,用人脸识别来签到,就把扫二维码的步骤改成人脸识别. 了解了相关技术后,大致思路如下:先用websocket与后台建立通讯:用trackingjs在页面调用电脑摄像头,监听人脸,发现有人脸进入屏幕了,就把图片转成base64字符串,通过websocket发送到后端:后端拿到图片,调用百度的人脸识别API,去人脸库中匹配(当然事先要在百度云建
-
易语言调用百度文字识别api方法
现在百度ai特别强大,很多大公司都是调用百度的数据,那么对于习惯易语言的我们改怎么操作呢?今天以百度ai文字识别为例. 首先打开百度ai平台 注册或登录百度账号,进入控制台,选择文字识别 新建应用,获取appid和app key 选择技术文档,api文档 参考第一个调用方式,通过url调用 要获取token请参考相关链接 然后根据参数说明填写相关代码,最后结果如下: .版本 2 .支持库 spec .程序集 窗口程序集_启动窗口 .子程序 __启动窗口_创建完毕 .子程序 _按钮1_被单击 .局
-
Java实现人脸识别登录、注册等功能(最新完整版)
目录 前言: 难度分析: 项目回顾(百度云AI) 最终效果演示: 技术选型: 项目需求分析 项目搭建 注意事项(项目搭建前了解) 项目总结 前言: 这段时间由于学校实行静态化管理,寝室门和校门都是用了人脸识别的装置,每次经过都会激发我的好奇心,也想自己搞一个人脸识别玩玩,随着开始查找资料来研究这方面的信息,还好有好几家公司都有提供这方面的免费API,也是省下来很多功夫.一开始采用的是face++,但是在执行到最后一步人脸搜索时出现问题,一直提示INVALID_OUTER_ID,跟着官方文档,一步
-
C#实现基于ffmpeg加虹软的人脸识别的示例
关于人脸识别 目前的人脸识别已经相对成熟,有各种收费免费的商业方案和开源方案,其中OpenCV很早就支持了人脸识别,在我选择人脸识别开发库时,也横向对比了三种库,包括在线识别的百度.开源的OpenCV和商业库虹软(中小型规模免费). 百度的人脸识别,才上线不久,文档不太完善,之前联系百度,官方也给了我基于Android的Example,但是不太符合我的需求,一是照片需要上传至百度服务器(这个是最大的问题),其次,人脸的定位需要自行去实现(捕获到人脸后上传进行识别). OpenCV很早以前就用过,
-
iOS利用CoreImage实现人脸识别详解
前言 CoreImage是Cocoa Touch中一个强大的API,也是iOS SDK中的关键部分,不过它经常被忽视.在本篇教程中,我会带大家一起验证CoreImage的人脸识别特性.在开始之前,我们先要简单了解下CoreImage framework 组成 CoreImage framework组成 Apple 已经帮我们把image的处理分类好,来看看它的结构: 主要分为三个部分: 1.定义部分:CoreImage 和CoreImageDefines.见名思义,代表了CoreImage 这个
-
如何基于webRTC实现人脸识别功能
目录 前言 安装rust 构建tauri应用 添加人脸识别API 总结 前言 首先我们需要先了解一下什么是webRTC 他能做什么 webRTC主要是帮我们处理多媒体应用,如音视频通话,屏幕共享都可以实现,主要基于浏览器API调用,其底层浏览器会调用native C++ 等一些库帮我们实现的,而我们在应用层掉API 即可. 桌面程序我们选择 tauri 而不是 electron 体积更小 electron 的 架构是 将 Node.js 集成到 Chromium 中 因此啥也不写打包完之后体积也
-
OpenCV实现人脸识别
主要有以下步骤: 1.人脸检测 2.人脸预处理 3.从收集的人脸训练机器学习算法 4.人脸识别 5.收尾工作 人脸检测算法: 基于Haar的脸部检测器的基本思想是,对于面部正面大部分区域而言,会有眼睛所在区域应该比前额和脸颊更暗,嘴巴应该比脸颊更暗等情形.它通常执行大约20个这样的比较来决定所检测的对象是否为人脸,实际上经常会做上千次. 基于LBP的人脸检测器基本思想与基于Haar的人脸检测器类似,但它比较的是像素亮度直方图,例如,边缘.角落和平坦区域的直方图. 这两种人脸检测器可通过训练大的图
-
Python人脸识别初探
本文实例为大家分享了Python人脸识别的具体代码,供大家参考,具体内容如下 1.利用opencv库 sudo apt-get install libopencv-* sudo apt-get install python-opencv sudo apt-get install python-numpy 2 .Python实现 import os import os from PIL import Image,ImageDraw import cv def detect_object(image
-
android实现人脸识别技术的示例代码
1.前沿 人工智能时代快速来临,其中人脸识别是当前比较热门的技术,在国内也越来越多的运用,例如刷脸打卡,刷脸APP,身份识别,人脸门禁等.当前的人脸识别技术分为WEBAPI和SDK调用两种方式,WEBAPI需要实时联网,SDK调用可以离线使用. 本次使用的虹软提供的人脸识别的SDK,此SDK也可根据不同应用场景设计,针对性强.包括人脸检测.人脸跟踪.人脸识别,即使在离线环境下也可正常运行. 虹软公司是一家具有硅谷背景的图像处理公司,除了人脸技术以外,还有多项图像及视频处理技术.他们的双摄像头处理
-
python实现人脸识别经典算法（一） 特征脸法
近来想要做一做人脸识别相关的内容,主要是想集成一个系统,看到opencv已经集成了三种性能较好的算法,但是还是想自己动手试一下,毕竟算法都比较初级. 操作环境:python2.7 第三方库:opencv for python.numpy 第一种比较经典的算法就是特征脸法,本质上其实就是PCA降维,这种算法的基本思路是,把二维的图像先灰度化,转化为一通道的图像,之后再把它首尾相接转化为一个列向量,假设图像大小是20*20的,那么这个向量就是400维,理论上讲组织成一个向量,就可以应用任何机器学习算