java人脸识别_自从加了PC人脸识别登录功能,网站立马显得高大上
之前不是做了個開源項目嘛,在做完GitHub登錄后,想著再顯得有逼格一點,說要再加個人臉識別登錄,就我這佛系的開發進度,過了一周總算是抽時間安排上了。
源碼在文末
其實最近對寫文章有點小抵觸,寫的東西沒人看,總有點小失落,好在有同行大佬們的開導讓我重拾了信心。調整了自己的心態,只要我分享的東西對大家有幫助就好,至于多少人看那就隨緣吧!
廢話不多說先看人臉識別效果動態,馬賽克有點重哈,沒辦法長相實在是拿不出手。
實現原理
我們看一下實現人臉識別登錄的大致流程,三個主要步驟:
前端實現
上邊說過要在前端識別到人臉,所以這里就不得不借助工具了,我使用的 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人脸识别登录功能,网站立马显得高大上的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java技术栈有哪些_Java程序员必备
- 下一篇: 人工智能、机器学习和深度学习的区别?