java 百度账号注册界面_基于百度AI使用H5实现调用摄像头进行人脸注册、人脸搜索功能(Java)...
人臉注冊(cè)、人臉?biāo)阉魇褂冒俣華I接口。不支持H5活體檢測(cè)(需要活體檢測(cè)請(qǐng)參考百度AI-H5活體檢測(cè))
只是為了演示。所以是IP。最好用火狐瀏覽器訪問。谷歌提示異常作者就不專門修改了。大家可以直接下載源碼運(yùn)行體驗(yàn)的
前期準(zhǔn)備工作
1.http://ai.ai/注冊(cè)賬戶 實(shí)名認(rèn)證 創(chuàng)建人臉應(yīng)用 保存APPID、APIKEY、SECRETKEY三個(gè)值備用
2.需要必須的Java經(jīng)驗(yàn)(最好是會(huì)用SpringBoot、Maven)
3.https://trackingjs.com/了解一下trackingjs(進(jìn)行視頻中的人臉檢測(cè)。更多功能自行閱讀文檔)
簡(jiǎn)易流程圖
示例圖(先看下效果)
用戶名為空提示
百度AI人臉注冊(cè)需要userid groupid 演示功能 直接寫固定的值 userid是UUID生成的一個(gè)字符串。大家根據(jù)實(shí)際情況更改即可
圖片不包含人臉
確保圖片中包含人臉即可。未做活體檢測(cè)。活體檢測(cè)請(qǐng)參考百度AI官方文檔的
人臉注冊(cè)成功
人臉?biāo)阉?/p>
trackingjs提供人臉檢測(cè)功能。需要完整面部 缺少下顎也是不行的。搜索是使用百度AI接口。成功搜索返回注冊(cè)給的用戶名稱
無需用戶主動(dòng)拍照。只要攝像頭中包含完整面部即可。同樣也不支持活體檢測(cè)
搭建SpringBoot項(xiàng)目
pom配置相關(guān)庫(kù)
百度SDK、fastjson、thymeleaf必不可少
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
4.0.0
cn.xsshome
faceRecognition
jar
faceRecognition
http://maven.apache.org
org.springframework.boot
spring-boot-starter-parent
2.0.4.RELEASE
UTF-8
2.7.0
com.alibaba
fastjson
1.2.35
org.springframework
springloaded
1.2.6.RELEASE
org.springframework.boot
spring-boot-devtools
org.springframework.boot
spring-boot-starter
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-starter-actuator
org.springframework.boot
spring-boot-starter-thymeleaf
log4j
log4j
1.2.17
com.baidu.aip
java-sdk
4.10.0
org.springframework.boot
spring-boot-maven-plugin
true
application.yml配置
server:
port: 8888
#只簡(jiǎn)單配置了項(xiàng)目啟動(dòng)端口
FaceManagerController(人臉注冊(cè)、搜索)
package cn.xsshome.controller;
import java.util.HashMap;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.baidu.aip.face.AipFace;
import cn.xsshome.common.FactoryUtil;
import cn.xsshome.vo.FacePageBean;
import cn.xsshome.vo.FacePageResponse;
import cn.xsshome.vo.response.FaceSerachResponse;
/**
* 人臉照片注冊(cè)方法
* @author 小帥丶
*
*/
@Controller
@RequestMapping("/facemanager")
public class FaceManagerController {
//人臉模塊對(duì)象
AipFace aipFace = FactoryUtil.getAipFace();
private static Logger log = LoggerFactory.getLogger(FaceManagerController.class);
/**
* 人臉注冊(cè)
* @param facePageBean 請(qǐng)求的參數(shù)對(duì)象
* @param request
* @param response
* @return
*/
@PostMapping("/add")
@ResponseBody
public String addFace(FacePageBean facePageBean,HttpServletRequest request, HttpServletResponse response){
log.info("發(fā)送過來的參數(shù){}",JSONObject.toJSONString(facePageBean));
FacePageResponse facePageResponse = new FacePageResponse();
if(facePageBean.getUser_info().equals("")||null==facePageBean.getUser_info()){
facePageResponse.setError_code("100");
facePageResponse.setError_msg("用戶名稱為空 請(qǐng)?zhí)顚懞笾卦?#34;);
return JSON.toJSONString(facePageResponse);
}else{
String groupId = "xsdemo";//記得替換成自己的或通過頁面?zhèn)鬟f用戶組id(由數(shù)字、字母、下劃線組成),長(zhǎng)度限制128B
String userId = UUID.randomUUID().toString().replace("-", "").toUpperCase();//用戶id(由數(shù)字、字母、下劃線組成),長(zhǎng)度限制128B
HashMap options = new HashMap();
options.put("user_info","小帥丶");
org.json.JSONObject resultObject = aipFace.addUser(facePageBean.getImgdata(), "BASE64", groupId, userId, options);
log.info("注冊(cè)返回的數(shù)據(jù){}",resultObject.toString(2));
return resultObject.toString();
}
}
/**
* 人臉?biāo)阉?/p>
* @param facePageBean 請(qǐng)求的參數(shù)對(duì)象
* @param request
* @param response
* @return
*/
@PostMapping("/search")
@ResponseBody
public FacePageResponse searchFace(FacePageBean facePageBean,HttpServletRequest request, HttpServletResponse response){
FacePageResponse facePageResponse = new FacePageResponse();
log.info("發(fā)送過來的參數(shù){}",JSONObject.toJSONString(facePageBean));
String groupIdList = "xsdemo";//用戶組id(由數(shù)字、字母、下劃線組成),長(zhǎng)度限制128B
org.json.JSONObject resultObject = aipFace.search(facePageBean.getImgdata(), "BASE64", groupIdList, null);
//使用fastjson處理返回的內(nèi)容 直接用javabean接收 方便取值
FaceSerachResponse faceSerachResponse = JSON.parseObject(resultObject.toString(), FaceSerachResponse.class);
if("0".equals(faceSerachResponse.getError_code())&&"SUCCESS".equals(faceSerachResponse.getError_msg())){
if(faceSerachResponse.getResult().getUser_list().get(0).getScore()>80f){
facePageResponse.setError_code(faceSerachResponse.getError_code());
facePageResponse.setError_msg(faceSerachResponse.getError_msg());
facePageResponse.setUser_info(faceSerachResponse.getResult().getUser_list().get(0).getUser_info());
}else{
facePageResponse.setError_code("555");
facePageResponse.setError_msg("人臉?biāo)阉魇?#xff0c;請(qǐng)重試或請(qǐng)先注冊(cè)");
}
}else{
facePageResponse.setError_code("500");
facePageResponse.setError_msg(faceSerachResponse.getError_msg());
}
log.info("搜索返回的數(shù)據(jù){}",resultObject.toString(2));
return facePageResponse;
}
}
頁面代碼
人臉注冊(cè)頁面
人臉注冊(cè)body {
background: url('../img/AI3.jpg') no-repeat;
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
}
人臉注冊(cè)
拍照
用戶名稱:
上傳
/*
var ctx = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
var aVideo = document.getElementById('video');
var aCanvas = document.getElementById('canvas');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia; //獲取媒體對(duì)象(這里指攝像頭)
navigator.getUserMedia({
video: true
}, gotStream, noStream); //參數(shù)1獲取用戶打開權(quán)限;參數(shù)二是一個(gè)回調(diào)函數(shù),自動(dòng)傳入視屏流,成功后調(diào)用,并傳一個(gè)視頻流對(duì)象,參數(shù)三打開失敗后調(diào)用,傳錯(cuò)誤信息
function gotStream(stream) {
// video.src = URL.createObjectURL(stream); // 老寫法
aVideo.srcObject = stream;
aVideo.onerror = function() {
stream.stop();
};
stream.onended = noStream;
aVideo.onloadedmetadata = function() {
console.info('攝像頭成功打開!');
};
}
function noStream(err) {
alert(err);
}
function Shoot() {
var context = canvas.getContext('2d');
//把當(dāng)前視頻幀內(nèi)容渲染到畫布上
context.drawImage(aVideo, 0, 5, 320,160);
}
//將圖片下載到本地
function download() {
var userInfo = $('#user_info').val();
var dom = document.createElement("a");
dom.href = this.canvas.toDataURL("image/png");
dom.download = new Date().getTime() + ".png";
dom.click();
//刪除字符串前的提示信息 "data:image/png;base64,"
var data = aCanvas.toDataURL();
var?b64?=?data.substring(22);
var path = ctx+"/facemanager/add";
var name = new Date().getTime() + ".png";
var context = canvas.getContext('2d');
$.ajax({
type : 'post',
dataType : 'json',
url : path,
data : {
imgdata:b64,
imgname:name,
user_info:userInfo,
},
success : function(result){
if(result.error_msg=='SUCCESS'){
layer.open({
title: '溫馨提示',
content: '人臉用戶注冊(cè)成功',
yes: function(index, layero){
layer.close(index); //如果設(shè)定了yes回調(diào),需進(jìn)行手工關(guān)閉
}
});
}else{
layer.open({
title: '溫馨提示',
content: "注冊(cè)失敗:"+result.error_msg,
yes: function(index, layero){
//把畫布上的圖清空
context.clearRect(0, 5, 320,160);
layer.close(index); //如果設(shè)定了yes回調(diào),需進(jìn)行手工關(guān)閉
}
});
}
}
})
}
人臉?biāo)阉黜撁?/p>
trackerTask.stop();為防止人臉?biāo)阉鹘涌谡{(diào)用中 多次提交問題。
人臉識(shí)別請(qǐng)確保面部完整,未檢測(cè)到請(qǐng)靠近攝像頭
/*
var ctx = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/
window.onload = function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var canvas1 = document.getElementById('canvas1');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event) {
if(event.data.length===0){
console.info('無人臉');
context.clearRect(0, 0, canvas.width, canvas.height);
}else{
event.data.forEach(function(rect) {
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
Shoot();
});
}
});
var gui = new dat.GUI();
gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
gui.add(tracker, 'stepSize', 1, 5).step(0.1);
function Shoot() {
var trackerTask = tracking.track(video, tracker);
var context = canvas1.getContext('2d');
//把當(dāng)前視頻幀內(nèi)容渲染到畫布上
context.drawImage(video, 0, 5, 320, 140);
var dom = document.createElement("a");
dom.href = this.canvas.toDataURL("image/png");
dom.download = new Date().getTime() + ".png";
dom.click();
//刪除字符串前的提示信息 "data:image/png;base64,"
var data = canvas1.toDataURL();
var b64 = data.substring(22);
var path = ctx+"/facemanager/search";
$.ajax({
type : 'post',
dataType : 'json',
url : path,
data : {
imgdata:b64
},
success : function(result){
if(result.error_code=='0'){
trackerTask.stop();
layer.open({
title: '溫馨提示',
content: '歡迎 '+result.user_info,
yes: function(index, layero){
trackerTask.run();
layer.close(index); //如果設(shè)定了yes回調(diào),需進(jìn)行手工關(guān)閉
}
});
}else{
trackerTask.stop();
layer.open({
title: '溫馨提示',
content: result.error_msg,
yes: function(index, layero){
trackerTask.run();
layer.close(index); //如果設(shè)定了yes回調(diào),需進(jìn)行手工關(guān)閉
}
});
}
}
})
}
};
總結(jié)
以上是生活随笔為你收集整理的java 百度账号注册界面_基于百度AI使用H5实现调用摄像头进行人脸注册、人脸搜索功能(Java)...的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: BUUCTF-Reverce:不一样的f
- 下一篇: 矩形分割(洛谷P1324题题解,Java