之前不是做了個開源項目嘛，在做完GitHub登錄后，想著再顯得有逼格一點，說要再加個人臉識別登錄，就我這佛系的開發進度，過了一周總算是抽時間安排上了。

源碼在文末

其實最近對寫文章有點小抵觸，寫的東西沒人看，總有點小失落，好在有同行大佬們的開導讓我重拾了信心。調整了自己的心態，只要我分享的東西對大家有幫助就好，至于多少人看那就隨緣吧！

廢話不多說先看人臉識別效果動態，馬賽克有點重哈，沒辦法長相實在是拿不出手。

實現原理

我們看一下實現人臉識別登錄的大致流程，三個主要步驟：

前端登錄頁打開攝像頭，進行人臉識別，注意：只識別畫面中是不是有人臉

識別到人臉后，拍照上傳當前畫面圖片

后端接受圖片并調用人臉庫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="http://127.0.0.1:8081/home";????????????}).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)????????}????}

人臉識別

之前也搞過一個人臉識別案例 《基于 Java 實現的人臉識別功能(附源碼)》 ，不過調用SDK的方式太過繁瑣，而且代碼量巨大。所以這次為了簡化實現，改用了百度的人臉識別API，沒想到出乎意料的簡單。

“

別抬杠問我為啥不自己寫人臉識別工具，別問，問就是不會

在百度云注冊一個應用 https://console.bce.baidu.com/ai/?_=1595996996657&fromai=1#/ai/face/app/list，得到 API Key和 Secret Key，為了后續獲取 token用。

在這里插入圖片描述

百度云人臉識別的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?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?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?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;????}

項目是前后端分離的，但為了大家學習方便，我把人臉識別頁面整合到了后端項目。

最后 run FireControllerApplication 訪問地址：http://localhost:8082/face 即可。

源碼GitHub地址：https://github.com/chengxy-nds/fire.git，歡迎大家來耍~

---

原創不易，燃燒秀發輸出內容，如果有一丟丟收獲，點個贊鼓勵一下吧！

整理了幾百本各類技術電子書相送 ，噓~，「免費」 送給小伙伴們，私信或者評論【666】自行領取。和一些小伙伴們建了一個技術交流群，一起探討技術、分享技術資料，旨在共同學習進步。

總結

以上是生活随笔為你收集整理的java人脸识别_自从加了PC人脸识别登录功能，网站立马显得高大上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。