基于javaweb人脸识别注册登录系统

---恢复内容开始---

现在是2019年，人脸识别技术已经相当成熟了，百度自2017年发布人脸识别技术，已经被广泛应用，不管从现在的iphoneX掀起的面部解锁到手机应用端的各种人脸认证，这一技术已经悄然升息的方便了我们的生活，但是在web端注册登录缺很少用到刷脸登录，第一个最主要的原因可能是安全隐私方面人们对大数据时代的误解。不多废话，下面通过调用百度api来实现人脸注册及登录，

Web端人脸识别主要有三个技术思路：

1.前端的人脸识别，例如使用Tensorflow.js，

2.后台人脸识别，有很多开源或者免费的SDK可以使用，

3.前后端结合，即结合以上两种方法，虽然系统复杂度提高，但对于系统的安全性，以及减轻服务器负担都有很大提升。

（来自https://blog.csdn.net/scaped/article/details/81414406 ）笔者为java实现

下面先直接上效果图

如果感到不适，请忽略掉背景图，以技术为准

完了，还是暴露的我的丑照。。如有不适，请忽略......

一、第一步，在百度云创建应用

如上图，点击创建应用，在以下步骤需要用到这个API key 及Secret Key

二、第二步、创建人脸库及创建用户组

这里注意了，当你看到这篇博客时调用的百度云的v3版本，但是还是会用到v2版本的api,

不管哪个版本，不管调用哪个api，人脸检测、人脸搜索、人脸对比，都需要首先获取access_token，

获取token地址为

https://aip.baidubce.com/oauth/2.0/

后边需要三个参数

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id='自己的api key'&client_secret='自己的secret'

也可以直接在浏览器地址替换成自己的api  key 及secret查看返回的数据，sccess_token的生效日期为一个月，每一个月需要重新获取，所以在程序中我们没必要重复获取

从返回的json数据中我们可以看到获取到的token形式为24.71c5ac57b2.....一大长串

第二步、在浏览器获取摄像头，并实时输出到video，再利用canvas截取当前图像

<!doctype html>
<html lang="en">
    <head>
        <title>GET VIDEO</title>
        <meta charset="utf-8">
    </head>
    <body>
    <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button id="snap" onclick="takePhoto()">拍照</button>
    <script>
        function getMedia() {
            let constraints = {
                video: {width: 500, height: 500},
                audio: true
            };
            //获得video摄像头区域
            let video = document.getElementById("video");
            //这里介绍新的方法，返回一个 Promise对象
            // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
            // then()是Promise对象里的方法
            // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
            // 避免数据没有获取到
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(function (MediaStream) {
                video.srcObject = MediaStream;
                video.play();
            });
        }
 
      function takePhoto() {
      //获得Canvas对象
      let video = document.getElementById("video");
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, 500, 500);
      }
</script>
</body>
</html>

这里主要思想就是调用系统摄像头，将视频流传入video标签内，就在网页上显示出了摄像头的效果，再通过canvas截图，将某一时刻的视频截为图片，
后面再将图片转为base64格式传入后端，进行一系列人脸操作
三、人脸对比、
这里首先进行人脸比对，后续再写人脸库搜索，将两张图片的base64数据传入进行比对，得到一些列数据，根据返回的相似度来确定是否为一人
注意：这里可能会出现错误，

因为将图片的数据转成base64数据非常的长，超过了默认的长度，这里只需要修改tomcat的配置文件server.xml文件就OK

<Connector connectionTimeout="20000" maxHttpHeaderSize="102400" maxPostSize="-1" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>


官网文档：

https://cloud.baidu.com/doc/FACE/Face-Match.html#.E8.B0.83.E7.94.A8.E6.96.B9.E5.BC.8F

注意从今日起调用v3版本的api，调用v2版本会报一些错误，两张图片对比如下：

/**  
 * All rights Reserved, Designed By liufuqiang
 * @Title:  faceMatch.java   
 * @Package faceLogin   
 * @Description:    TODO
 * @author: LiuFuqiang     
 * @date:   2019年5月6日 下午7:07:22   
 * @version V1.0 
 * @Copyright: 2019 liufuqiang All rights reserved. 
 */
package faceLogin;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import utils.Base64Util;
import utils.FileUtil;
import utils.GsonUtils;
import utils.HttpUtil;

/**
 * @author Administrator
 *
 */


/**
* 人脸对比
*/
public class faceMatch {

    /**
    * 重要提示代码中所需工具类
    * FileUtil,Base64Util,HttpUtil,GsonUtils请从
    * https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
    * https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
    * https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
    * https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
    * 下载
    */
    public static String match() {
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v3/match";
        try {

            byte[] bytes1 = FileUtil.readFileByBytes("【本地图片路径1】");
            byte[] bytes2 = FileUtil.readFileByBytes("【本地图片路径2】");
            String image1 = Base64Util.encode(bytes1);
            String image2 = Base64Util.encode(bytes2);

            List<Map<String, Object>> images = new ArrayList<>();

            Map<String, Object> map1 = new HashMap<>();
            map1.put("image", image1);
            map1.put("image_type", "BASE64");
            map1.put("face_type", "LIVE");
            map1.put("quality_control", "LOW");
            map1.put("liveness_control", "NORMAL");

            Map<String, Object> map2 = new HashMap<>();
            map2.put("image", image2);
            map2.put("image_type", "BASE64");
            map2.put("face_type", "LIVE");
            map2.put("quality_control", "LOW");
            map2.put("liveness_control", "NORMAL");

            images.add(map1);
            images.add(map2);

            String param = GsonUtils.toJson(images);
            AuthService auth = new AuthService();
            String accessToken = auth.getAuth();
            // 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。
            

            String result = HttpUtil.post(url, accessToken, "application/json", param);
            String score=result.split(",")[5].split(":")[2];
            return score;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

   
}

所需要的工具包会在网址自行下载，

找两张图片进行比对，会返回json数据，但是咱们将他转化成字符串了，

新建servlet执行此java文件

faceMatch match = new faceMatch();
String score = match.match();
System.out.println(score);

我们找两张相似的图片进行比对，这里注意图片格式除了gif格式不支持，每张图片的大小不能超过2M

result:{"error_code":0,"error_msg":"SUCCESS","log_id":304592874888025681,"timestamp":1557488802,"cached":0,"result":{"score":97.75291443,"face_list":[{"face_token":"8ea5f423bb1cf93b87ebce4ff2ac623b"},{"face_token":"31c258d65509177ba99aecf28dadc496"}]}}

　返回的数据如下，result里面score:97.75291443，推荐阈值为80基本上判断为同一个人，可能没找到和我长得相似的，不管调用哪种api要么相似度是90多要么相似度是10以下，很少出现中间的值，

现在咱们比对的是两张固定的图片。那。。。要调用摄像头干鸡毛呢。。。将这两张图片的某一个图片地址base64换成前端base64的数据就可以了，

修改上面java：

faceMatch.java

/**  
 * All rights Reserved, Designed By liufuqiang
 * @Title:  faceMatch.java   
 * @Package faceLogin   
 * @Description:    TODO
 * @author: LiuFuqiang     
 * @date:   2019年5月6日 下午7:07:22   
 * @version V1.0 
 * @Copyright: 2019 liufuqiang All rights reserved. 
 */
package faceLogin;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import utils.Base64Util;
import utils.FileUtil;
import utils.GsonUtils;
import utils.HttpUtil;

/**
 * @author Administrator
 *
 */


/**
* 人脸对比
*/
public class faceMatch {

    /**
    * 重要提示代码中所需工具类
    * FileUtil,Base64Util,HttpUtil,GsonUtils请从
    * https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
    * https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
    * https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
    * https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
    * 下载
    */
    public static String match(String image2) {
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v3/match";
        try {

            byte[] bytes1 = FileUtil.readFileByBytes("C:\\Users\\Administrator\\Desktop\\liu8.png");
            /*byte[] bytes2 = FileUtil.readFileByBytes("C:\\Users\\Administrator\\Desktop\\liu6.png");*/
            String image1 = Base64Util.encode(bytes1);
            /*String image2 = Base64Util.encode(bytes2);*/

            List<Map<String, Object>> images = new ArrayList<>();

            Map<String, Object> map1 = new HashMap<>();
            map1.put("image", image1);
            map1.put("image_type", "BASE64");
            map1.put("face_type", "LIVE");
            map1.put("quality_control", "LOW");
            map1.put("liveness_control", "NORMAL");

            Map<String, Object> map2 = new HashMap<>();
            map2.put("image", image2);
            map2.put("image_type", "BASE64");
            map2.put("face_type", "LIVE");
            map2.put("quality_control", "LOW");
            map2.put("liveness_control", "NORMAL");

            images.add(map1);
            images.add(map2);

            String param = GsonUtils.toJson(images);
            AuthService auth = new AuthService();
            String accessToken = auth.getAuth();
            // 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。
            

            String result = HttpUtil.post(url, accessToken, "application/json", param);
            String score=result.split(",")[5].split(":")[2];
            return score;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

   
}

jsp页面通过ajax执行上传数据到servlet

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo01</title>
  
  <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="js/jquery-1.9.1.min.js"></script>
  <style type="text/css">
    .line{ 

    position: absolute; 

    top: 300px; left: -80px; 

    z-index: 2; 

    height: 15px; width: 300px; 

     background: linear-gradient(#33ffff, #66cccc,#99cccc); opacity: 0.7  /* 标准的语法 */

    /*动画效果*/

    animation: myScan 3s infinite alternate; 

    -webkit-animation: myScan 3s infinite alternate; 

}
@keyframes  myScan{

    from { top:5px; }

    to { top: 300px; }

}

-webkit-@keyframes  myScan{

    from { top:5px; }

    to { top: 600px; }

}
.box{background-image: url('image/bg2.jpg');width: 100%;height: 640px;background-size:100%, 100%;}
.video{width:250px;height:250px;margin:auto;background-image: url('image/faceBorder.png')}

</style>
</head>
<body>
<div class="box">
<div class="right">
<div class="video">

<!-- <div class="line"></div> -->

 <video id="myVideo" src="" class="video" ></video>

</div>
 <canvas id="myCanvas" width="600" height="400" hidden="hidden"></canvas>
 <script>
  var myVideo = document.getElementById('myVideo');
  navigator.mediaDevices.getUserMedia({
    video: true
  }).then(function (mediaStream) {
    myVideo.srcObject = mediaStream;
    myVideo.onloadedmetadata = function () {
      /* myVideo.controls = "controls"; 不显示控件*/
      myVideo.play();
    }
  });
 
 function jiance(){
     var canvas = document.getElementById('myCanvas').getContext('2d');
     canvas.drawImage(myVideo, 0, 0);
        var imgSrc = document.getElementById("myCanvas").toDataURL(
        "image/png").split("base64,")[1];
        $.ajax({
            type: "POST",
            url:'faceMatch',
            data:{
                message:imgSrc
            },
              success:function(score){
                  var scoreMatch = score.split(".")[0];
                  if(scoreMatch>80){
                      window.location="loginSuccess.jsp"
                 }
                  else{
                      
                      return;
                 }
            }
        })
    }
 setInterval("jiance()","1100");  //每隔一秒执行一次函数截图
    

    //将图片Base64 转成文件
 </script>
 <script type="text/javascript" color="120,148,255" opacity='0.8' zIndex="1" count="100" src="https://files.cnblogs.com/files/lfri/canvas-nest.js"></script>
 <div id="iframe">
 </div>
 </div>
</body>
</html>

这里js函数将每一秒执行一次函数截一次图并传到后台来比对，可以在控制台看到程序一直在执行，并且返回分数，当返回的分数大于80分时跳转到登录成功页面

但是现在只能将某一个人的图片文件手动写入java文件，感觉比较死，只能登录进去一个人。。

在v2版本中出现人脸搜索，v3版本中出现了人脸查找

但是人脸搜索肯定在某一个域里面进行检索，所以下面我们开始创建人脸库，并上传人脸图片到人脸库当中

https://console.bce.baidu.com/ai/#/ai/face/facelib/groupList~appId=917240

点击创建人脸库，创建用户组，人脸库也可以进行调用相应的api增删改差，这里咱们还是调用v2的人脸增删改查

官方文档在百度云上会相应的有

请求地址为

https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add

相应的参数为user_id,user_info,group_id,image_type,image,具体详细的可查看官方文档，

/**  
 * All rights Reserved, Designed By liufuqiang
 * @Title:  faceAdd.java   
 * @Package faceLogin   
 * @Description:    TODO
 * @author: LiuFuqiang     
 * @date:   2019年5月8日 下午7:20:54   
 * @version V1.0 
 * @Copyright: 2019 liufuqiang All rights reserved. 
 */
package faceLogin;

/**
 * @author Administrator
 *
 */


import java.net.URLEncoder;

import utils.Base64Util;
import utils.FileUtil;
import utils.HttpUtil;

/**
* 人脸注册
*/
public class faceAdd {

    /**
    * 重要提示代码中所需工具类
    * FileUtil,Base64Util,HttpUtil,GsonUtils请从
    * https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
    * https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
    * https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
    * https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
    * 下载
    */
    public static String add() {
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add";
        try {
            // 本地文件路径
            String filePath = "C:\\Users\\Administrator\\Desktop\\liu1.png";
            byte[] imgData = FileUtil.readFileByBytes(filePath);
            String imgStr = Base64Util.encode(imgData);
            String imgParam = URLEncoder.encode(imgStr, "UTF-8");

            

            String param = "user_id=" + "userid9" + "&user_info=" + "userInfo5" + "&group_id=" + "testFaceLogin" + "&image_type=BASE64" + "&image=" + imgParam ;
            AuthService auth = new AuthService();
            
            // 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。
            String accessToken = auth.getAuth();

            String result = HttpUtil.post(url, accessToken, param);
            System.out.println("addface:"+result);
            return result;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

   
}

这里可以根据前端实现图片上传功能，图片路径保存到数据库，再将图片转base64数据上传到人脸库，这里group_id为注册人脸库用户组时自己设置的，以实现注册功能，

下面进行人脸搜索，在人脸库中搜索，返回相似度最大的某个人的信息，

/**  
 * All rights Reserved, Designed By liufuqiang
 * @Title:  faceAdd.java   
 * @Package faceLogin   
 * @Description:    TODO
 * @author: LiuFuqiang     
 * @date:   2019年5月8日 下午6:56:52   
 * @version V1.0 
 * @Copyright: 2019 liufuqiang All rights reserved. 
 */
package faceLogin;

/**
 * @author Administrator
 *
 */

import java.util.*;


import utils.GsonUtils;
import utils.HttpUtil;

/**
* 人脸搜索
*/
public class faceSearch {

    /**
    * 重要提示代码中所需工具类
    * FileUtil,Base64Util,HttpUtil,GsonUtils请从
    * https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
    * https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
    * https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
    * https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
    * 下载
    */
    public static String search(String image) {
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v3/search";
        try {
            Map<String, Object> map = new HashMap<>();
            map.put("image", image); //图片base64数据
            map.put("liveness_control", "NORMAL");  //活体检测控制一般的
            map.put("group_id_list", "testFaceLogin");  //指定用户组group 人脸库总已经存在的用户组
            map.put("image_type", "BASE64");     //图片类型，这里转化过的base64
            map.put("quality_control", "LOW");   //图片质量控制

            String param = GsonUtils.toJson(map);
            AuthService auth = new AuthService();
            String accessToken = auth.getAuth();
            // 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。

            String result = HttpUtil.post(url, accessToken, "application/json", param);
            String score = result.split(",")[9].split(":")[1];
            System.out.println(result);
            System.out.println(score);
            return score;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    
}

这里这个image路径为前端摄像头每一秒截图的base64数据。将注册进去的人脸进行搜索，会返回json数据

{"error_code":0,"error_msg":"SUCCESS","log_id":304592874904990691,"timestamp":1557490499,"cached":0,"result":{"face_token":"636279d295ffaa2ce051f80ea41fb8fb","user_list":[{"group_id":"testFaceLogin","user_id":"userid9","user_info":"userInfo5","score":93.629905700684}]}}
93.629905700684}]}}

主要看user_list里面的内容，group_id为此用户所属用户组，user_id为上传时设置的用户id，user_info为上传时用户信息（这里建议将user_info为区别某一用户的唯一标识，在注册时将用户名、密码，user_info,人脸照片等数据存入数据库某张表里面,得到返回数据之后可根据user_info来判断登录用户为某个人，这样就可以区分用户）

后面还有人脸库的更新、删除、将某用户从某一用户组到另一个用户组，这里不再一一介绍。最终项目目录如下图：

根据自己需要自行修改，可能需要某些jar包有啥问题了，如果实在找不到了可以私信我。

项目上传到Github : https://github.com/LiuFqiang/faceLogin

基于javaweb人脸识别注册登录系统

猜你喜欢