人臉注冊(cè)、人臉?biāo)阉魇褂冒俣華I接口。不支持H5活體檢測(需要活體檢測請(qǐng)參考百度AI-H5活體檢測)

只是為了演示。所以是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)行視頻中的人臉檢測。更多功能自行閱讀文檔)

簡易流程圖

示例圖(先看下效果)

用戶名為空提示

百度AI人臉注冊(cè)需要userid groupid 演示功能 直接寫固定的值 userid是UUID生成的一個(gè)字符串。大家根據(jù)實(shí)際情況更改即可

圖片不包含人臉

確保圖片中包含人臉即可。未做活體檢測。活體檢測請(qǐng)參考百度AI官方文檔的

人臉注冊(cè)成功

人臉?biāo)阉?/p>

trackingjs提供人臉檢測功能。需要完整面部 缺少下顎也是不行的。搜索是使用百度AI接口。成功搜索返回注冊(cè)給的用戶名稱

無需用戶主動(dòng)拍照。只要攝像頭中包含完整面部即可。同樣也不支持活體檢測

搭建SpringBoot項(xiàng)目

pom配置相關(guān)庫

百度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

#只簡單配置了項(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ù)字、字母、下劃線組成)，長度限制128B

String userId = UUID.randomUUID().toString().replace("-", "").toUpperCase();//用戶id(由數(shù)字、字母、下劃線組成)，長度限制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ù)字、字母、下劃線組成)，長度限制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)確保面部完整,未檢測到請(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)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。