devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Spring Boot 实现 AI 人脸识别功能，So Easy！

作者：2023面试高手 | 2024-05-25 01:21:59

赞

踩

springboot+ai

前言

去年在公司参与了一个某某机场建设智能机场的一个项目，人脸登机是其中的一个功能模块，当时只是写了后台的接口，调用人脸识别设备的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分即可实现登录。

具体实现

好了，前言和需求分析也哔哔了这么久了，接下来是实现和上代码了。

一、人脸注册

前端页面代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6.  <style type="text/css">
  7.    /**解决浏览器兼容性问题，公众号Java精选**/
  8.   *{margin: 0;padding: 0;}
  9.   html,body{width: 100%;height: 100%;}/**/
  10.   body{background: url(img/bg03.jpg) no-repeat center;}
  11.   h1{color: #fff;text-align: center;line-height: 80px;}
  12.   .media{width: 534px;height: 400px;margin: 40px auto 0;
  13.     }
  14.   #register{width: 200px;height:50px;background-color: #2196f3; margin: 60px auto 0;
  15.   text-align: center;line-height: 50px;color: #fff;border-radius: 10px;}
  16.   #canvas{display: none;}
  17.   #shuru{width: 200px;height:50px;background-color: #2196f3; margin: 20px auto 0;}
  18.  </style>
  19. </head>
  20. <body>
  21.  <h1>百度云人脸注册</h1>
  22.  <div id="shuru">
  23.  用户名：
  24.  <input type="text" name="username" id="username"/>
  25.  </div>
  26.  
  27.  <div class="media">
  28.   <video id="video" width="450" height="300" src="" autoplay></video>
  29.   <canvas id="canvas" width="450" height="300"></canvas>
  30.   
  31.  </div>
  32.  <button id="register" >确定注册</button>
  33.  <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
  34.  <script type="text/javascript">
  35.  /**调用摄像头，获取媒体视频流**/
  36.  var video = document.getElementById('video');
  37.  //返回画布二维画图环境
  38.  var userContext = canvas.getContext("2d");
  39.  var getUserMedia = 
  40.   //浏览器兼容,表示在火狐、Google、IE等浏览器都可正常支持
  41.   (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
  42.   //getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)
  43.   getUserMedia.call(navigator,{video: true,audio: false},function(localMediaStream){
  44.    //获取摄像头捕捉的视频流
  45.    video.srcObject=localMediaStream;
  46.   },function(e){
  47.    console.log("获取摄像头失败！！")
  48.   });
  49.  //点击按钮注册事件
  50.   var btn = document.getElementById("register");
  51.  
  52.  btn.onclick = function () {
  53.   var username = $("#username").val();
  54.   alert($("#username").val());
  55.    if(username != null){
  56.     //点击按钮时拿到登陆者面部信息
  57.              userContext.drawImage(video,0,0,450,300);
  58.              var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
  59.              //拿到bash64格式的照片信息
  60.              var faceBase = userImgSrc.split(",")[1];
  61.              
  62.              //ajax异步请求
  63.              $.ajax({
  64.               url: "register",
  65.               type: "post",
  66.               data: {"faceBase": faceBase,
  67.                "userName": username
  68.               },
  69.               success: function(result){
  70.                if(result === '1'){
  71.                 alert("注册成功！！，点击确认跳转至登录页面");
  72.                 window.location.href="toLogin";
  73.                }else if(result === '2'){
  74.                 alert("您已经注册过啦！！");
  75.                }else{
  76.                 alert("系统错误！！");
  77.                }
  78.                
  79.               }
  80.              })
  81.    }else{
  82.     alert("用户名不能为空");
  83.    }
  84.            
  85.        } 
  86.  </script>
  87. </body>
  88. </html>

页面截图，本人太帅，先行打码，嘿嘿

93b79c21ab41868378a358023225f73a.png

后台具体代码如下:

  1. private static final String APP_ID = "****";
  2.  
  3.  private static final String API_KEY = "*******";
  4.  
  5.  private static final String SECRET_KEY = "*******";
  6.  
  7.  @Autowired
  8.  private IUserService userService;
  9.  
  10.  
  11.  @RequestMapping(value = "register",method = RequestMethod.POST)
  12.  public String register(String userName,String faceBase) throws IOException {
  13.   if(!StringUtils.isEmpty(userName) && !StringUtils.isEmpty(faceBase)) {
  14.     //文件上传的地址
  15.          String upPath = ResourceUtils.getURL("classpath:").getPath()+"static\\photo";
  16.          //用于查看路径是否正确
  17.          System.out.println(upPath);
  18.          // 图片名称，公众号：Java精选
  19.          String fileName = userName+System.currentTimeMillis() + ".png";
  20.          System.out.println(upPath+"\\"+fileName);
  21.          File file = new File(upPath+"\\"+fileName);
  22.    //初始化百度云的AipFace
  23.    AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
  24.    
  25.    //往自己demo数据库里插入一条用户数据
  26.    Users user = new Users();
  27.    user.setUserName(userName);
  28.    user.setUserPhoto(upPath+"\\"+fileName);
  29.    Users exitUser = userService.selectUserByName(user);
  30.    if(exitUser != null) { 
  31.     return "2";
  32.    }
  33.    userService.addUsers(user);
  34.    
  35.    
  36.    // 往自己demo服务器里面上传摄像头捕获的图片
  37.    GenerateImage(faceBase, file);
  38.    //向百度云人脸库插入一张人脸
  39.    facesetAddUser(client,faceBase,userName);
  40.   }
  41.   return "1";
  42.   
  43.  }

APP_ID 、API_KEY、SECRET_KEY三个参数分别为百度云人脸识别上面的三个数据项，如下图

af705585c9a036461b22716498e71119.png 5b44e7e974806c2982fe9f14fb6dbe7f.png

点击完注册按钮后，就会发现。。。

c9a805c29a869325445a837d2f86207f.png
1
6850fa24137eaf391ac5f2a33cd0d5f0.png
2
0068d35e0bb1024e3a5837da91415423.png
3
a49073ce65258486cb68995df94d72c4.png
4

到这就算一个用户注册成功了，个人这张大帅脸也算是录进去了，下面就是刷脸登录了。

二、刷脸登录

当我注册完后就会进入登录页面

66a4027db2ac71569fed8c442e129894.png

这时我点击登录按钮，js触发后台方法，具体入下：

  1. @RequestMapping(value = "login",method = RequestMethod.POST)
  2.  public String login(String faceBase) {
  3.   String faceData = faceBase;
  4.   //进行人像数据对比
  5.   AipFace client = new AipFace(APP_ID,API_KEY,SECRET_KEY);
  6.   Double num = verifyUser(faceData,client);
  7.   if(num>95) {
  8.    return "1";
  9.   }else {
  10.    return "2";
  11.   }
  12.   
  13.  }
  14.  
  15.  /**
  16.   * 人脸比对
  17.   * @param imgBash64 照片转bash64格式
  18.   * @param imgType 类型
  19.   * @param groupList 百度云人脸识别用户组
  20.   * @return
  21.   */
  22.  public Double verifyUser(String imgBash64,AipFace client) {
  23.   // 传入可选参数调用接口
  24.      HashMap<String, String> options = new HashMap<String, String>();
  25.      
  26.      JSONObject res = client.search(imgBash64, "BASE64", "user_01", options);
  27.      
  28.      System.out.println(res.toString(2));
  29.      System.out.println(res.getJSONObject("result"));
  30.      System.out.println(res.getJSONObject("result").getJSONArray("user_list"));
  31.      JSONObject user = (JSONObject) res.getJSONObject("result").getJSONArray("user_list").get(0);
  32.      Double score = (Double) user.get("score");
  33.      
  34.   return score;
  35.  }

接着我正面面对摄像头，点击登录按钮，就进入了一个大大的success页面

b8adad522fda771f814d49bed88be431.png

我侧脸或者拿照片试一下，不好意思，您老只能是404了

0b6b0804e0676429fc811f89c5ae212b.png

以上就是整个实现的思路和一些步骤了，demo涉及的类和页面比较多，不方便一一截图，随后我把资源上传到本站。如有需要可自行下载。

综合而言实现还是比较简单的，牛逼的地方都在人家百度云那边呢，咱们只是根据需求合理利用人家的解决方案罢了。其实如果不是很牛逼的专项技术研发公司，做项目能合理利用别人的产品是最有效率的，项目建设最重要的还是投入产出比嘛。与其自己团队苦苦研究，花点成本买人家的成品直接用它不香吗？

作者：菩提天珠

https://blog.csdn.net/lw1124052197/article/details/106077837

公众号“Java精选”所发表内容注明来源的，版权归原出处所有（无法查证版权的或者未注明出处的均来自网络，系转载，转载的目的在于传递更多信息，版权属于原作者。如有侵权，请联系，笔者会第一时间删除处理！

最近有很多人问，有没有读者交流群！加入方式很简单，公众号Java精选，回复“加群”，即可入群！

Java精选面试题（微信小程序）：3000+道面试题，包含Java基础、并发、JVM、线程、MQ系列、Redis、Spring系列、Elasticsearch、Docker、K8s、Flink、Spark、架构设计等，在线随时刷题！

------ 特别推荐 ------

特别推荐：专注分享最前沿的技术与资讯，为弯道超车做好准备及各种开源项目与高效率软件的公众号，「大咖笔记」，专注挖掘好东西，非常值得大家关注。点击下方公众号卡片关注。

文章有帮助的话，在看，转发吧！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/619959
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号