百度人脸识别java html5
1、前端thymeleaf+h5
index.html 人脸识别+定位，用的百度sdk
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="farvirate.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" th:href="@{/static/html5/font-awesome-4.7.0/css/font-awesome.min.css}" />
<link type="text/css" rel="stylesheet" th:href="@{/static/html5/animate.min.css}" />
<link type="text/css" rel="stylesheet" th:href="@{/static/html5/home.css}" />
<link type="text/css" rel="stylesheet" th:href="@{/static/html5/swiper-3.4.2.min.css}" />
<script type="text/javascript" th:src="@{/static/easyui/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/layer-3.1.1/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/static/html5/swiper-3.4.2.jquery.min.js}"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=C93b5178d7a8ebdb830b9b557abce78b"></script>
</head>
<body>
<canvas width="620px" id="canvas" height="720px" style="display: none;"></canvas>
<input id="reg_id" type="hidden" th:value="${reg_id}" />
<div id="allmap" style="display:none;"></div>
<div class="swiper-container swiper-no-swiping">
<div class="swiper-wrapper">
<div class="swiper-slide searchBox">
<div class="search">
<div class="sTop">
<h2>
<span>在线</span>报到
</h2>
</div>
<i class="fa fa-search sIcon"></i>
<!-- <input type="text" placeholder="请输入身份证号" /> -->
<input id="idcard" name="idcard" type="text" placeholder="请输入身份证号" value="">
<button id="next" onclick="nextSwiper(1);">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
<div class="swiper-slide white">
<div class="infor">
<div class="header"></div>
<div class="inforTop clearfix">
<div class="userImg">
<img id="admission_photo" th:src="@{/static/html5/images/djz.jpg}" />
</div>
<div class="userInfor">
<h3>
<i class="fa fa-vcard"></i><span id="name"></span><b id="gender"></b>
</h3>
<p class="clearfix">
<label>学号</label><span id="student_id"></span>
</p>
<p>
<label>专业</label><span id="major_name"></span>
</p>
<p>
<label>班级</label><span id="class_name"></span>
</p>
</div>
</div>
<div class="inforCon basic">
<h3>
<span>基本信息</span>
</h3>
<table cellpadding="0" cellspacing="0" width="100%"
class="inforTable">
<tr>
<td>出生日期</td>
<td><span id="date_birth"></span></td>
<td>籍贯</td>
<td><span id="hometown"></span></td>
</tr>
<tr>
<td>身份证号</td>
<td colspan="3"><span id="id_number"></span></td>
</tr>
<tr>
<td>政治面貌</td>
<td><span id="political_affiliation">团员</span></td>
<td>民族</td>
<td><span id="nation">汉族</span></td>
</tr>
<tr>
<td>家庭地址</td>
<td colspan="3"><span id="family_address"></span></td>
</tr>
</table>
</div>
</div>
<button id="cameraBtn" class="check" onclick="">确认信息并进行身份验证</button>
</div>
<div class="swiper-slide">
<div class="topBg">
<div class="videoBox">
<!-- <video id="webcam" class="myVideo"></video> -->
<video id="webcam" class="myVideo" autoplay playsinline></video>
</div>
<div class="borderBox"></div>
<div class="fgBg"></div>
</div>
<div class="bottomBg girl"></div>
<div id="demo"></div>
<!-- <button class="check" onclick="getCurLocation()">开始验证</button> -->
<button class="check" onclick="getFaceImg();">开始验证</button>
</div>
</div>
<!-- 遮罩层DIV -->
<div id="overlay" class="overlay"></div>
<!-- Loading提示 DIV -->
<div id="loadingTip" class="loading-tip">
<img th:src="@{/static/html5/images/loading.gif}" />
</div>
</div>
<script type="text/javascript">
var studentInfo;
var index;
var pos;
var basePath = '[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]';
var regEx = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
var swiper = new Swiper('.swiper-container', {
simulateTouch : false,
onSlideChangeStart: function(swiper){
var currentIndex = swiper.clickedIndex
var activeIndex = swiper.activeIndex;
if(currentIndex==0 && activeIndex==1){//第一页，滑动到第二页，校验身份证号码
var result = checkIdCard();
if(!result){
layer.msg("请输入正确的身份证号码");
//alert("请输入正确的身份证号码");
return;
}else{
nextSwiper(activeIndex);
}
}
}
});
const video = document.getElementById('webcam');
const button = document.getElementById('cameraBtn');
let currentStream;
button.addEventListener('click', event => {
nextSwiper(2);
var constraints = {
video: {'facingMode': "user"},
audio: false
};
navigator.mediaDevices
.getUserMedia(constraints)
.then(stream => {
currentStream = stream;
video.srcObject = stream;
return navigator.mediaDevices.enumerateDevices();
})
.catch(error => {
console.error(error);
});
}); function checkIdCard(){
var idcard = $('#idcard').val();//获取用户输入的身份证号码
var result = regEx.test(idcard);
return result;
}
//填好身份证，点按钮或滑动，滑动到第二个页面
function nextSwiper(index) {
//滑动前，获取第二个页面学生信息;
if (index === 1) {
var result = checkIdCard();
if(!result){
layer.msg("请输入正确的身份证号码");
//alert("请输入正确的身份证号码");
}else{
$.ajax({
url : basePath + '/h5/getStudentInfo',
async : false,
cache : false,
data : {
"idcard" : $('#idcard').val()
},
error : function(result) {// 请求失败处理函数
layer.msg(result.msg);
//alert(result.msg);
},
success : function(result) { //请求成功后处理函数
debugger;
studentInfo = result;
swiper.slideTo(index);
//将获取的学生信息赋值
if (result.admission_photo) {
$('#admission_photo').attr("src",basePath + "/uploadImg/admission_photo/"+ result.admission_photo);
}
$('#name').html(result.name);
$('#gender').text(result.gender);
$('#student_id').html(result.student_id);
$('#major_name').html(result.major_name);
$('#class_name').html(result.class_name);
//基本信息
$('#date_birth').html(result.date_birth);
$('#hometown').html(result.hometown);
$('#id_number').html(result.id_number);
$('#political_affiliation').html(result.political_affiliation);
$('#nation').html(result.nation);
$('#family_address').html(result.family_address);
}
})
}
} else if (index === 2) {//滑到
swiper.slideTo(index);
startFace();
}
} function startFace() {
navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia; if (navigator.getUserMedia) {
navigator.getUserMedia({
audio : false,
video : {
width : 400,
height : 400,
facingMode : "user"
}
}, function(stream) {
debugger;
var video = document.querySelector('video');
try {
video.src = window.URL.createObjectURL(stream);
} catch (e) {
console.log(e);
video.srcObject = stream; //注意，不同版本video.src和video.srcObject两种
}
video.onloadedmetadata = function(e) {
video.play();
}; }, function(err) {
console.log("The following error occurred: " + err.name);
});
} else {
console.log("getUserMedia not supported");
}
}
//获取视频中人脸，转换成图片，发送后台请求，识别图片
function getFaceImg() {
showLoading();
debugger;
var video = document.querySelector('video');
var canvasObj = document.querySelector('canvas')
var context1 = canvasObj.getContext('2d');
context1.fillStyle = "#000000";
context1.fillRect(0, 0, 300, 300);
context1.drawImage(video, 0, 0, 300, 300); var url = canvasObj.toDataURL(); //toDataURL()获取的数据有images前缀，要split取后面一部分传给后台，后台直接用
var face = url.split(",")[1];
$('#idcard').val(studentInfo.id_number);
$.ajax({
url: basePath+'/h5/checkFace',
type:"POST",
async: false,
cache: false,
data: {"face":face,"idcard":studentInfo.id_number},
success: function(data) {
hideLoading();
debugger;
var data = $.parseJSON(data);
if(data.success){
registerFun();
}else{
var msg = data.msg;
if('不是待报到学生'==msg){
//关闭当前人脸识别页面，避免人脸识别百度接口多次调用，产生多次费用
window.close();
}else{
layer.msg(msg);
}
}
},
error:function(msg) {
console.log(msg);
}
});
}
//base64转换为Blob
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(",")[0].indexOf("base64") >= 0)
byteString = atob(base64Data.split(",")[1]);
else
byteString = unescape(base64Data.split(",")[1]);
var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ ia ], {
type : mimeString
});
}
var geolocation = new BMap.Geolocation();
var gc = new BMap.Geocoder();
var map = new BMap.Map("allmap");
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var pt = r.point;
gc.getLocation(pt, function(rs){
var address = rs.addressComponents;
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
var latCurrent = r.point.lat;
var lngCurrent = r.point.lng;
var myPoint = new BMap.Point(lngCurrent, latCurrent);
debugger;
pos = {
lat : latCurrent,
lng : lngCurrent,
nation : address.nation==undefined?null:address.nation,
province : address.province==undefined?null:address.province,
city : address.city==undefined?null:address.city,
district : address.district==undefined?null:address.district,
street : address.street==undefined?null:address.street,
streetNumber : address.streetNumber==undefined?null:address.streetNumber,
adcode : address.adcode==undefined?null:address.adcode,
address : rs.address==undefined?null:rs.address,
business : rs.business==undefined?null:rs.business,
}
});
} else {
alert('failed' + this.getStatus());
}
}, {
enableHighAccuracy : true
})
function registerFun(){
var data={};
data["reg_id"]=$('#reg_id').val();
data["complete"]="报到成功";
data["location"]=pos;
data["step_id"]="4";
data["school_address"]=null;
$.ajax({
url : basePath+'/h5/registe',
method: "POST",
dataType: "json",
contentType: "application/json;charset=utf-8",
async: false,
data:JSON.stringify(data),
error : function(result) {// 请求失败处理函数
alert(result.msg);
},
success : function(result) { //请求成功后处理函数
debugger;
if (result.success) {
window.close(); layer.msg('报到成功', {icon: 1});
//sleep 1秒钟，再关闭，让用户能看到提示消息
var start = (new Date()).getTime();
while ((new Date()).getTime() - start < 1000) {
continue;
}
window.close();
}else {
layer.msg('报到失败', {icon: 1});
}
}
})
}
/**
* 显示遮罩层
*/
function showOverlay() {
// 遮罩层宽高分别为页面内容的宽高
$('.overlay').css({'height':$(document).height(),'width':$(document).width()});
$('.overlay').show();
}
/**
* 显示Loading提示
*/
function showLoading() {
// 先显示遮罩层
showOverlay();
// Loading提示窗口居中
$("#loadingTip").css('top',
(getWindowInnerHeight() - $("#loadingTip").height()) / 2 + 'px');
$("#loadingTip").css('left',
(getWindowInnerWidth() - $("#loadingTip").width()) / 2 + 'px'); $("#loadingTip").show();
$(document).scroll(function() {
return false;
});
}
/**
* 隐藏Loading提示
*/
function hideLoading() {
$('.overlay').hide();
$("#loadingTip").hide();
$(document).scroll(function() {
return true;
});
}
//浏览器兼容 取得浏览器可视区高度
function getWindowInnerHeight() {
var winHeight = window.innerHeight
|| (document.documentElement && document.documentElement.clientHeight)
|| (document.body && document.body.clientHeight);
return winHeight;
}
// 浏览器兼容 取得浏览器可视区宽度
function getWindowInnerWidth() {
var winWidth = window.innerWidth
|| (document.documentElement && document.documentElement.clientWidth)
|| (document.body && document.body.clientWidth);
return winWidth;
}
</script>
</body>
</html>
后台Controller
@ResponseBody
@RequestMapping(value = "/h5/checkFace", method = RequestMethod.POST)
public Object checkFace(String face, String idcard) {
try {
//1.在线活体检测
boolean isLive = FaceUtil.faceverify(faceProperties.getAipFace(), face);
if (isLive) {// 检测到是人脸，继续搜索是谁的脸
// 2.人脸搜索
org.json.JSONObject res = FaceUtil.search(faceProperties.getAipFace(), face);
System.out.println(res.toString(2));
String msg = String.valueOf(res.get("error_msg"));
if ("SUCCESS".equals(msg)) { //TODO 3.找到人脸，怕有误差，进一步判断身份证号码
/*JSONObject result = res.getJSONObject("result");
JSONArray users = result.getJSONArray("user_list");
Gson gson = new Gson();
UserInfo userInfo = gson.fromJson(users.get(0).toString(), UserInfo.class);
System.out.println(userInfo); if(idcard.equals(userInfo.getIdcard())){
return renderSuccess("检测成功");
}else {
return renderError("身份证号码不匹配");
}*/ return renderSuccess("检测成功");
} else {
return renderError("没有搜索到匹配的人脸图像");
}
} else {
return renderError("没有检测到有效的人脸图像");
}
} catch (JsonSyntaxException e) {
e.printStackTrace();
return renderError("检测失败");
} catch (JSONException e) {
e.printStackTrace();
return renderError("检测失败");
}
}
人脸识别工具类：调用百度接口
public class FaceUtil {
static BASE64Encoder encoder = new sun.misc.BASE64Encoder();
static BASE64Decoder decoder = new sun.misc.BASE64Decoder();
static String imageType = "BASE64";
/**
* 图片路径编码成字符串
* @param image
* @return
*/
public static String getImageBinary(String image) {
File f = new File(image);
try {
BufferedImage bi = ImageIO.read(f);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(bi, "jpg", baos);
byte[] bytes = baos.toByteArray();
return encoder.encodeBuffer(bytes).trim();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
/**
* 查询所有组列表
* @param client
* @return
*/
public static String getGroup(AipFace client) {
// 传入可选参数调用接口
try {
HashMap<String, String> options = new HashMap<String, String>();
options.put("start", "0");
options.put("length", "50");
// 组列表查询
JSONObject res = client.getGroupList(options);
String msg = res.getString("error_msg");
if ("SUCCESS".equals(msg)) {
JSONObject arr = res.getJSONObject("result");
JSONArray list = arr.getJSONArray("group_id_list");
String groupIdList = list.join(",");
groupIdList = groupIdList.replace("\",\"", ",");
groupIdList = groupIdList.replace("\"", "");
System.out.println("获取分组："+groupIdList);
return groupIdList;
}
return null;
} catch (JSONException e) {
e.printStackTrace();
return null;
}
}
/**
* 在线活体检测
* @param client
* @param face
* @return
*/
public static boolean faceverify(AipFace client,String face) {
//在线活体检测
try {
FaceVerifyRequest req = new FaceVerifyRequest(face,imageType);
ArrayList<FaceVerifyRequest> list = new ArrayList<FaceVerifyRequest>();
list.add(req);
JSONObject res = client.faceverify(list);
String msg = String.valueOf(res.get("error_msg"));
if("SUCCESS".equals(msg)) {
return true;
}
return false;
} catch (JSONException e) {
e.printStackTrace();
return false;
}
}
/**
* 人脸搜索：在所有分组库中搜索，不存在，返回result为空,存在返回分数最高的排名max_user_num个用户信息
* @param client
* @param face
* @return
*/
public static JSONObject search(AipFace client,String face) {
HashMap<String, String> options = new HashMap<String, String>();
options.put("max_face_num", "1");
options.put("match_threshold", "70");
options.put("quality_control", "NORMAL");
options.put("liveness_control", "LOW");
options.put("max_user_num", "1");
String groupIdList = getGroup(client);
System.out.println("groupIdList:"+groupIdList);
// 人脸搜索
try {
JSONObject res = client.search(face, imageType, groupIdList, options);
System.out.println(res.toString(2));
return res;
} catch (JSONException e) {
e.printStackTrace();
return null;
}
}
}
要引入maven包：
<dependency>
<groupId>com.baidu.aip</groupId>
<artifactId>java-sdk</artifactId>
<version>4.11.3</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.5</version>
</dependency>
swiper
simulateTouch : false 禁止滑动，只对PC有用，对移动端无效
百度人脸识别java html5的更多相关文章
- 百度人脸识别api及face++人脸识别api测试(python)
一．百度人脸识别服务 1.官方网址:http://apistore.baidu.com/apiworks/servicedetail/464.html 2.提供的接口包括: 2.1 多人脸比对:请求多 ...
- 基于Emgu CV+百度人脸识别，实现视频动态 人脸抓取与识别
背景 目前AI 处于风口浪尖,作为 公司的CTO,也作为自己的技术专研,开始了AI之旅,在朋友圈中也咨询 一些大牛对于AI 机器学习框架的看法,目前自己的研究方向主要开源的 AI 库,如:Emgu C ...
- C# 30分钟完成百度人脸识别——进阶篇（文末附源码）
距离上次入门篇时隔两个月才出这进阶篇,小编惭愧,对不住关注我的卡哇伊的小伙伴们,为此小编用这篇博来谢罪. 前面的准备工作我就不说了,注册百度账号api,创建web网站项目,引入动态链接库引入. 不了解 ...
- Qt封装百度人脸识别+图像识别
AI技术的发展在最近几年如火如荼,工资待遇也是水涨船高,应用的前景也是非常广阔,去年火起来的人脸识别,今年全国遍地开花,之前封装了下face++的人脸识别等接口,今年看了下百度的AI,还免费了,效果也 ...
- 百度人脸识别AI实践.doc
0, 前言 百度开放了很多AI能力,其中人脸识别就是其中之一. 本文对百度人脸识别AI进行实践检验,看看其使用效果如何. 鉴于是最为基础的实践,基本都是在其接口范例代码修改而来. 百度人脸识别AI网站 ...
- uniapp安卓ios百度人脸识别、活体检测、人脸采集APP原生插件
插件亮点 1 支持安卓平板(横竖屏均可),苹果的iPad.2 颜色图片均可更换. 特别提醒 此插件包含 android 端和 iOS 端,考虑到有些同学只做其中一个端的 app,特意分为 2 个插件, ...
- trackingjs+websocket+百度人脸识别API，实现人脸签到
在公司做了个年会的签到.抽奖系统.用java web做的,用公司的办公app扫二维码码即可签到,扫完码就在大屏幕上显示这个人的照片.之后领导让我改得高大上一点,用人脸识别来签到,就把扫二维码的步骤改成 ...
- 日常API之C#百度人脸识别
最近看到一只我家徒儿发来的链接,原来是一堆百度AI的SDK,于是一时兴起就做了一只人脸识别,喵喵喵(●'◡'●) 一.准备工作 首先,当然是下载SDK啦:http://ai.baidu.com/sdk ...
- C# 10分钟完成百度人脸识别——入门篇
嗨咯,小编在此祝大家新年快乐财多多! 今天我们来盘一盘人脸注册.人脸识别等相关操作,这是一个简单入门教程. 话不多说,我们进入主题: 完成人脸识别所需的步骤: 注册百度账号api,创建自己的应用: 创 ...
随机推荐
- 在Ubuntu上安装Intellij IDEA并创建桌面快捷方式
环境信息 版本号 Ubuntu 18.04 LTS Intellij IDEA 2019.1.3 1.首先从官网获取安装包 官方下载地址传送门 然后我就在下载目录下得到了tar.gz的包 2.接下来开 ...
- thinkPHP5 命名空间别名
命名空间别名 对比 use app\index\model\User; 和 use model\User; 关键:\think\Loader::addNamespaceAlias('model','a ...
- outlook寻找/删除指定日期范围内的邮件
总是收到很多系统预警邮件,时间久了攒了好多垃圾邮件.实际上只需保存近期预警邮件,之前的完全可以删除. 上网找了一圈也没找到方法,然后自己想到了一种,步骤如下: 使用outlook规则,将指定日期范围内 ...
- eNSP——配置Trunk接口
原理: 在以太网中,通过划分 VLAN 来隔离广播域和增强网络通信的安全性.以太网通常由多台交换机组成,为了使 VLAN 的数据帧跨越多台交换机传递,交换机之间互连的链路需要设置为干道链路( Trun ...
- vue用echarts 画3d地球 且画线
页面效果如下: 项目结构如下: 引入的包 "dependencies": { "core-js": "^3.3.2", "regi ...
- 《你必须知道的495个C语言问题》读书笔记之第8-10章：字符串、布尔类型和预处理器
一.字符和字符串 1. Q:为什么strcat(string, '!')不行? A:strcat()用于拼接字符串,所以应该写成strcat(string, "!")." ...
- axios对请求各种异常情况处理的封装
前端网络请求封装 前端采用了axios来处理网络请求,为了避免在每次请求时都去判断各种各样的网络情况,比如连接超时.服务器内部错误.权限不足等等不一而足,我对axios进行了简单的封装,这里主要使用了 ...
- Jmeter之JSON Path Extractor的使用（JSON-handle下载安装和使用）
jp@gc - JSON Path Extractor和“正则表达式提取器”使用效果一样. 他的作用单一,只提取json数据 jp@gc - JSON Path Extracto 变量名自己定义,js ...
- 刚接触neo4j 问下 neo4j 生成的节点图形可以发布为纯网页方式么
6 回复 pangguoming 1楼•3 年前 你是想要neo4j web控制端的可视化功能吗? 那是用D3.js 做的,你用前端用D3.js配合Java自己做 或者 去下载neo4j 的前端 开源 ...
- 怎样理解document节点
1. document是七种文档节点中的一种, 是最顶级的一种节点; 2. 其他六种节点都包在document节点之内; 3. document既是一种节点的名字, 也是这种节点在DOM中的实例对象; ...