人臉識別安全方便,所以在現在的互聯網產品中隨處可見。它通常用于解鎖、授權、登錄等。雖然使用起來很方便,但是靠自己實現不僅困難而且費時。好在有實力的互聯網廠商給我們提供了現成的SDK,不用簡單幾步就能輕松實現。這里有一個SpringBoot整合百度云實現人臉識別的案例;
原地址:http://dw-z.ink/0V8D2
去年公司參與了某機場建設智能機場的一個項目,人臉登機就是其中一個功能模塊。當時只是寫后臺接口,調用人臉識別設備的api,向閘機發回數據信號,保證這個功能的正常使用。
當時因為項目進度比較緊,手里還有其他項目趕進度,沒有時間分享這個功能的實現。前幾天刷臉進公司大樓,突然想起來應該寫一個類似功能的demo來分享一些個人經驗。當時項目中刷臉的設備終端是購買某AI公司的。當然不能買demo里的那種東西隨便玩,就拿系統刷臉登錄練手。人臉識別解決方案是百度云的。當然,騰訊和阿里在這方面也很牛逼。
需求分析
一、人臉注冊
step1:肖像集。在注冊頁面,用html中的視頻組件和js調用筆記本相機,抓取人像圖片。帶筆記本電腦和臺式機不帶攝像頭的童鞋,請離開,離開。
step2:的肖像被上傳到項目文件夾。頁面上采集的人像數據轉換成bash64字符,傳輸到web后臺。后臺將bash64轉換成圖片上傳到項目文件夾。
step3:將用戶的注冊信息寫入數據庫,并將用戶的照片存儲在path中。
step4:將采集到的人像信息(bash64)上傳到百度云的人臉識別云服務器。這個ps實現也可以線下私有化,有興趣的童鞋可以自己研究。
二、人臉登錄
step1:肖像集。在登錄頁面,用html調用帶有視頻組件和js的筆記本攝像頭,抓取人像圖片。
step2:人像數據傳輸。將捕獲的人臉圖片信息發送回web后臺。
step3:肖像比較。在web后臺實例化調用百度云人臉識別的sdk,將登錄頁面采集的圖像數據與注冊的圖像信息進行比對(這一塊是百度云人臉識別解決方案實現的,也是最好的地方)。如果返回的分數大于95分,就可以實現登錄。
具體實現
好了,序言和需求分析已經嗶嗶響了這么久,接下來就是實現和代碼加載了。
一、人臉注冊
首頁代碼
!DOCTYPEhtml
超文本標記語言
頭
元字符集='UTF八國集團'
標題插入標題此處/標題
styletype='text/css '
/* *解決瀏覽器兼容性問題* */
* { margin:劃:}
html,body { width :100%;身高:100%;}/**/
body { background : URL(img/bg03 . jpg)no-repeat center;}
h1 { color: # ffftext-align : center;行高:80 px;}。媒體{ width:534pxheight:400pxmargin:40pxauto
}
# register { width:200pxheight:50px背景色: # 2196 F3;margin:60pxauto
text-align : center;行高:50 px;color: # fffborder-radius :10 px;}
# canvas { display:none}
#s
huru{width: 200px;height:50px;background-color: #2196f3; margin: 20px auto ;}</style>
</head>
<body>
<h1>百度云人臉注冊</h1>
<div id="shuru">
用戶名:
<input type="text" name="username" id="username"/>
</div>
<div class="media">
<video id="video" width="450" height="300" src="" autoplay></video>
<canvas id="canvas" width="450" height="300"></canvas>
</div>
<button id="register" >確定注冊</button>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/**調用攝像頭,獲取媒體視頻流**/
var video = document.getElementById('video');
//返回畫布二維畫圖環境
var userContext = canvas.getContext("2d");
var getUserMedia =
//瀏覽器兼容,表示在火狐、Google、IE等瀏覽器都可正常支持
(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
//getUserMedia.call(要調用的對象,約束條件,調用成功的函數,調用失敗的函數)
getUserMedia.call(navigator,{video: true,audio: false},function(localMediaStream){
//獲取攝像頭捕捉的視頻流
video.srcObject=localMediaStream;
},function(e){
console.log("獲取攝像頭失?。?!")
});
//點擊按鈕注冊事件
var btn = document.getElementById("register");
btn.onclick = function () {
var username = $("#username").val();
alert($("#username").val());
if(username != null){
//點擊按鈕時拿到登陸者面部信息
userContext.drawImage(video,,,450,300);
var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
//拿到bash64格式的照片信息
var faceBase = userImgSrc.split(",")[1];
//ajax異步請求
$.ajax({
url: "register",
type: "post",
data: {"faceBase": faceBase,
"userName": username
},
success: function(result){
if(result === '1'){
alert("注冊成功??!,點擊確認跳轉至登錄頁面");
window.location.href="toLogin";
}else if(result === '2'){
alert("您已經注冊過啦??!");
}else{
alert("系統錯誤??!");
}
}
})
}else{
alert("用戶名不能為空");
}
}
</script>
</body>
</html>
頁面截圖,本人太帥,先行打碼,嘿嘿

后臺具體代碼如下:
private static final String APP_ID = "****";
private static final String API_KEY = "*******";
private static final String SECRET_KEY = "*******";
@Autowired
private IUserService userService;
@RequestMapping(value = "register",method = RequestMethod.POST)
public String register(String userName,String faceBase) throws IOException {
if(!StringUtils.isEmpty(userName) && !StringUtils.isEmpty(faceBase)) {
//文件上傳的地址
String upPath = ResourceUtils.getURL("classpath:").getPath()+"static\\photo";
//用于查看路徑是否正確
System.out.println(upPath);
// 圖片名稱
String fileName = userName+System.currentTimeMillis() + ".png";
System.out.println(upPath+"\\"+fileName);
File file = new File(upPath+"\\"+fileName);
//初始化百度云的AipFace
AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
//往自己demo數據庫里插入一條用戶數據
Users user = new Users();
user.setUserName(userName);
user.setUserPhoto(upPath+"\\"+fileName);
Users exitUser = userService.selectUserByName(user);
if(exitUser != null) {
return "2";
}
userService.addUsers(user);
// 往自己demo服務器里面上傳攝像頭捕獲的圖片
GenerateImage(faceBase, file);
//向百度云人臉庫插入一張人臉
facesetAddUser(client,faceBase,userName);
}
return "1";
}
APP_ID
、API_KEY
、SECRET_KEY
三個參數分別為百度云人臉識別上面的三個數據項,如下圖


點擊完注冊按鈕后,就會得到以下的數據
用戶信息
包含用戶名,本地文件地址
本地文件
云端人臉數據
到這里,一個用戶就算注冊成功了,個人這張大帥臉也算是錄進去了,下面就是刷臉登錄了。
二、刷臉登錄
當我注冊完后就會進入登錄頁面

這時我點擊登錄按鈕,js觸發后臺方法,具體入下:
@RequestMapping(value = "login",method = RequestMethod.POST)
public String login(String faceBase) {
String faceData = faceBase;
//進行人像數據對比
AipFace client = new AipFace(APP_ID,API_KEY,SECRET_KEY);
Double num = verifyUser(faceData,client);
if(num>95) {
return "1";
}else {
return "2";
}
}
/**
* 人臉比對
* @param imgBash64 照片轉bash64格式
* @param imgType 類型
* @param groupList 百度云人臉識別用戶組
* @return
*/
public Double verifyUser(String imgBash64,AipFace client) {
// 傳入可選參數調用接口
HashMap<String, String> options = new HashMap<String, String>();
JSONObject res = client.search(imgBash64, "BASE64", "user_01", options);
System.out.println(res.toString(2));
System.out.println(res.getJSONObject("result"));
System.out.println(res.getJSONObject("result").getJSONArray("user_list"));
JSONObject user = (JSONObject) res.getJSONObject("result").getJSONArray("user_list").get();
Double score = (Double) user.get("score");
return score;
}
接著我正面面對攝像頭,點擊登錄按鈕,就進入了一個大大的success頁面

我側臉或者拿照片試一下,不好意思,您老只能是404了

以上就是整個實現的思路和一些步驟了,綜合而言實現還是比較簡單的,牛逼的地方都在人家百度云那邊呢,咱們只是根據需求合理利用人家的解決方案罷了。其實如果不是很牛逼的專項技術研發公司,做項目能合理利用別人的產品是最有效率的,項目建設最重要的還是投入產出比嘛。與其自己團隊苦苦研究,花點成本買人家的成品直接用它不香嗎?
完