java基于springboot的人脸识别企业排班考勤系统之人脸识别模块的设计和实现_java公司的智能排班系统源码

项目里考勤打卡需要换成人脸识别，主要思路：超级管理员在员工管理处上传员工相对清晰的五官电子一寸照片。然后员工登录自己的账号，在考勤页面点击打卡，浏览器开启电脑摄像头，采集员工脸部信息照片，并且将这个照片与员工之前的电子照进行比对比。
演示视频：【学生考勤系统单人脸采集和多人脸识别和二维码扫描识别身份签到考勤系统展示-杰凡IT】 https://www.bilibili.com/video/BV1fq4y1L77p?p=2&share_source=copy_web&vd_source=ed0f04fbb713154db5cc611225d92156

先来看看实现的效果吧



首先需要百度申请接口，具体这里不在赘述，百度里申请个人开发，人工智能，人脸识别里新建一个应用，可以拿到三个参数， 项目只用到了两个 API Key 和clientSecret

在调用接口之前，需要获取AccessToke，AccessToke有效期是一个月，然后根据AccessToke去调用人脸匹配接口。

第一步：获取AccessToke，这个百度有api文档，里面也写得很轻清楚了，需要API Key 和clientSecret去获取得到，代码如下：

public class AuthService {
	 
	 
    public static String getAuth() {
        // 官网获取的 API Key 更新为你注册的
        String clientId = " ";
        // 官网获取的 Secret Key 更新为你注册的
        String clientSecret = " ";
        return getAuth(clientId, clientSecret);
    }

  
    public static String getAuth(String ak, String sk) {
        // 获取token地址
        String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
        String getAccessTokenUrl = authHost
                // 1. grant_type为固定参数
                + "grant_type=client_credentials"
                // 2. 官网获取的 API Key
                + "&client_id=" + ak
                // 3. 官网获取的 Secret Key
                + "&client_secret=" + sk;
        try {
            URL realUrl = new URL(getAccessTokenUrl);
            // 打开和URL之间的连接
            HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
            // 获取所有响应头字段
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍历所有的响应头字段
            for (String key : map.keySet()) {
                System.err.println(key + "--->" + map.get(key));
            }
            // 定义 BufferedReader输入流来读取URL的响应
            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String result = "";
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
            /**
             * 返回结果示例
             */
            System.err.println("result:" + result);
            JSONObject jsonObject = new JSONObject(result);
            
            String access_token = jsonObject.getString("access_token");
            return access_token;
        } catch (Exception e) {
        	 
        	
            System.err.printf("获取token失败！重新获取");
            e.printStackTrace(System.err);
        }
        return null;
    }
    
    public static void main(String[] args) {
    	System.out.println(getAuth());
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

第二部，调用照片匹配的接口并封装，代码如下：
参数说明img1和img2都是base64的格式，把两张需要对比的照片穿进去，返回值大于80说明比配成功，否则不是同一个人哦

/**
* 人脸对比
*/
public class FaceMatch {
 
    public static String faceMatch(String img1,String img2) {
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v3/match";
        try {
        	List pli=new ArrayList();
        	Map<String, Object> map = new HashMap<>();
            map.put("image", img1);
        	map.put("image_type", "BASE64");
            map.put("face_type", "LIVE");
            map.put("quality_control", "LOW");
            map.put("liveness_control", "HIGH");
            pli.add(map);
          
            map = new HashMap<>();
            map.put("image", img2);
            map.put("image_type", "BASE64");
            map.put("face_type", "LIVE");
            map.put("quality_control", "LOW");
            map.put("liveness_control", "HIGH");
            pli.add(map);
            
 
          
            String param =  new org.json.JSONArray(pli).toString();

            
           
            String accessToken=AuthService.getAuth();//获取accessToken，有效期一个月，这里需要宁外做处理，我是直接调用了
            String result = HttpUtil.post(url, accessToken, "application/json", param);
          //  System.out.println(result);
            
            JSONObject jsonObject = new JSONObject(result);
            JSONObject obj=(JSONObject) jsonObject.get("result");
             
            return obj.get("score").toString();
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
         
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

第三部，写前端页面调用浏览器摄像头，并把摄像头采集到人脸照片以base64的方式传给后台，这个是我自己的jsp页面代码，直接复制应该是不可以用的，但是里面html5调用摄像头的可以参考使用哦。

注意：如果您的摄像头打开很黑，有可能是您的电脑摄像头坏掉了（脸都拍不清楚，肯定识别不了），这个不是代码的问题哦，我用的360和谷歌浏览器测试均可打开摄像头的。

代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
      <%@ include file="common.jsp"%>
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <div id="main-wrapper" data-navbarbg="skin6" data-theme="light" data-layout="vertical" data-sidebartype="full" data-boxed-layout="full">
        <!-- ============================================================== -->
        <!-- Topbar header - style you can find in pages.scss -->
        <!-- ============================================================== -->
         <%@ include file="leftmenu.jsp"%>
       <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Page wrapper  -->
        <!-- ============================================================== -->
        <div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            
            <!-- ============================================================== -->
            <!-- End Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container-fluid">
                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <!-- Row -->
                <div class="row">
                    <div class="col-12">
                    <div class="card">
                            <div class="card-body">
                                <h4 class="card-title" style="text-align: center;">上下班请记得打卡哦</h4>
                         
                            </div>
                           
                            <div class="container" style="text-align: center;">
                                  
                                  <span id="clockin" class="mdi mdi-cloud-print" style="font-size: 10em"></span>   
                                      <video id="video" width="480" height="320" style="display:none;">  </video>
									  <p id="video_tip" style="display:none;">脸部识别中，请正脸看向摄像头，<span id="ts"></span></p> 
									  <canvas id="canvas" width="480" height="320" style="display:none;"></canvas>
                                 	<p id="result"></p>
                            </div>
                        </div>
                    	
                    </div> 
                    
                </div>
                <!-- Row -->
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Right sidebar -->
                <!-- ============================================================== -->
                <!-- .right-sidebar -->
                <!-- ============================================================== -->
                <!-- End Right sidebar -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page wrapper  -->
        <!-- ============================================================== -->
    </div>

</body>

 

<script type="text/javascript">
var t=5;
$('#clockin').click(function(){
	$('#clockin').hide();
	$('#video,#video_tip').show();
	var inv=setInterval(function(){
		$('#ts').text(t+'s');
		if(t<0){
			t=5;
			context.drawImage(video, 0, 0, 480, 320);
			$('#canvas').show(); 
			$('#clockin,#video,#video_tip').hide();
			clearInterval(inv);
			matchface();
		}
		t--;
	}, 1000);
})
function matchface(){
	$.ajax({
		type:"post",
		url:"${ctx}/clockin/faceadd",
		dataType:"json",
		data: {
			faceimg:getBase64()
		} , success:function(data){
			if(data.status==1){
				$('#result').text(data.msg).css('color','green');
			} else{
			  alert(data.msg);
			  window.location.reload();
			}
		},fail:function(data){
			alert('请检查网络');
			window.location.reload();
		}
	}) 
}
//访问用户媒体设备的兼容方法
function getUserMedi1;

};

</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

第四部：调用后台照片匹配接口，给前端返回结果，代码如下：

@ResponseBody
@RequestMapping("/faceadd")
public Object faceadd(@RequestParam(value="pageNo",defaultValue="1")int pageNo,ScClockin o,Model model,HttpSession session,String faceimg,
			HttpServletRequest request) throws Exception {
		 
		String isbenren=FaceMatch.faceMatch(faceimg（刚刚前端摄像头拍摄的照片的buse64格式数据）,“该员工之前的一寸电子照片的base64格式数据”);
		if(isbenren==null){
			m.put("status", "0");
			m.put("msg","脸部信息匹配失败，重新签到");
			return  m;
		}
		double br=Double.parseDouble(isbenren);
		if(br<80){
			m.put("status", "0");
			m.put("msg","签到失败，不是本人");
			return  m;
		}
		 
		return   m;
			
	} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21