java实现人脸识别登录教程【含效果图】——前台+后台整合

最新推荐文章于 2024-08-20 16:24:07 发布

有故事的男人G

最新推荐文章于 2024-08-20 16:24:07 发布

阅读量4.5w

点赞数 30

分类专栏：技术分享文章标签： java

本文链接：https://blog.csdn.net/qq_41186788/article/details/80025135

版权

技术分享专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这个做的是基于百度调的人脸接口。

百度提供有一个开发文档：http://ai.baidu.com/docs#/Face-Detect/top，

文档有java实例代码，返回参数等. 可以直接到：http://ai.baidu.com/

百度人脸识别进入官网查看文档

（最下面有整套demo下载地址）

接口功能：

两张人脸图片相似度对比：比对两张图片中人脸的相似度，并返回相似度分值；
多种图片类型：支持生活照、证件照、身份证芯片照、带网纹照四种类型的人脸对比；
活体检测：基于图片中的破绽分析，判断其中的人脸是否为二次翻拍（举例：如用户A用手机拍摄了一张包含人脸的图片一，用户B翻拍了图片一得到了图片二，并用图片二伪造成用户A去进行识别操作，这种情况普遍发生在金融开户、实名认证等环节。）；
质量检测：返回模糊、光照等质量检测信息，用于辅助判断图片是否符合识别要求；

代码讲解：

基于ssm框架搭建的，前端通过获取video标签调用本地的摄像头(获取用户媒体对象,流媒体数据base64)，将流媒体数据画到convas画布上去,后台调用百度API人脸识别接口，进入百度大脑搜索人脸识别即可获取官网的Secret Key，将前端获取的人脸信息的base64信息和你本地数据库里的人脸信息传到百度人脸识别的接口进行人脸比对，返回一个json数据，result参数带别人脸相似度, result可自己定义，从而实现人脸识别登录

效果图：

//识别成功状态

前台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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>管理员登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<style>
body {
	height: 100%;
	background: #213838;
	overflow: hidden;
}

canvas {
	z-index: -1;
	position: absolute;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/verificationNumbers.js"></script>
<script src="js/Particleground.js"></script>
<script>
$(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
  //验证码
  createCode();
  //测试提交，对接程序删除即可
  $(".submit_btn").click(function(){
	  localhost.href="index.jsp";
	  });
});
</script>


<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	background-position: center;
	overflow: hidden;
}

h1 {
	color: #fff;
	text-align: center;
	font-weight: 100;
	margin-top: 40px;
}

#media {
	width: 280px;
	height: 250px;
	margin: 10px auto 0;
	border-radius: 30px;
	overflow: hidden;
	opacity: 0.7px;
}

#video {
	
}

#canvas {
	display: none;
}

#btn {
	width: 160px;
	height: 50px;
	background: #03a9f4;
	margin: 70px auto 0;
	text-align: center;
	line-height: 50px;
	color: #fff;
	border-radius: 40px;
}
</style>
</head>

<body>

	<form action="${pageContext.request.contextPath}/facelogin.action"
		method="get">
		<dl class="admin_login">
			<dt>
				<strong>后台管理系统</strong><em>Management System</em> <strong>请把你的脸放摄像头面前</strong>
			</dt>
			<div id="media">
				<video id="video" width="530" height="300" autoplay></video>
				<canvas id="canvas" width="400" height="300"></canvas>
			</div>
			<dd>
				<input type="button" οnclick="query()" value="立即登录"
					class="submit_btn" />
			</dd>

		</dl>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
  		//var 是定义变量
  		var video = document.getElementById("video"); //获取video标签
  		var context = canvas.getContext("2d");
  		var con  ={
  			audio:false,
  			video:{
  			width:1980,
  			height:1024,
  			}
  		};	
  			
  			//导航 获取用户媒体对象
  			navigator.mediaDevices.getUserMedia(con)
  			.then(function(stream){
  				video.src = window.URL.createObjectURL(stream);
  				video.onloadmetadate = function(e){
  					video.play();
  				}
  			});
  			
  	
  			function query(){
  				
  				//把流媒体数据画到convas画布上去
  				context.drawImage(video,0,0,400,300);
  				var base = getBase64();
  				
  				
  				$.ajax({
  					type:"post",
  					url:"${pageContext.request.contextPath}/facelogin.action",
  					data:{"base":base},
  					success:function(data){
  						
  						/* alert(data) */
							var result = eval(data);

							if(result){
								

								// location.replace("/www.baidu.com");
								 //location.href='text.jsp';//此处跳转页面
								 
								 alert("登录成功")
								 //location.href="/localhost:8180/ssh-five/putong.jsp";
								 
								} else {
									alert("面容识别失败,请继续验证");
								}
								;
							}
						});

			}
			function getBase64() {
				var imgSrc = document.getElementById("canvas").toDataURL(
						"image/png");
				alert(imgSrc);
				return imgSrc.split("base64,")[1];

			};
		</script>
	</form>
</body>
</html>

后台测试类代码

public static String getToken() {
		BufferedReader br = null;
		StringBuffer sb = new StringBuffer();

		String authHost = "https://aip.baidubce.com/oauth/2.0/token?";

		String clientId = "";
		String clientSecret = "";
		String getAccessTokenUrl = 
				+ "grant_type=client_credentials"
				+ "&client_id=" + clientId
				+ "&client_secret=" + clientSecret;
		try {
			URL url = new URL(getAccessTokenUrl);
			HttpURLConnection connection = (HttpURLConnection) url
					.openConnection();
			connection.setRequestMethod("POST");
			connection.connect();
			br = new BufferedReader(new InputStreamReader(
					connection.getInputStream()));
			String line = "";
			while ((line = br.readLine()) != null) {
				sb.append(line);
			}
			br.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		JSONObject jsonObject = JSONObject.fromObject(sb.toString());
		String token = jsonObject.getString("access_token");
		return token;
	}

	public static void main(String[] args) {
		String tonken = getToken();
		System.out.println(tonken);
	}