devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于百度API+Django的简易人脸识别(登录/注册)_基于百度ai开放平台的人脸识别实验

作者：菜鸟追梦旅行 | 2024-04-27 19:35:45

赞

踩

基于百度ai开放平台的人脸识别实验

博主系在校大二学生，有问题望各位多多指教。

前言

     近年来，人工智能技术的迅猛发展引领着科技创新的浪潮。其中，人脸识别技术作为一项重要的应用领域，受到了广泛关注。在今天的数字化时代，我们对于安全性和便利性的需求不断提升，人脸识别技术在实现高效身份认证和用户体验方面展现出了巨大的潜力。

    本技术博客将引导您了解并实践基于百度API和Django构建的简易人脸识别登录/注册的开发过程。通过结合百度API中提供的人脸识别功能和Django框架的强大特性，实现人脸识别登录/注册机制。

一、开发环境

编程语言

Python(3.9)

开发框架

Django(3.2.9)

前端技术

Html css JavaScript AJAX Bootstrap等

数据库软件

Mysql 5.6.50

数据库管理工具

Navicat 15 for Mysql

开发工具

PyCharm(2022.3.1)

二、前期准备

1.注册百度AI开放平台账号 

2.在控制台创建人脸识别应用

3.得到AppID，API Key，Secret Key

此过程简单易学，本人不再系统赘述，具体详细流程可参考其他博主的文章。

b422dd8dbf214980b86c557d70ebaed0.png

三、前端人脸登录/注册页面

  1. {% load static %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>人脸登录</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.     <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
  9.     <meta content="MyraStudio" name="author" />
  10.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  11.     <link href="{% static 'assets/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css" />
  12.     <link href="{% static 'assets/css/icons.min.css' %}" rel="stylesheet" type="text/css" />
  13.     <link href="{% static 'assets/css/theme.min.css' %}" rel="stylesheet" type="text/css" />
  14. </head>
  15. <body class="bg-primary">
  16.     <div>
  17.         <div class="container">
  18.             <div class="row">
  19.                 <div class="col-12">
  20.                     <div class="d-flex align-items-center min-vh-100">
  21.                         <div class="w-100 d-block my-5">
  22.                             <div class="row justify-content-center">
  23.                                 <div class="col-md-8 col-lg-5">
  24.                                      <div class="card">
  25.                                         <div class="card-body">
  26.                                             <div class="text-center mb-4 mt-3">
  27.                                                 <h4>人脸登录</h4>
  28.                                             </div>
  29.                                             <form action="/login/" method="post" class="p-2">
  30.                                                 {% csrf_token %}
  31.                                                 <span style="color: red;">{{ error_msg }}</span>
  32.                                                 <div class="form-group">
  33.                                                     <label for="emailaddress">用户名：</label>
  34.                                                     <input name="username" class="form-control" type="text" id="username" required="" placeholder="用户名">
  35.                                                 </div>
  36.                                                 <div class="form-group">
  37.                                                     <label for="password">密码:</label>
  38.                                                     <input name="password" class="form-control" type="password" required="" id="password" placeholder="密码">
  39.                                                 </div>
  40.                                           <div class="mb-3 text-center">
  41.                                                     <button class="btn btn-primary btn-block" type="submit"> 登录</button>
  42.                                                     <button class="btn btn-primary btn-block" type="button" data-toggle="modal" data-target="#exampleModal" onclick="loadCamera()"> 刷脸登录</button>
  43.                                                 </div>
  44.                                             </form>
  45.                                         </div>
  46.                                         <!-- end card-body -->
  47.                                     </div>
  48.                                     <!-- end card -->
  49.  
  50.                                     <div class="row mt-4">
  51.                                         <div class="col-sm-12 text-center">
  52.                                             <p class="text-white-50 mb-0">创建用户? <a href="{% url 'regist' %}" class="text-white-50 ml-1"><b>Sign Up</b></a></p>
  53.                                         </div>
  54.                                     </div>
  55.                                 </div>
  56.                                 <!-- end col -->
  57.                             </div>
  58.                             <!-- end row -->
  59.                         </div> <!-- end .w-100 -->
  60.                     </div> <!-- end .d-flex -->
  61.                 </div> <!-- end col-->
  62.             </div> <!-- end row -->
  63.         </div>
  64.         <!-- end container -->
  65.     </div>
  66.     <!-- end page -->
  67.  
  68.     <!-- jQuery  -->
  69.     <script src="{% static 'assets/js/jquery.min.js' %}"></script>
  70.     <script src="{% static 'assets/js/bootstrap.bundle.min.js' %}"></script>
  71.     <script src="{% static 'assets/js/metismenu.min.js' %}"></script>
  72.     <script src="{% static 'assets/js/waves.js' %}"></script>
  73.     <script src="{% static 'assets/js/simplebar.min.js' %}"></script>
  74.     <!-- App js -->
  75.     <script src="{% static 'assets/js/theme.js' %}"></script>
  76.      <!-- Modal -->
  77.      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  78.          <div class="modal-dialog" role="document">
  79.              <div class="modal-content">
  80.                  <div class="modal-header">
  81.                      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
  82.                      <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
  83.                          <span aria-hidden="true">&times;</span>
  84.                      </button>
  85.                  </div>
  86.                  <div class="modal-body">
  87.                     <video id="video" style="width: 450px;height: 400px;"></video>	<!-- 视频播放 -->
  88.  
  89.            <canvas id="canvas" style="width: 600px;height: 400px; display: none;" ></canvas>	<!-- 动画效果 -->
  90.                  </div>
  91.                  <div class="modal-footer">
  92.                      <button type="button" class="btn btn-secondary waves-effect waves-light" data-dismiss="modal">关闭</button>
  93.                      <button type="button" class="btn btn-primary waves-effect waves-light" onclick="faceLogin()" id="log_btn">登录</button>
  94.                  </div>
  95.              </div>
  96.          </div>
  97.      </div>
  98. <script type="text/javascript">
  99. 	function loadCamera() {
  100. 		constraint={			
  101. 				video:true,		//加载摄像头
  102. 				audio:false		//不加载MAC（麦克风）音频
  103. 		}
  104. 		let media=navigator.mediaDevices.getUserMedia(constraint)
  105. 		video=document.getElementById("video")
  106. 		media.then(res=>{
  107. 			video.srcObject=res
  108. 			video.play()
  109. 		}).catch(err=>{
  110. 			log.console(error)
  111. 		})
  112. 	}
  113. 	function faceLogin(){
  114. 		let canvas = document.getElementById("canvas")	
  115.         const video = document.getElementById("video");	
  116.         const context = canvas.getContext("2d");  //获取canvas的画板
  117. 		context.drawImage(video,0,0,300,150)
  118. 		canvas = document.getElementById("canvas")
  119.         let imageData = canvas.toDataURL();	//将canvas中的二进制数据格式的图片，转为BASE64编码数据格式
  120. 		console.log(imageData)
  121. 		imageData = imageData.substring(22,imageData.length)  //去掉文件头前22个字符
  122.         //使用AJAX将图片数据发送到大服务器
  123. 		$.ajax({
  124. 			url:"/face_login/",	
  125. 			method:"post",			
  126. 			data:{					
  127. 				imageData:imageData
  128. 			},
  129. 			dataType:"json",		
  130. 			success:function(data){	
  131. 				if(data.error_msg === "SUCCESS"){
  132.                      if(data.face_login === "SUCCESS"){
  133.                        document.location.href="/index" //识别成功，返回首页
  134.                     }else{
  135.                        alert("登录失败，请调整人脸角度")
  136.                     }
  137. 				}else{
  138. 					alert("没有检测到人脸。请靠近摄像头")
  139. 				}
  140. 			}
  141. 		})
  142. 	}
  143. </script>
  144. </body>
  145. </html>
  1. {% load static %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>人脸注册</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.     <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
  9.     <meta content="MyraStudio" name="author" />
  10.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  11.     <link href="{% static 'assets/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css" />
  12.     <link href="{% static 'assets/css/icons.min.css' %}" rel="stylesheet" type="text/css" />
  13.     <link href="{% static 'assets/css/theme.min.css' %}" rel="stylesheet" type="text/css" />
  14.  
  15. </head>
  16. <body class="bg-primary">
  17.  
  18.     <div>
  19.         <div class="container">
  20.             <div class="row">
  21.                 <div class="col-12">
  22.                     <div class="d-flex align-items-center min-vh-100">
  23.                         <div class="w-100 d-block my-5">
  24.                             <div class="row justify-content-center">
  25.                                 <div class="col-md-8 col-lg-5">
  26.                                      <div class="card" style="width:500px;">
  27.                                         <div class="card-body">
  28.                                             <div class="text-center mb-4 mt-3">
  29.                                                   <h4>人脸注册</h4>
  30.                                                   <video id="video" style="width: 450px;height: 400px;"></video>	<!-- 视频播放 -->
  31. 			                                      <canvas id="canvas" style="width: 600px;height: 400px; display: none;" ></canvas>	<!-- 动画效果 -->
  32.                                                   <button class="btn btn-primary btn-block" onclick="faceReg()">注册人脸</button>
  33.                                             </div>
  34.                                         </div>
  35.                                         <!-- end card-body -->
  36.                                     </div>
  37.                                     <!-- end card -->
  38.  
  39.                                     <div class="row mt-4">
  40.                                         <div class="col-sm-12 text-center">
  41.                                             <p class="text-white-50 mb-0">人脸登录? <a href="{% url 'login' %}" class="text-white-50 ml-1"><b>let's go</b></a></p>
  42.                                         </div>
  43.                                     </div>
  44.  
  45.                                 </div>
  46.                                 <!-- end col -->
  47.                             </div>
  48.                             <!-- end row -->
  49.                         </div> <!-- end .w-100 -->
  50.                     </div> <!-- end .d-flex -->
  51.                 </div> <!-- end col-->
  52.             </div> <!-- end row -->
  53.         </div>
  54.         <!-- end container -->
  55.     </div>
  56.     <!-- end page -->
  57.  
  58.     <!-- jQuery  -->
  59.     <script src="{% static 'assets/js/jquery.min.js' %}"></script>
  60.     <script src="{% static 'assets/js/bootstrap.bundle.min.js' %}"></script>
  61.     <script src="{% static 'assets/js/metismenu.min.js' %}"></script>
  62.     <script src="{% static 'assets/js/waves.js' %}"></script>
  63.     <script src="{% static 'assets/js/simplebar.min.js' %}"></script>
  64.  
  65.     <!-- App js -->
  66.     <script src="{% static 'assets/js/theme.js' %}"></script>
  67.  
  68. <script type="text/javascript">
  69. 	function loadCamera() {
  70. 		constraint={			
  71. 				video:true,		//加载摄像头
  72. 				audio:false		//不加载MAC（麦克风）音频
  73.  
  74. 		}
  75. 		let media=navigator.mediaDevices.getUserMedia(constraint)
  76. 		video=document.getElementById("video")
  77. 		media.then(res=>{
  78. 			video.srcObject=res
  79. 			video.play()
  80. 		}).catch(err=>{
  81. 			log.console(error)
  82. 		})
  83. 	}
  84. 	loadCamera()
  85.  
  86. 	function faceReg(){
  87.         let canvas = document.getElementById("canvas");	
  88.         const video = document.getElementById("video");	
  89.         const context = canvas.getContext("2d");  //获取canvas的画板
  90. 		context.drawImage(video,0,0,300,150)
  91. 		canvas = document.getElementById("canvas")
  92.         let imageData = canvas.toDataURL();   //将canvas中的二进制数据格式的图片，转为BASE64编码数据格式
  93. 		console.log(imageData)
  94. 		imageData = imageData.substring(22,imageData.length)  //去掉文件头前22个字符是文件格式描述
  95. 		$.ajax({
  96. 			url:"/face_reg/",	
  97. 			method:"post",			
  98. 			data:{					
  99. 				imageData:imageData
  100. 			},
  101. 			dataType:"json",		
  102. 			success:function(data){	
  103. 				if(data.error_msg === "SUCCESS"){				
  104. 					if(data.face_reg === "SUCCESS"){
  105. 						alert("注册成功！")
  106. 						document.location.href="/login"
  107. 					}else{
  108. 						alert("注册失败，请调整人脸角度")
  109. 					}
  110. 				}else{
  111. 					alert("没有检测到人脸。请靠近摄像头")
  112. 				}
  113. 			}
  114. 		})
  115. 	}
  116. </script>
  117. </body>
  118. </html>

四、后端人脸登录/注册(Views层)

  1. from django.shortcuts import render, HttpResponse, redirect
  2. from aip import AipFace
  3. from app01 import models
  4. from django.views.decorators.csrf import csrf_exempt
  5. from django.http import JsonResponse
  1. @csrf_exempt  # 取消跨站请求伪造（CSRF）防护。
  2. def face_login(request):
  3.     """
  4.     :param request:
  5.     :return: result:
  6.     :author: hexiaohui
  7.     :time:2023/7/19
  8.     :function: face_login
  9.     """
  10.     appId = "你的appId"
  11.     apiKey = "你的apiKey"
  12.     secretKey = "你的secretkey"
  13.     imageType = "BASE64"
  14.     # 前期用户申请的百度API的关键码
  15.     client = AipFace(appId, apiKey, secretKey)
  16.     # 初始化AipFace对象
  17.     imageData = request.POST.get("imageData")  # 获取前端AJAX的图像数据
  18.     # print(imageData)
  19.  
  20.     options = {"max_face_num": 1, "face_field": 'age,beauty,gender,emotion'}  # 设置请求参数
  21.  
  22.     result = client.detect(imageData, imageType, options)  # 调用人脸检测函数 有参:options
  23.  
  24.     # print("年龄为:{}".format(result["result"]["face_list"][0]["age"]))
  25.     # print("颜值打分:{}".format(result["result"]["face_list"][0]["beauty"]))
  26.     # print("性别:{}".format(result["result"]["face_list"][0]["gender"]["type"]))
  27.     # print("情绪:{}".format(result["result"]["face_list"][0]["emotion"]["type"]))
  28.     # 输出对应的字段信息  age/beauty/gender/emotion
  29.  
  30.     if result["error_msg"] in "SUCCESS":
  31.         mr = models.User.objects.get()  # 获取数据库中的用户信息
  32.         mr1 = {'image': mr.userFace, 'image_type': imageType}
  33.         mr2 = {'image': imageData, 'image_type': imageType}
  34.         # 将前端和后端的图像数据转换成字典
  35.         faceList = [mr1, mr2]
  36.         # 设置为列表形式，满足match函数的参数类型要求
  37.         matchResult = client.match(faceList)
  38.         # 调用match函数 对比两种数据 反馈出相似度得分数据score
  39.         # print(matchResult)
  40.         if matchResult["error_msg"] in "SUCCESS":
  41.             score = matchResult['result']['score']
  42.             # 取出得分数据
  43.             if score >= 95:
  44.                 # 若相似度大于95 则检测成功
  45.                 result["face_login"] = "SUCCESS"
  46.     return JsonResponse(result)
  1. @csrf_exempt
  2. def face_reg(request):
  3.     """
  4.        :param request:
  5.        :return: result:
  6.        :author: hexiaohui
  7.        :time:2023/7/20
  8.        :function: face_regist
  9.     """
  10.     appId = "你的appId"
  11.     apiKey = "你的apiKey"
  12.     secretKey = "你的secreKey"
  13.     imageType = "BASE64"
  14.     client = AipFace(appId, apiKey, secretKey)
  15.     imageData = request.POST.get("imageData")  
  16.     options = {"max_face_num": 1}
  17.     result = client.detect(imageData, imageType, options)
  18.     if result["error_msg"] in "SUCCESS":
  19.         models.User.objects.update(userFace=imageData)
  20.         result["face_reg"] = "SUCCESS"
  21.     return JsonResponse(result)

五、数据访问层(models)+数据库表

  1. from django.db import models
  2.  
  3. class User(models.Model):
  4.     username = models.CharField(max_length=25)
  5.     password = models.CharField(max_length=25)
  6.     userFace = models.TextField()

  28a436112d1340f68b3ff91484c4d009.png

六、成果展示

普通用户端登录

人脸录入

人脸登录

七、总结

1  教训和经验：

    在编写过程中，要注意具体函数的参数类型，多看函数体的文本解释，比如match函数的参数，以及search函数参数的区别，要深入了解具体函数的作用和功能，多学习平台的API和SDK文档。 

文档地址

    Views层中要记得引用@csrf_exempt 装饰器，取消跨站请求伪造（CSRF）防护。要不然报403，这个问题真的解决了很久...

@csrf_exempt  # 取消跨站请求伪造（CSRF）防护。

2  不足和缺点：

    人脸识别还存在一些问题：例如没有设置用户组，只能针对单个用户进行识别和录入。多个用户组的创建应使用search函数进行人脸比对。另外前端的知识自己掌握的还不全面，今后应加深对JS，AJAX的学习和利用。在Django开发框架中，还有一些细节的东西没有掌握，例如防跨站和取消跨站。而在使用一些函数的过程中，急于求成，不注重具体含义，因此浪费了很多测试的时间。而对于Python的一些语法和概念，有时还处于一种模糊的情景。理应扎实基础，熟悉基本的数据结构。

3  收获和体会:

    在百度平台文档的阅读和学习过程中，了解到了各种参数和函数的使用和具体含义，还调用options里的参数，对人脸进行年龄，情绪，颜值的分析，成功使用体验之后有满满的成就感....哈哈。虽然前端是老师教的但还是改了很多东西，后端完全就是自己写的了，虽然过程波折，但也总算是实现了功能，当然也有一些不足和遗憾，希望我继续努力！制作不易欢迎点赞！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/498340
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号