java web+前端实现 人脸登录功能（专注细节） |
您所在的位置：网站首页 › 百度人脸识别登录不上去 › java web+前端实现 人脸登录功能（专注细节） |
java web+前端实现 人脸登录功能（专注细节）
|
本次的博客是自己软件工程课设的作业，写博客是为了记录自己的学习过程，然后总结，同时可以给需要的人作参考。
1、在做这个项目的时候，也是个大三学生，所以懂得并不多，因此在网上看见了一些相关的资源，但是都不是很清醒比较混乱，因此做完这个项目就想发表下自己的意见，以帮助需要的人（这里我们可以用数据库，也可以不用数据库，因为我做的这个项目并不是仅仅一个人脸识别，还有其他的业务，所以我用到了数据库，如果仅仅想弄个人脸注册登录的业务，可以不需要数据库） 让我们进入正题吧： 一、Web端人脸识别主要有三个技术思路： 1.前端的人脸识别，例如使用Tensorflow.js， 2.后台人脸识别，有很多开源或者免费的SDK可以使用 3.前后端结合，即结合以上两种方法，虽然系统复杂度提高，但对于系统的安全性，以及减轻服务器负担都有很大提升。（本次的实验是调用百度云的Api以及前后端结合的方式去实现人脸注册以及登录的功能） 让我们先看下效果图吧：1、登录的首页： 在这个登录页面我们要好好讲一讲，因为在做这个项目的时候，自己花了很多时间。 1、首先我们要明白，我这个前端页面调用电脑摄像头是自动截取图片的每1秒截取一张，所以不用我们点击确认登录(这里我们也没有这个按钮)，它把我们的图片以base64字节码的形式采用异步Ajax的形式传到后台。 ·· 4、遇到错误上后台查找原因（遇到最多的就是你的脸不在摄像头的正中间，也就是有效范围） 1、我的百度云人脸库 3、连接百度云人脸库，无论是人脸检测、人脸搜索、人脸对比，身份验证、都需要首先获取access_token(这个类百度云Api文档里面都有，我知道大家懒，所以直接复制在这里面了) package com.baidu.ai.aip.auth; import org.json.JSONObject; import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; import java.net.URL; import java.util.List; import java.util.Map; /** * 获取token类 */ public class AuthService { /** * 获取权限token * @return 返回示例： * { * "access_token": "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567", * "expires_in": 2592000 * } */ public static String getAuth() { // 官网获取的 API Key 更新为你注册的 String clientId = "百度云应用的AK"; // 官网获取的 Secret Key 更新为你注册的 String clientSecret = "百度云应用的SK"; return getAuth(clientId, clientSecret); } /** * 获取API访问token * 该token有一定的有效期，需要自行管理，当失效时需重新获取. * @param ak - 百度云官网获取的 API Key * @param sk - 百度云官网获取的 Securet Key * @return assess_token 示例： * "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567" */ 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 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; } } 在这里也很容易出错，我就在获取**access_token** 中吃了亏，如果获取不到，则控制台上面不会有 access_token的字符串，如果成功获取access_token的字符串，就会默认在控制台下打印， 正常的access_token的样子：
三、前端如何获取我们的摄像头（在这里我花了很多时间，因为自己做的是后端开发，前端还没能力写出【有能力的同学Pass这句话!！】，只能翻阅大量资料，但是网上都是不足的，我在这里将给大家一个完整的前端Jsp代码）
3.1、注册的页面（注册页面大家可以自己写其实就是文件上传，我自己这个业务比较复杂）
欢迎使用
用户编号
用户名
用户登录名
密码
确认密码
姓名
性别
电话
邮箱
--%
${err} 提交
3.2获取getface.Js的代码
$(function () {
let mediaStreamTrack = null;
openMedia();
setTimeout("tishi()", "1000");
setTimeout("tishi2()", "3000");
setTimeout("takePhoto()", "5000");
})
var number = 0;
function tishi() {
$("#flag").html("正在打开摄像头")
}
function tishi2() {
$("#flag").html("请正视摄像头")
}
function tishi3() {
window.location.href = "login.jsp";
}
function openMedia() {
let constraints = {
video: {width: 500, height: 500},
audio: false
};
//获得video摄像头
let video = document.getElementById('video');
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then((mediaStream) => {
mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
video.srcObject = mediaStream;
video.play();
});
}
// 拍照
function takePhoto() {
//获得Canvas对象
number++;
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
// toDataURL --- 可传入'image/png'---默认, 'image/jpeg'
let img = document.getElementById('canvas').toDataURL();
// 这里的img就是得到的图片
console.log('img-----', img);
document.getElementById('imgTag').src = img;
$("#flag").html("正在识别");
$.ajax({
url: "/faceloginServlet", //请求的url地址
dataType: "text", //返回格式为json
async: true,//请求是否异步，默认为异步，这也是ajax重要特性
// contentType:"application/json",
data: {"imagebast64": img}, //参数值
type: "POST", //请求方式
success: function (data) {
// if(data=="fail"||data.score.substr(0,2) 72) {
console.log("cheng---gong");
window.location.href = "/display";
} else {
window.location.href = "login.jsp";
}
}
})
}
// 关闭摄像头
function closeMedia() {
mediaStreamTrack.stop();
}
3.3 facelogin.jsp文件
js调用摄像头拍照上传图片
.getface{
position: absolute;
top: 20%;
left: 35%;
}
.tishi{
font-size: 20px;
}
ok！！！，按照上面的原封不动你就已经把前端的代码搭建好了 四、百度云人脸技术有好几项技术，这里我们的项目只用到了人脸搜索和人脸库管理中（人脸注册）这两个技术就够了（如果对人脸对比，和人脸检测有兴趣，可以自己观看文档） 4.1、在后端的开发中我们首先要在百度云人脸识别的文档中下载几个类，这是给你准备好的直接在地址栏复制就可下载
/** * 重要提示代码中所需工具类 * 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 * 下载 */ 我们来解释下这几个类是干什么用的： 1、FileUtil:这个类是帮助我们读取前端传来登录头像的数据，作为字符串返回 2、Base64Util:这个类辅助上面的一个类，帮我们解析传过来的数据（我们知道前端我们使用Base64字节码传的，所以就必须用BaseUtil这个工具类去解析） 3、HttpUtil:这个类让我们可以在程序中，就可以请求百度云的Ip,感觉很牛皮，至今不知道为什么，知道的欢迎在评论告诉我 4.这个学过Json数据格式的都知道，这个是处理Json与字符串之间转换的工具类 4.2、前期的准备工作已经做好，让我们写后端代码吧 4.2.1、我们知道想要用人脸识别技术就首先注册自己的人脸到百度云人脸库中去
这是官方给的代码，通过上面我自己的代码，我相信照这两个你们会搭建好自己的业务代码（这里可以根据前端实现图片上传功能，再将图片转base64数据上传到人脸库，这里group_id为注册人脸库用户组时自己设置的，以实现注册功能，） 4.2.2、然后我们就可以人脸登录，然后调用百度云人脸搜索的功能了，如何搜索到你目前登录的和你刚刚注册的一样，就会登录进去，否则失败
上面的图片是我自己人脸登录的Servlet,结合下面官方给的，我相信你们就理解了人脸搜索功能的意思，通过人脸搜索类任何去匹配人脸库中最像的一个给出分数，然后把这个分数用输出流传递给前端，在前段设置个阀值（我设置的是75），如何大于75分说明在人脸库中找到了你目前登录人的信息，则给予通过，否则相反 这是刚刚Getface.js文件中的 |
2、注册页面，因为我们想要人脸登录，首先要注册你自己的人脸保存百度云脸库中去 
3、人脸识别登录 
2、如何创建人脸库（刚开始你们自己肯定没有所以需要创建，创建成功会给你一个API key 及Secret Key，这回头我们在程序中调用人脸库，这个就是地址） 
【本文地址】
今日新闻 |
推荐新闻 |