Java教程：PC人臉識別登入，竟然出乎意料的簡單
最近對寫文章稍稍的有點小牴觸，寫的東西沒人看，有點小失落，還好在粉絲朋友的開導下，調整了下自己的心態，只要我分享的東西對大家有幫助就好，至於多少人看那就隨緣吧！有時候真不能把事兒自己鑽裡面想，越想越出不來！你們也要開開心心的哈！
話不多說先看人臉識別效果動態，馬賽克有點重哈，沒辦法長相實在是拿不出手。
實現原理
我們看一下實現人臉識別登入的大致流程，三個主要步驟：
- 前端登入頁開啟攝像頭，進行人臉識別， 注意：只識別畫面中是不是有人臉
- 識別到人臉後，拍照上傳當前畫面圖片
- 後端接受圖片並呼叫人臉庫SDK，對人像進行比對，透過則登入成功，並將人像資訊註冊到人臉庫和本地mysql。
前端實現
上邊說過要在前端識別到人臉，所以這裡就不得不借助工具了，我使用的 tracking.js，一款輕量級的前端人臉識別框架。
前端 Vue 程式碼實現邏輯比較簡單，tracking.js 開啟攝像頭識別到人臉資訊後，對影片影像拍照，將圖片資訊上傳到後臺，等待圖片對比的結果就可以了。
data() {
return {
showContainer:
true,
// 顯示
tracker:
null,
tipFlag:
false,
// 提示使用者已經檢測到
flag:
false,
// 判斷是否已經拍照
context:
null,
// canvas上下文
removePhotoID:
null,
// 停止轉換圖片
scanTip:
'人臉識別中...',
// 提示文字
imgUrl:
'',
// base64格式圖片
canvas:
null
}
},
mounted() {
this.playVideo()
},
methods: {
playVideo() {
var video =
document.getElementById(
'video');
this.canvas =
document.getElementById(
'canvas');
this.context =
this.canvas.getContext(
'2d');
this.tracker =
new tracking.ObjectTracker(
'face');
this.tracker.setInitialScale(
4);
this.tracker.setStepSize(
2);
this.tracker.setEdgesDensity(
0.1);
tracking.track(
'#video',
this.tracker, {camera:
true});
this.tracker.
on(
'track',
this.handleTracked);
},
handleTracked(event) {
this.context.clearRect(
0,
0,
this.canvas.width,
this.canvas.height);
if (event.data.length ===
0) {
this.scanTip =
'未識別到人臉'
}
else {
if (!
this.tipFlag) {
this.scanTip =
'識別成功，正在拍照，請勿亂動~'
}
//
1秒後拍照，僅拍一次
if (!
this.flag) {
this.scanTip =
'拍照中...'
this.flag =
true
this.removePhotoID = setTimeout(
() => {
this.tackPhoto()
this.tipFlag =
true
},
2000
)
}
event.data.forEach(
this.plot);
}
},
plot(rect){
this.context.strokeStyle =
'#eb652e';
this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);
this.context.font =
'11px Helvetica';
this.context.fillStyle =
"#fff";
this.context.fillText(
'x: ' + rect.x +
'px', rect.x + rect.width +
5, rect.y +
11);
this.context.fillText(
'y: ' + rect.y +
'px', rect.x + rect.width +
5, rect.y +
22);
},
// 拍照
tackPhoto() {
this.context.drawImage(
this.$refs.refVideo,
0,
0,
500,
500)
// 儲存為base64格式
this.imgUrl =
this.saveAsPNG(
this.$refs.refCanvas)
var formData =
new FormData();
formData.append(
"file",
this.imgUrl);
this.scanTip =
'登入中，請稍等~'
axios({
method:
'post',
url:
'/faceDiscern',
data: formData,
}).
then(function (response) {
alert(response.data.data);
window.location.href=
";
}).
catch(function (error) {
console.log(error);
});
this.close()
},
// 儲存為png,base64格式圖片
saveAsPNG(c) {
return c.toDataURL(
'image/png',
0.3)
},
// 關閉並清理資源
close() {
this.flag =
false
this.tipFlag =
false
this.showContainer =
false
this.tracker &&
this.tracker.removeListener(
'track',
this.handleTracked) && tracking.track(
'#video',
this.tracker, {camera:
false});
this.tracker =
null
this.context =
null
this.scanTip =
''
clearTimeout(
this.removePhotoID)
}
}
人臉識別
之前也搞過一個人臉識別案例，不過呼叫SDK的方式太過繁瑣，而且程式碼量巨大。所以這次為了簡化實現，改用了百度的人臉識別API，沒想到出乎意料的簡單。
別抬槓問我為啥不自己寫人臉識別工具，別問，問就是不會
百度雲人臉識別的API非常友好，各種操作的 demo都寫好了，拿過來簡單改改就可以。
第一步先獲取token，這是呼叫百度人臉識別API的基礎。
https:
//aip.baidubce.com/oauth/2.0/token?
grant_type=client_credentials&
client_id=【百度雲應用的AK】&
client_secret=【百度雲應用的SK】
接下來我們開始對圖片進行比對，百度雲提供了一個線上的人臉庫，使用者登入我們先在人臉庫查詢人像是否存在，存在則表示登入成功，如果不存在則註冊到人臉庫。每個圖片有一個唯一標識face_token。
百度人臉識別 API 實現比較簡單，需要特別注意引數image_type，它有三種型別
- BASE64：圖片的base64值，base64編碼後的圖片資料，編碼後的圖片大小不超過2M；
- URL：圖片的 URL地址( 可能由於網路等原因導致下載圖片時間過長)；
- FACE_TOKEN：人臉圖片的唯一標識，呼叫人臉檢測介面時，會為每個人臉圖片賦予一個唯一的
FACE_TOKEN，同一張圖片多次檢測得到的FACE_TOKEN是同一個。
而我們這裡使用的是圖片BASE64檔案，所以image_type要設定成BASE64。
@
Override
public BaiDuFaceSearchResult
faceSearch
(String file) {
try {
byte[] decode = Base64.decode(Base64Util.base64Process(file));
String faceFile = Base64Util.encode(decode);
Map<String, Object>
map =
new HashMap<>();
map.put(
"image", faceFile);
map.put(
"liveness_control",
"NORMAL");
map.put(
"group_id_list",
"user");
map.put(
"image_type",
"BASE64");
map.put(
"quality_control",
"LOW");
String param = GsonUtils.toJson(
map);
String result = HttpUtil.post(faceSearchUrl,
this.getAccessToken(),
"application/json", param);
BaiDuFaceSearchResult searchResult = JSONObject.parseObject(result, BaiDuFaceSearchResult.class);
log.info(
" faceSearch: {}", JSON.toJSONString(searchResult));
return searchResult;
}
catch (Exception e) {
log.error(
"get faceSearch error {}", e.getStackTrace());
e.getStackTrace();
}
return null;
}
@
Override
public BaiDuFaceDetectResult
faceDetect
(String file) {
try {
byte[] decode = Base64.decode(Base64Util.base64Process(file));
String faceFile = Base64Util.encode(decode);
Map<String, Object>
map =
new HashMap<>();
map.put(
"image", faceFile);
map.put(
"face_field",
"faceshape,facetype");
map.put(
"image_type",
"BASE64");
String param = GsonUtils.toJson(
map);
String result = HttpUtil.post(faceDetectUrl,
this.getAccessToken(),
"application/json", param);
BaiDuFaceDetectResult detectResult = JSONObject.parseObject(result, BaiDuFaceDetectResult.class);
log.info(
" detectResult: {}", JSON.toJSONString(detectResult));
return detectResult;
}
catch (Exception e) {
log.error(
"get faceDetect error {}", e.getStackTrace());
e.getStackTrace();
}
return null;
}
@
Override
public BaiDuFaceAddResult
addFace
(String file, UserFaceInfo userFaceInfo) {
try {
byte[] decode = Base64.decode(Base64Util.base64Process(file));
String faceFile = Base64Util.encode(decode);
Map<String, Object>
map =
new HashMap<>();
map.put(
"image", faceFile);
map.put(
"group_id",
"user");
map.put(
"user_id", userFaceInfo.getUserId());
map.put(
"user_info", JSON.toJSONString(userFaceInfo));
map.put(
"liveness_control",
"NORMAL");
map.put(
"image_type",
"BASE64");
map.put(
"quality_control",
"LOW");
String param = GsonUtils.toJson(
map);
String result = HttpUtil.post(addfaceUrl,
this.getAccessToken(),
"application/json", param);
BaiDuFaceAddResult addResult = JSONObject.parseObject(result, BaiDuFaceAddResult.class);
log.info(
"addResult: {}", JSON.toJSONString(addResult));
return addResult;
}
catch (Exception e) {
log.error(
"get addFace error {}", e.getStackTrace());
e.getStackTrace();
}
return null;
}
專案是前後端分離的，但為了大家學習方便，我把人臉識別頁面整合到了後端專案。
夥伴們有不清楚的地方，可以留言~
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69923331/viewspace-2708409/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- IOS人臉識別開發入門教程--人臉檢測篇iOS
- C#人臉識別入門篇-STEP BY STEP人臉識別--入門篇C#
- 如何理解並實現一個簡單的人臉識別演算法（下）：人臉識別演算法
- 64行程式碼實現簡單人臉識別行程
- 一個簡單的人臉識別庫
- 3 分鐘搞定 web 人臉識別登入，這樣式愛了Web
- opencv 人臉識別OpenCV
- OpenCV — 人臉識別OpenCV
- 基於mtcnn/facenet/tensorflow實現人臉識別登入系統CNN
- 3 分鐘寫個 web 人臉識別登入，這樣式愛了Web
- 人臉檢測識別，人臉檢測，人臉識別，離線檢測，C#原始碼C#原始碼
- 一個簡單的完整人臉識別系統
- java實現簡單的單點登入Java
- 利用opencv 做一個簡單的人臉識別OpenCV
- 智慧人臉識別門禁系統開發,人臉識別開鎖流程
- 人臉識別之特徵臉方法（Eigenface）特徵
- 前端人臉識別--兩張臉相似度前端
- 人臉識別之人臉檢測的重要性
- 人臉識別學習筆記一：入門篇筆記
- 人臉活體檢測人臉識別：眨眼+張口
- java 百度人臉識別 介面程式碼Java
- 小米Play有人臉識別功能嗎？小米Play人臉解鎖的設定方法教程
- 虹軟人臉識別SDK - Java服務端的那些事Java服務端
- 乾貨 | AI人臉識別之人臉搜尋AI
- 人臉識別智慧考勤系統開發_人臉識別考勤管理系統開發
- 人臉識別技術應用
- 前端如何玩轉人臉識別前端
- python—呼叫API人臉識別PythonAPI
- 從零玩轉人臉識別
- 小米Note3抬起喚醒人臉識別解鎖教程
- Java 基於ArcFace人臉識別2.0 服務端DemoJava服務端
- WEB 人臉識別並給照片戴上口罩，極簡版Web
- AI+慈善 ▏人臉識別+人臉模擬助力失散親人找到回家的路AI
- python ubuntu dlib人臉識別3-人臉對齊PythonUbuntu
- 保障人臉安全！頂象釋出《人臉識別安全白皮書》
- 人臉識別的簡要介紹（附例項、Python程式碼）Python
- 人臉識別之Python DLib庫進行人臉關鍵點識別Python
- 刷臉支付人臉識別特徵點越多是別越精確特徵