如何基於SpringBoot實現臉部辨識功能

2022-05-18 13:00:36

前言

去年在公司參與了一個某某機場建設智慧機場的一個專案，人臉登機是其中的一個功能模組，當時只是寫了後臺的介面，呼叫臉部辨識裝置的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分即可實現登入。

具體實現

好了，前言和需求分析也嗶嗶了這麼久了，接下來是實現和上程式碼了。

一、人臉註冊

前端頁面程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <style type="text/css">
   /**解決瀏覽器相容性問題**/
  *{margin: 0;padding: 0;}
  html,body{width: 100%;height: 100%;}/**/
  body{background: url(img/bg03.jpg) no-repeat center;}
  h1{color: #fff;text-align: center;line-height: 80px;}
  .media{width: 534px;height: 400px;margin: 40px auto 0;
    }
  #register{width: 200px;height:50px;background-color: #2196f3; margin: 60px auto 0;
  text-align: center;line-height: 50px;color: #fff;border-radius: 10px;}
  #canvas{display: none;}
  #shuru{width: 200px;height:50px;background-color: #2196f3; margin: 20px auto 0;}
 </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,0,0,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" rel="external nofollow" ;
               }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()+"staticphoto";
         //用於檢視路徑是否正確
         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三個引數分別為百度雲臉部辨識上面的三個資料項，如下圖

點選完註冊按鈕後，就會發現。。。

到這就算一個使用者註冊成功了，個人這張大帥臉也算是錄進去了，下面就是刷臉登入了。面試題推薦：面試前可以在這裡刷刷題，很巴適！（Java版）

二、刷臉登入

當我註冊完後就會進入登入頁面

這時我點選登入按鈕，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(0);
     Double score = (Double) user.get("score");
  return score;
 }

接著我正面面對攝像頭，點選登入按鈕，就進入了一個大大的success頁面