案例概述
本案例基于ASP.NET和百度云人脸库,主要实现静态人脸添加和静态人脸检测的功能,是笔者一个练习的小Demojavascript
使用的工具
主要使用了VS 201七、MS SQL Server数据库和百度云人脸库css
实现的功能
功能及代码展现
1.打开浏览器登陆百度智能云,(百度帐号便可登陆)
2.应用列表|建立应用
3.人脸库管理|选择刚刚建立好的应用
4.在这个应用中建立新分组(这个分组将在以后上传图片信息中用到)
html
1.AccessToken.cs前端
主要功能:将建立人脸库时获取的API Key和Sercet Key,放入json字符串中传给百度云人脸识别接口,与本身建立的人脸库创建链接,并获取链接凭证。
返回回来的json字符串中含有的Access_Token就是这个凭证。java
这个类不是笔者写的,是百度云提供的api调用方式文档(点此访问),在这个文档的基础上,笔者进行了一些修改,造成了下面的类。jquery
using System; using System.Collections.Generic; using System.Net.Http; using System.Web.Script.Serialization; namespace com.baidu.ai { public static class AccessToken { // 调用getAccessToken()获取的 access_token建议根据expires_in 时间 设置缓存 // 返回token示例 public static String TOKEN = "24.adda70c11b9786206253ddb70affdc46.2592000.1493524354.282335-1234567"; // 百度云中开通对应服务应用的 API Key 建议开通应用的时候多选服务 private static String clientId = "*********"; // 百度云中开通对应服务应用的 Secret Key private static String clientSecret = "**********"; public static String getAccessToken() { String authHost = "https://aip.baidubce.com/oauth/2.0/token"; HttpClient client = new HttpClient(); List<KeyValuePair<String, String>> paraList = new List<KeyValuePair<string, string>>(); paraList.Add(new KeyValuePair<string, string>("grant_type", "client_credentials")); paraList.Add(new KeyValuePair<string, string>("client_id", clientId)); paraList.Add(new KeyValuePair<string, string>("client_secret", clientSecret)); HttpResponseMessage response = client.PostAsync(authHost, new FormUrlEncodedContent(paraList)).Result; String result = response.Content.ReadAsStringAsync().Result; Console.WriteLine(result); //获取返回的字符串 //string test = AccessToken.getAccessToken(); //Response.Write(test + "<br/>"); //获取返回的Access_Token string Access_Token = ""; JavaScriptSerializer Jss = new JavaScriptSerializer(); Dictionary<string, object> DicText = (Dictionary<string, object>)Jss.DeserializeObject(result); //若是返回值中含有access_token,则将其值赋予Access_Token,不存在则说明获取失败。 if (!DicText.ContainsKey("access_token")) { Access_Token = "获取Access_Token失败"; } else { Access_Token = DicText["access_token"].ToString(); } //Session["Token"] = Access_Token; //Response.Write(Access_Token); return Access_Token; } } }
2.FaceAdd.csweb
主要功能:在人脸库中新建人脸,并设置这我的脸的编号和分组,这个类也是基于百度云的开发文档chrome
using System; using System.Collections.Generic; using System.IO; using System.Net; using System.Text; using System.Web; using System.Web.Script.Serialization; namespace com.baidu.ai { public class FaceAdd { // 人脸注册 ///参数说明:token->以前获取的Access_Token,base64->图片数据,tel->人脸编号 public static string add(string token,string base64,string tel) { //string token = "[调用鉴权接口获取的token]"; string host = "https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=" + token; Encoding encoding = Encoding.Default; HttpWebRequest request = (HttpWebRequest)WebRequest.Create(host); request.Method = "post"; request.KeepAlive = true; //将数据写入json字符串中 Dictionary<String, String> dic = new Dictionary<string, string>(); dic.Add("image", base64); dic.Add("image_type", "BASE64"); //人脸库里的分组名 dic.Add("group_id", "Users"); //这我的脸的编号 dic.Add("user_id", tel); //图片质量检测,Low表示能够接受较低画质的人脸数据 dic.Add("quality_control", "LOW"); //活体检测,这里只是一个小Demo,因此没有添加活体检测的功能 dic.Add("liveness_control", "NONE"); JavaScriptSerializer js = new JavaScriptSerializer(); String str = js.Serialize(dic); byte[] buffer = encoding.GetBytes(str); request.ContentLength = buffer.Length; request.GetRequestStream().Write(buffer, 0, buffer.Length); HttpWebResponse response = (HttpWebResponse)request.GetResponse(); StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.Default); string result = reader.ReadToEnd(); Console.WriteLine("人脸注册:"); Console.WriteLine(result); return result; } } }
3.FaceSearch.cs数据库
主要功能:将从前端获取的Base64格式的人脸图片信息和人脸库中已有的人脸进行对比,匹配的编号和匹配程度(百分制),参考百度云人脸搜索。json
using System; using System.Collections.Generic; using System.IO; using System.Net; using System.Text; using System.Web; using System.Web.Script.Serialization; namespace com.baidu.ai { public class FaceSearch { // 人脸搜索 public static string Search(string token, string strbase64) { //服务器地址,Access_Token做为凭证 string host = "https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=" + token; Encoding encoding = Encoding.Default; HttpWebRequest request = (HttpWebRequest)WebRequest.Create(host); request.Method = "post"; request.KeepAlive = true; //序列化,生成json字符串 Dictionary<String, String> dic = new Dictionary<string, string>(); dic.Add("image", strbase64); dic.Add("image_type", "BASE64"); dic.Add("group_id_list", "Users"); dic.Add("quality_control", "LOW"); dic.Add("liveness_control", "NONE"); JavaScriptSerializer js = new JavaScriptSerializer(); String str = js.Serialize(dic); byte[] buffer = encoding.GetBytes(str); request.ContentLength = buffer.Length; request.GetRequestStream().Write(buffer, 0, buffer.Length); HttpWebResponse response = (HttpWebResponse)request.GetResponse(); StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.Default); string result = reader.ReadToEnd(); Console.WriteLine("人脸搜索:"); Console.WriteLine(result); return result; } } }
主类其实就是上面三个类,可是为了方便从上面三个类返回的json字符串中取值和判断,笔者又添加了两个类
4.SearchReturn.cs
主要功能:实现json的反序列化,这个类文件中的几个类定义了一个数据类型,用于存放FaceSearch返回的json字符串转换成的变量。
其关系是 SearchReturn>Result>User_List
using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> /// SearchReturn 的摘要说明 /// </summary> namespace com.baidu.ai { public class SearchReturn { public int error_code { get; set; } public string error_msg { get; set; } public long log_id { get; set; } public int timestamp { get; set; } public int cached { get; set; } public Result result { get; set; } } public class Result { public string face_token { get; set; } public User_List[] user_list { get; set; } } public class User_List { public string group_id { get; set; } public string user_id { get; set; } public string user_info { get; set; } public float score { get; set; } } }
5.ReturnResultDetect.cs
主要功能:基于FaceAdd和FaceSearch返回的json字符串,获取相应的值并返回相应的标记以帮助业务代码的实现。
(*须要在Nuget中添加Newtonsoft包)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Script.Serialization; using Newtonsoft.Json.Linq; using com.baidu.ai; using Newtonsoft.Json; /// <summary> /// ReturnResultDetect 的摘要说明 /// </summary> namespace com.baidu.ai { public static class ReturnResultDetect { public static int GetFaceAddReturnResult(string strjson) { int BackResult = 0; SearchReturn feedback = JsonConvert.DeserializeObject<SearchReturn>(strjson); if (feedback.result==null) { BackResult = 0; } else { BackResult = 1; } return BackResult; } public static string GetFaceSearchReturnResult(string strjson) { string BackResult =""; int score = 0; //将收到的json字符串转化成SearchReturn类型的变量,即反序列化 SearchReturn feedback = JsonConvert.DeserializeObject<SearchReturn>(strjson); if (feedback.result==null) { BackResult = "_0"; //未检测到人脸 } else { score = Convert.ToInt32(feedback.result.user_list[0].score); if (score<80) { BackResult = "_1"; //人脸不匹配 } else { BackResult = feedback.result.user_list[0].user_id; } } return BackResult; } } }
人脸注册的图像获取主要是经过HTML5的Video标签
和Canvas标签
,原理是将前置摄像头的视频内容放到video
中显示,而后经过点击按钮获取点击时刻的video
截图,将图片信息放入canvas
中保存,而且将图片内容编码为Base64再经过Hiddenfield
控件传给后端,实现后端对图片信息的获取。
前端代码
/*<%@ Page Language="C#" AutoEventWireup="true" CodeFile="User_Face_Signup.aspx.cs" Inherits="User_Face_Signup" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset='UTF-8' /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <title>人脸注册</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> <link rel="stylesheet" href="./css/font.css"> <link rel="stylesheet" href="./css/xadmin.css"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="./js/xadmin.js"></script> <script type="text/javascript" src="./js/cookie.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form id="form1" runat="server"> <div> <div> <%--<div></div>--%> <div style="margin-top: 80px; margin-left: 20%; width: 30%; padding: 10px" class="layui-bg-green">人脸注册</div> <div style="margin-left: 20%; margin-top: 20px"> <video id="video" autoplay="" style="width: 70%;"></video> </div> <div style="margin-top: 10px; margin-left: 20%; width: 70%"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> <div style="margin-top: 10px; margin-left: 20%; width: 30%"> <asp:Button ID="capture" runat="server" Text="提交并注册" OnClick="capture_Click" class="layui-btn" /> </div> <%--<div style="margin-left: 20%; width: 70%"> <span style="color: #f00; font-size: smaller"> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> </span> </div>--%> </div> </div>*/ <!-- 显示MediaStream视频流 --> <div> <asp:HiddenField ID="HiddenField1" runat="server" /> </div> <div style="display: none"> <canvas id="canvas" width="480" height="320"></canvas> </div> <script type="text/javascript"> // 访问用户媒体设备的兼容方法 function getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { // 最新的标准API navigator.mediaDevices.getUserMedia(constraints) .then(success).catch(error); } else if (navigator.webkitGetUserMedia) { // Webkit核心浏览器 navigator.webkitGetUserMedia(constraints, success, error); } else if (navigator.mozGetUserMedia) { // Firefox浏览器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { // 旧版API navigator.getUserMedia(constraints, success, error); } } var video = document.getElementById("video");// video元素 var canvas = document.getElementById("canvas");// canvas元素 var context = canvas.getContext("2d"); // 成功的回调函数 function success(stream) { var CompatibleURL = window.URL || window.webkitURL video.src = CompatibleURL.createObjectURL(stream);//将视频流设置为video元素的源 video.play();// 播放视频 } // 异常的回调函数 function error(error) { console.log('访问用户媒体设备失败:', error.name, error.message); } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { // 调用用户媒体设备,访问摄像头 getUserMedia({ video: { width: 480, height: 320 } }, success, error); } else { alert('您的浏览器不支持访问用户媒体设备!'); } // 绑定拍照按钮的点击事件 document.getElementById("capture").addEventListener("click", function () { context.drawImage(video, 0, 0, 480, 320); // 将video画面在canvas上绘制出来 var data = canvas.toDataURL('image/png', 1); //将当前显示的图像传到Base64编码的字符串里 document.getElementById('HiddenField1').value = data; //将上面转换好的Base64编码传到C#的HiddenField里,方便后端取值 }); </script> </form> </body> </html>
后端代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using com.baidu.ai; using System.Data; using System.Data.Sql; using System.Data.SqlClient; public partial class User_Face_Signup : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label1.Text= "<span style='color: #c2c2c2; font-size: x-small'>**请在光线充足的地方录入人脸以提升刷脸登陆准确度!**<br />**准备好后点击下方按钮便可录入人脸!**</ span > "; } protected void capture_Click(object sender, EventArgs e) { //下面几个从session传过来的值是笔者这个项目里前一个页面的值,能够不看,可是为了保证程序完整性笔者仍是将其放了上来 string name = Session["UserName"].ToString(); string tel = Session["UserTel"].ToString(); string password = Session["UserPass"].ToString(); string email = Session["UserMail"].ToString(); string PreBase64 = HiddenField1.Value; string Base64 = ""; //兼容各类不一样的图片格式 if (PreBase64.Contains("data:image/png;base64,")) { Base64 = PreBase64.Replace("data:image/png;base64,", ""); } if(PreBase64.Contains("data:image/jpg; base64,")) { Base64 = PreBase64.Replace("data:image/jpg;base64,", ""); } if (PreBase64.Contains("data:image/jpeg; base64,")) { Base64 = PreBase64.Replace("data:image/jpeg;base64,", ""); } //调用类AccessToken中的getAccessToken方法,获取返回值Access_Token //注:Access_Token其实每次取值均可以保留一段时间,可是为了减小没必要要的麻烦,笔者这里仍是每次都获取新的Access_Token,代价是每次都要多链接一次人脸库,浪费时间 string Access_Token = AccessToken.getAccessToken(); //将图片信息和对应人脸编号传入,上传到服务器 string Face_Add_Return = FaceAdd.add(Access_Token, Base64, tel); //获取人脸添加的返回值,1表示添加成功,不然为失败 int Face_Add_Result = ReturnResultDetect.GetFaceAddReturnResult(Face_Add_Return); if (Face_Add_Result==1) { SqlConnection conn = new SqlConnection(); conn.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionStringProManage"].ConnectionString; try { conn.Open(); string SQL = "insert into Users (uername,password,usertype,name,tel,email) values (@tel,@password,2,@name,@tel,@email)"; SqlCommand cmd = new SqlCommand(); cmd.Connection = conn; cmd.CommandType = CommandType.Text; cmd.CommandText = SQL; //依次添加每一个字段的值 SqlParameter ptel = new SqlParameter("@tel", SqlDbType.VarChar, 11); ptel.Value = tel; cmd.Parameters.Add(ptel); SqlParameter ppassword = new SqlParameter("@password", SqlDbType.VarChar, 20); ppassword.Value = password; cmd.Parameters.Add(ppassword); SqlParameter pname = new SqlParameter("@name", SqlDbType.NVarChar, 10); pname.Value = name; cmd.Parameters.Add(pname); SqlParameter pemail = new SqlParameter("@email", SqlDbType.NVarChar, 30); pemail.Value = email; cmd.Parameters.Add(pemail); int R = cmd.ExecuteNonQuery(); //R 的值就是返回影响表的行数 if (R > 0) { Session["ReturnPath"] = "Move_login.aspx"; Session["Message"] = "恭喜,注册成功!"; Response.Redirect("Success.aspx"); } else { Session["Message"] = "插入失败,请检查您的操做!"; Response.Redirect("Error.aspx"); } //Session["ReturnPath"] = "Admin_Add.aspx"; //Response.Redirect("Mid.aspx"); } finally { conn.Close(); } } else { Label1.Text = "<span style='color: #f00; font-size: smaller'>**未检测到人脸,请重试!**</span> "; } } }
人脸搜索和人脸注册的实现方式是相似的,只不过一个是写(注册),一个是读(搜索)。注册是把人脸信息录入人脸库,并给其分配一个惟一标识号——人脸编号,而搜索就是一个相反的过程,经过上传的人脸与数据库中的人脸对比,返回这我的脸编号和类似度。
前端代码
<%--和人脸注册的代码基本一致--> <%@ Page Language="C#" AutoEventWireup="true" CodeFile="User_Face_Login.aspx.cs" Inherits="User_Face_Login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset='UTF-8' /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/> <title>刷脸登陆</title> <meta name="renderer" content="webkit"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> <link rel="stylesheet" href="./css/font.css"/> <link rel="stylesheet" href="./css/xadmin.css"/> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="./js/xadmin.js"></script> <script type="text/javascript" src="./js/cookie.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form id="form1" runat="server"> <div> <div> <%--<div></div>--%> <div style="margin-top: 80px; margin-left: 20%; width: 30%; padding: 10px" class="layui-bg-green">刷脸登陆</div> <div style="margin-left: 20%; margin-top: 20px"> <video id="video" autoplay="" style="width: 70%;"></video> </div> <div style="margin-top: 10px; margin-left: 20%; width: 70%"> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> </div> <div style="margin-top: 10px; margin-left: 20%; width: 30%"> <asp:Button ID="capture" runat="server" Text="登陆" OnClick="capture_Click" class="layui-btn" /> </div> <%--<div style="margin-left: 20%; width: 70%"> <span style="color: #f00; font-size: smaller"> <asp:Label ID="Label1" runat="server" Text=""></asp:Label> </span> </div>--%> </div> </div> <!-- 显示MediaStream视频流 --> <div> <asp:HiddenField ID="HiddenField1" runat="server" /> </div> <div style="display: none"> <canvas id="canvas" width="480" height="320"></canvas> </div> <script type="text/javascript"> // 访问用户媒体设备的兼容方法 function getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { // 最新的标准API navigator.mediaDevices.getUserMedia(constraints) .then(success).catch(error); } else if (navigator.webkitGetUserMedia) { // Webkit核心浏览器 navigator.webkitGetUserMedia(constraints, success, error); } else if (navigator.mozGetUserMedia) { // Firefox浏览器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { // 旧版API navigator.getUserMedia(constraints, success, error); } } var video = document.getElementById("video");// video元素 var canvas = document.getElementById("canvas");// canvas元素 var context = canvas.getContext("2d"); // 成功的回调函数 function success(stream) { var CompatibleURL = window.URL || window.webkitURL video.src = CompatibleURL.createObjectURL(stream);//将视频流设置为video元素的源 video.play();// 播放视频 } // 异常的回调函数 function error(error) { console.log('访问用户媒体设备失败:', error.name, error.message); } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { // 调用用户媒体设备,访问摄像头 getUserMedia({ video: { width: 480, height: 320 } }, success, error); } else { alert('您的浏览器不支持访问用户媒体设备!'); } // 绑定拍照按钮的点击事件 document.getElementById("capture").addEventListener("click", function () { context.drawImage(video, 0, 0, 480, 320);// 将video画面在canvas上绘制出来 var data = canvas.toDataURL('image/png', 1); document.getElementById('HiddenField1').value = data; }); </script> </form> </body> </html>
后端代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using com.baidu.ai; public partial class User_Face_Login : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Label1.Text = "<span style='color: #c2c2c2; font-size: x-small'>**请保持环境光线充足以提升刷脸登陆准确度!**<br />**准备好后点击下方按钮便可登陆!**</ span > "; } protected void capture_Click(object sender, EventArgs e) { //与上面相似的,获取前端传过来的Base64格式的图片编码 string PreBase64 = HiddenField1.Value; string Base64 = ""; if (PreBase64.Contains("data:image/png;base64,")) { Base64 = PreBase64.Replace("data:image/png;base64,", ""); } if (PreBase64.Contains("data:image/jpg; base64,")) { Base64 = PreBase64.Replace("data:image/jpg;base64,", ""); } if (PreBase64.Contains("data:image/jpeg; base64,")) { Base64 = PreBase64.Replace("data:image/jpeg;base64,", ""); } //获取Access_Token,同上 string Access_Token = AccessToken.getAccessToken(); //获取返回的json字符串 string feedback = FaceSearch.Search(Access_Token, Base64); //从返回的字符串中取值,并根据值给出相应的判断 string backid = ReturnResultDetect.GetFaceSearchReturnResult(feedback); if (backid=="_0") { Label1.Text = "<span style='color: #f00; font-size: smaller'>**未检测到人脸,请重试!**</span> "; } else if (backid == "_1") { Label1.Text = "<span style='color: #f00; font-size: smaller'>**您还没有注册,请注册后登陆**</span> "; Response.Redirect("Faca_Login_error.aspx"); } else { Session["Move_Name"] = backid; Session["Move_Islogin"] = 2; Response.Redirect("Move_User.aspx"); } } }
本文是小弟在学习过程当中作的一个小Demo,若有错误或者不当之处还请各位大佬斧正。
转载请注明原文连接。