，回復關鍵字「spring」，去年在公司參與了一個某某機場建設智能機場的一個項目，人臉登機是其中的一個功能模塊，當時只是寫了後台的接口，調用人臉識別設備的api，給閘機回傳數據信號，以保障該功能的正常使用。
當時因為項目進度緊張，手裡還有其他項目趕進度，也就沒時間去分享這個功能的實現。前幾天刷臉進公司大樓的時候，突然想起來應該寫一個功能類似的demo分享個人的一些小小的經驗。在當時項目中刷臉的設備終端是採購某某AI公司，當然咱們在demo裡面也不可能買一台那東西來瞎搞，於是乎就拿系統刷臉登錄來練練手，人臉識別解決方案就用百度雲的吧，當然騰訊、阿里這方面也很牛逼的。
需求分析一、人臉註冊step1：人像採集。在註冊頁面上用html中video組件和js調用筆記本攝像頭，並抓取人像圖片。沒有攝像頭的筆記本、台式機的童鞋告辭吧，走好不送。。。
step2：人像上傳至項目文件夾。將在頁面採集到的人像數據轉換成bash64字符傳輸到web後台，在後台將bash64轉換成圖片上傳至項目文件夾。
step3：將用戶的註冊信息寫入數據庫，用戶的照片使用路徑存儲。
step4：將採集到的人像信息（bash64）上傳至百度雲的人臉識別雲端服務器。ps這塊實現也可離線私有化處理方案，有興趣的童鞋可自行研究。
二、人臉登錄step1：人像採集。在登錄頁面上用html中video組件和js調用筆記本攝像頭，並抓取人像圖片。
step2：人像數據傳輸。抓取的人臉圖片信息回傳至web後台。
step3：人像比對。在web後台實例化並調用百度雲人臉識別的sdk，將登錄頁面採集到的圖像數據和註冊的圖像信息相比對（這塊是百度雲人臉識別解決方案實現的，也是最牛B的地方），返回的比分大於95分即可實現登錄。
具體實現好了，前言和需求分析也嗶嗶了這麼久了，接下來是實現和上代碼了。
一、人臉註冊前端頁面代碼
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><styletype="text/css">/**解決瀏覽器兼容性問題**/*{margin:0;padding:0;}html,body{width:100%;height:100%;}/**/body{background:url(img/bg03.jpg)no-repeatcenter;}h1{color:#fff;text-align:center;line-height:80px;}.media{width:534px;height:400px;margin:40pxauto0;}#register{width:200px;height:50px;background-color:#2196f3;margin:60pxauto0;text-align:center;line-height:50px;color:#fff;border-radius:10px;}#canvas{display:none;}#shuru{width:200px;height:50px;background-color:#2196f3;margin:20pxauto0;}</style></head><body><h1>百度雲人臉註冊</h1><divid="shuru">用戶名：<inputtype="text"name="username"id="username"/></div><divclass="media"><videoid="video"width="450"height="300"src=""autoplay></video><canvasid="canvas"width="450"height="300"></canvas></div><buttonid="register">確定註冊</button><scripttype="text/javascript"src="js/jquery-3.3.1.js"></script><scripttype="text/javascript">/**調用攝像頭，獲取媒體視頻流**/varvideo=document.getElementById('video');//返回畫布二維畫圖環境varuserContext=canvas.getContext("2d");vargetUserMedia=//瀏覽器兼容,表示在火狐、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("獲取攝像頭失敗！！")});//點擊按鈕註冊事件varbtn=document.getElementById("register");btn.onclick=function(){varusername=$("#username").val();alert($("#username").val());if(username!=null){//點擊按鈕時拿到登陸者面部信息userContext.drawImage(video,0,0,450,300);varuserImgSrc=document.getElementById("canvas").toDataURL("img/png");//拿到bash64格式的照片信息varfaceBase=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";}elseif(result==='2'){alert("您已經註冊過啦！！");}else{alert("系統錯誤！！");}}})}else{alert("用戶名不能為空");}}</script></body></html>頁面截圖，本人太帥，先行打碼，嘿嘿
後台具體代碼如下:
privatestaticfinalStringAPP_ID="****";privatestaticfinalStringAPI_KEY="*******";privatestaticfinalStringSECRET_KEY="*******";@AutowiredprivateIUserServiceuserService;@RequestMapping(value="register",method=RequestMethod.POST)publicStringregister(StringuserName,StringfaceBase)throwsIOException{if(!StringUtils.isEmpty(userName)&&!StringUtils.isEmpty(faceBase)){//文件上傳的地址StringupPath=ResourceUtils.getURL("classpath:").getPath()+"static\\photo";//用於查看路徑是否正確System.out.println(upPath);//圖片名稱StringfileName=userName+System.currentTimeMillis()+".png";System.out.println(upPath+"\\"+fileName);Filefile=newFile(upPath+"\\"+fileName);//初始化百度雲的AipFaceAipFaceclient=newAipFace(APP_ID,API_KEY,SECRET_KEY);//往自己demo數據庫里插入一條用戶數據Usersuser=newUsers();user.setUserName(userName);user.setUserPhoto(upPath+"\\"+fileName);UsersexitUser=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三個參數分別為百度雲人臉識別上面的三個數據項，如下圖
點擊完註冊按鈕後，就會發現。。。
1
2
3
4到這就算一個用戶註冊成功了，個人這張大帥臉也算是錄進去了，下面就是刷臉登錄了。
二、刷臉登錄當我註冊完後就會進入登錄頁面
這時我點擊登錄按鈕，js觸發後台方法，具體入下：
@RequestMapping(value="login",method=RequestMethod.POST)publicStringlogin(StringfaceBase){StringfaceData=faceBase;//進行人像數據對比AipFaceclient=newAipFace(APP_ID,API_KEY,SECRET_KEY);Doublenum=verifyUser(faceData,client);if(num>95){return"1";}else{return"2";}}/***人臉比對*@paramimgBash64照片轉bash64格式*@paramimgType類型*@paramgroupList百度雲人臉識別用戶組*@return*/publicDoubleverifyUser(StringimgBash64,AipFaceclient){//傳入可選參數調用接口HashMap<String,String>options=newHashMap<String,String>();JSONObjectres=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"));JSONObjectuser=(JSONObject)res.getJSONObject("result").getJSONArray("user_list").get(0);Doublescore=(Double)user.get("score");returnscore;}接着我正面面對攝像頭，點擊登錄按鈕，就進入了一個大大的success頁面
我側臉或者拿照片試一下，不好意思，您老只能是404了
以上就是整個實現的思路和一些步驟了，demo涉及的類和頁面比較多，不方便一一截圖，隨後我把資源上傳到本站。如有需要可自行下載。
綜合而言實現還是比較簡單的，牛逼的地方都在人家百度雲那邊呢，咱們只是根據需求合理利用人家的解決方案罷了。其實如果不是很牛逼的專項技術研發公司，做項目能合理利用別人的產品是最有效率的，項目建設最重要的還是投入產出比嘛。與其自己團隊苦苦研究，花點成本買人家的成品直接用它不香嗎？
來源：blog.csdn.net/lw1124052197/article/
details/106077837
END
關注後端面試那些事，回復【2022面經】
獲取最新大廠Java面經
，回復關鍵詞：加群，拉你進群。
留言列表