正文

微信小程序｜基于百度ai从零实现人脸识别小程序(代码片段)

陶人超有料  陶人超有料  2023-04-08  605

关键词：

写在前面

针对互联网上已有的人脸识别小程序项目，很多只是基于手动拍照，然后上传到SDK进行识别。这一过程完全脱离实际场景！无法直接使用！
本文项目是基于微信摄像头中的实时视频帧数据，通过实时动态识别小程序端所获取的照片帧，从而自动触发人脸识别和登录！完全贴合实际，真正的拿来即用！

一、需求背景

人脸识别是一个老生常谈的问题了，再继小程序的逐步普及化后，人脸识别的功能也变为了各大业务的家常菜。目前市面上已有的解决方案，一方面除了自研以外，对于本来就是小成本进行创业或者开发的个人以及初创型公司来说，接入一些专业的第三方的人脸识别接口不妨是一个优秀的解决方案。目前市面上常用的第三方支持技术有哪些，可以阅读本专栏的文章：微信小程序 | 人脸识别的最终解决方案 – 里面做了详细的介绍和解读，相信能带你弄请这个方向的技术行情。

为此，这一次我们自己动手来实现一次全流程的人脸识别小程序。没有基础不用担心，本文就是带领大家从零到一开始搭建，细致到每个网页功能如何选择、代码如何编写，前后端的逻辑如何编写。只会前端或者后端的小伙伴也不用担心，本文提供全流程的操作指引，让零基础的前/后端小白都能轻松上手。废话不多说相信看到上面酷炫的效果大家应该都按捺不住了，那就让我们开整把。

二、系统架构

2.1 系统技术栈

前端	后端
- 语言：vue 2.0 ｜ - 框架： uni-app ｜ - UI组件： uview	- 语言：python ｜ - 框架： Flask

2.2 系统架构图

2.3 系统请求时序图

2.4 详细接口请求时序图

三、项目实现

要使用百度智能云的api接口，就需要在控制台创建你的项目应用，通过项目应用去获取API Key``Secret Key ``Access_token,这三个参数是后续调用api接口的必填参数，缺一不可！

3.1 开通百度智能云API

登录到百度智能云人脸识别控制台
选择相应的API接口并进行购买操作即可（其中我们选择的是人脸比对），其实为了方便我们可以一次性将所有的人脸识别相关的产品全部都进行一次购买，反正都是按量计费，不进行调用也就不用收钱了。

3.2 并获取API Key

-在开通了服务的基础上，由于要获取三大认证参数，再调用接口之前我们仍需要进行应用的创建。

由此即可获取到三大参数

3.3 搭建项目调试环境

本项目是继续uniapp框架进行开发（采用uniapp框架开发的好处在于：在面对众多的小程序平台，我们只需要编写这一套代码就可以实现多平台的运行，极大程度的降低了开发成本！可以说是只要会一套小程序开发的流程，基本每个平台你都能拿下。）

详细的开发环境搭建过程，可以参考：从零开始搭建uni-app框架的小程序开发环境

3.4 参考百度云SDK文档

人脸识别接口Pthon SDK文档：人脸接口文档地址

3.5 人脸对比接口详解

接口能力

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

业务应用

用于比对多张图片中的人脸相似度并返回两两比对的得分，可用于判断两张脸是否是同一人的可能性大小。

典型应用场景：如人证合一验证，用户认证等，可与您现有的人脸库进行比对验证。

result = client.match([
    
        'image': base64.b64encode(open('1.jpg', 'rb').read()).decode(),
        'image_type': 'BASE64',
    ,
    
        'image': base64.b64encode(open('2.jpg', 'rb').read()).decode(),
        'image_type': 'BASE64',
    
])

请求参数

参数	必选	类型	说明
image	是	string	图片信息(总数据大小应小于10M)，图片上传方式根据image_type来判断。两张图片通过json格式上传，格式参考表格下方示例
image_type	是	string	图片类型 BASE64:图片的base64值，base64编码后的图片数据，编码后的图片大小不超过2M；URL:图片的 URL地址( 可能由于网络等原因导致下载图片时间过长)；FACE_TOKEN: 人脸图片的唯一标识，调用人脸检测接口时，会为每个人脸图片赋予一个唯一的FACE_TOKEN，同一张图片多次检测得到的FACE_TOKEN是同一个。
face_type	否	string	人脸的类型LIVE表示生活照：通常为手机、相机拍摄的人像图片、或从网络获取的人像图片等，IDCARD表示身份证芯片照：二代身份证内置芯片中的人像照片， WATERMARK表示带水印证件照：一般为带水印的小图，如公安网小图 CERT表示证件照片：如拍摄的身份证、工卡、护照、学生证等证件图片默认LIVE
quality_control	否	string	图片质量控制 NONE: 不进行控制 LOW:较低的质量要求 NORMAL: 一般的质量要求 HIGH: 较高的质量要求默认 NONE
liveness_control	否	string	活体检测控制 NONE: 不进行控制 LOW:较低的活体要求(高通过率低攻击拒绝率) NORMAL: 一般的活体要求(平衡的攻击拒绝率, 通过率) HIGH: 较高的活体要求(高攻击拒绝率低通过率) 默认NONE

返回参数

参数名	必选	类型	说明
score	是	float	人脸相似度得分
face_list	是	array	人脸信息列表
+face_token	是	string	人脸的唯一标志

返回示例


    "score": 44.3,
    "face_list": [  //返回的顺序与传入的顺序保持一致
        
            "face_token": "fid1"
        ,
        
            "face_token": "fid2"
        
    ]

3.6 人脸注册到人脸库功能实现

为了实现保存用户的人脸信息，用于验证人脸请求。一般都是有两种方案：

其一，是我们在自己的后台服务维护一套用户人脸信息库，然后在每次前端请求登入时进行读库操作，同时再调用client.match()方法对用户的登录信息进行比对。这样的做法可以实现高度自定义化，但是维护成本相对较高，主要包括数据的存储和可视化的展示
其二，百度SDK平台给我们提供了一套完整的用于维护用户人脸信息库API，而且还以Group分组的形式进行用户数据管理，这就使得对于用户的所归宿的不同组的权限进行区分。同样地，借助组的字段概念可以与业务系统打通，进而更为方便的管理用户。

3.6.1 前端代码实现

微信摄像头实时帧的获取与数据处理

要实现小程序端自动采集人脸数据并进行接口验证，就必须使用微信摄像头图像帧数据的采集与监听功能。

官方接口说明如下：

获取 Camera 实时帧数据文档地址

程序中实现思路如下：

1、调用onCameraFrame接口，生成帧数据监听器，然后使用listener.start()启动监听服务。
2、在listen接口中设置一个 setInterVal()时间循环任务,从而实现一个循环获取帧数据并循环上报并处理接口返回数据的任务，保证人脸登录的实时性！
3、特别地，对于获取到的帧数据，仍需要进行处理：将其转为Base64格式数据从而进行数据传输。

代码如下：

	startFaceCapture()
				console.log('=====show==facelogin=====')
				var that = this
				this.isAuthCamera = true
				var i = 1;
				const context = wx.createCameraContext()
				console.log('=====load===')
			
				const listener = context.onCameraFrame((frame) => 
					// console.log('==获取帧动画===',that.flag)
					if (frame && that.flag) 
						i++;
						that.frameQueue.push(frame)
						// console.log('==push任务',that.frameQueue.length)
						that.flag = false
						// console.log(i++, frame.data, frame.width, frame.height)
					
				)
				listener.start(
					success: function(res) 
						console.log("开始监听");
						let task = setInterval(function() 
							var timeStart = Date.now();
							//在此处处理store[0](图像的数据)；
							// store.shift();
							var frame = that.frameQueue.shift()
							console.log("开始运行===",frame,that.flag);
							that.flag = true;
							
							if(frame != undefined)
								
								let pngData = UPNG.encode([frame.data], frame.width, frame.height),  
									base64 = Base64Util.arrayBufferToBase64(pngData)
									
																	
								uni.request(
									url: 'http://127.0.0.1:8099/faceAuth' ,
									method: 'post',
									data: openId:uni.getStorageSync("openId"),base64Img:base64 ,
									dataType:'json',
									header: 
										   'content-type':'application/json'//自定义请求头信息
										,
									success:(res)=>
										
										
										console.log('===result===',res)
											clearInterval(task)
										this.$refs.uToast.show(
											...failTips,
											complete() 
											
											
										)
								
									,
									fail:(err)=>
											console.log("====执行失败===",err)
											clearInterval(task)
											that.isAuthCamera = false
											uni.navigateTo(
												url:'./login'
											)
									
								)
							
							
						
							
							// if(i==2)
							// 	clearInterval(task)
							// 	that.isAuthCamera = false
							// 
							
						, 2000);
					
				)
			,

3.6.1.1 首页登录界面源代码


<template>
	<view>


		<view class="content cover" :animation="animationBack">
			<!-- <view class="bg"></view>
			<view class="bg2"></view>
			<view class="tips">
				<text class="title">登录</text>
				<text class="subtitle">欢迎再次回来~</text>
			</view>
			<view class="form-box">
				<view class="btn"style="margin-top:10px;" @click='rotateFn(2)'>密码登录</view>
				<view class="other">
					<text>找回密码</text>
					<text style="color:#00c6fc;">录入人脸</text>
				</view>
			</view> -->


			<capture ref="faceLogin" @changeLoginMode="rotateFn(2)"></capture>

		</view>
		<view class="content cover" :animation="animationMain">
			<view class="bg"></view>
			<view class="bg2"></view>
			<view class="tips">
				<text class="title">登录</text>
				<text class="subtitle">欢迎再次回来~</text>
			</view>
			<view class="form-box">
				<view class="input-box">
					<image class="left"
						src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E8%B4%A6%E5%8F%B7.png">
					</image>
					<input placeholder="请输入账号" />
					<image class="right"
						src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E4%B8%8B%E6%8B%89.png">
					</image>
				</view>
				<view class="input-box">
					<image class="left"
						src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E5%AF%86%E7%A0%81.png">
					</image>
					<input placeholder="请输入密码" />
					<image class="right"
						src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%99%BB%E5%BD%95%E6%A0%B7%E5%BC%8F/%E7%99%BB%E5%BD%959/%E6%98%BE%E7%A4%BA%E5%AF%86%E7%A0%81.png">
					</image>
				</view>
				<view class="btn">登录</view>
				<view class="btn" style="margin-top:10px;" @click='login()'>刷脸登录</view>
				<view class="other">
					<text>找回密码</text>
					<text style="color:#00c6fc;">快速注册</text>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import capture from './capture.vue'
	export default 
		components: 
			capture
		,
		data() 
			return 
				animationMain: null, //正
				animationBack: null, //反
			
		,
		methods: 

			rotateFn(e) 
				
				this.animation_main = uni.createAnimation(
					duration: 400,
					timingFunction: 'linear'
				)
				this.animation_back = uni.createAnimation(
					duration: 400,
					timingFunction: 'linear'
				)
				// 点击正面
				if (e == 1) 
					this.animation_main.rotateY(180).step()
					this.animation_back.rotateY(0).step()
					this.animationMain = this.animation_main.export()
					this.animationBack = this.animation_back.export()
					this.$refs.faceLogin.startFaceCapture()
				 else 
					this.animation_main.rotateY(0).step()
					this.animation_back.rotateY(-180).step()
					this.animationMain = this.animation_main.export()
					this.animationBack = this.animation_back.export()
					
					
				
			,
			login() 
				var that = this;
				if (uni.getStorageSync("openId") == undefined) 
					wx.login(
						success(res) 
							console.log('===触发登录====', res)
							if (res.code) 
								uni.request(
									url: 'http://127.0.0.1:8000/miniapp/faceEngine/login/' + res.code,
									method: 'get',
									dataType: 'json',
									success: (res) => 
										console.log("====执行成功===", res)
										that.rotateFn(1)
										uni.setStorageSync("authed", true)
										uni.setStorageSync("openId", res.data.openid)
									,
									fail: (err) => 
										console.log("====执行失败===", err)
									
								)
							 else 
								console.log('登录失败！')
							
						
					)
				 else 
					that.rotateFn(1)
				
			,
		
	
</script>

<style lang="scss">
	page 
		margin: 0;
		padding: 0;
		min-height: 100vh;
		position: relative;
		background-color: rgb(118, 218, 255);
		overflow: hidden;
	

	page::before,
	page::after 
		content: '';
		position: absolute;
		top: 90vh;
		min-width: 300vw;
		min-height: 300vw;
		background-color: #76daff;
		animation: rote 10s linear infinite;
	

	page::before 
		left: -95%;
		border-radius: 45%;
		opacity: .5;
	

	page::after 
		left: -95%;
		border-radius: 46%;
	

	@keyframes rote 
		from 
			transform: rotateZ(0);
		

		to 
			transform: rotateZ(360deg);
		
	

	.cover 
		position: absolute;
		top: 0;
		left: 0;
	


	.content 
		width: 100vw;
		height: 100vh;
		background-color: #ffffff;
		transition: all 1s;
		backface-visibility: hidden;

		.tips 
			padding-top: 200rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: column;

			.title 
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
			

			.subtitle 
				line-height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
				color: #b0b0b1;
			

		

		.bg 
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 600rpx;
			height: 600rpx查看详情  
                
利用百度ai快速开发出一款“问答机器人”并接入小程序
先看实现效果： 利用百度UNIT预置的智能问答技能和微信小程序，实现语音问答机器人。这里主要介绍小程序功能开发实现过程，分享主要功能实现的子程序模块，都是干货!想了解UNIT预置技能调用，请参看我之前的帖子：《...  查看详情  
                
微信小程序实现ocr扫描识别(代码片段)
...第三方插件：OCR支持1、添加第三方插件第一步需要在微信小程序后台添加第三方插件，设置-第三方设置-插件管理，输入**ocr支持**搜索添加就可以了；2、购买识别次数OCR支持插件添加成功之后需要到开放社区购...  查看详情  
                
微信小程序系列：二小程序常用功能：跳转地图扫一扫人脸识别拍照拨打电话调整屏幕亮度文字可复制监听截屏...(代码片段)
....先言：(～￣▽￣)～，hello，微信小程序系列第二篇，介绍下小程序里的前端常用功能api，可以快速copy使用~二.文字可复制：小程序页面里的文字默认是没有长按复制功能的，需要套个标...  查看详情  
                
微信小程序系列：二小程序常用功能：跳转地图扫一扫人脸识别拍照拨打电话调整屏幕亮度文字可复制监听截屏...(代码片段)
....先言：(～￣▽￣)～，hello，微信小程序系列第二篇，介绍下小程序里的前端常用功能api，可以快速copy使用~二.文字可复制：小程序页面里的文字默认是没有长按复制功能的，需要套个标...  查看详情  
                
从零开始做一个微信小程序如何申请微信小程序
 微信小程序终于正式发布了，对于开发者朋友来说，今后都可以申请创建自己的小程序。那么微信小程序怎么申请？下面小编详细分享下从零开始做一个微信小程序的实战开发教程，希望操作步骤，对初期开发者会有所帮助...  查看详情  
                
基于百度ai开放平台的人脸识别及语音合成(代码片段)
基于百度AI的人脸识别及语音合成课题课题需求（1）人脸识别在Web界面上传人的照片，后台使用Java技术接收图片，然后对图片进行解码，调用云平台接口识别人脸特征，接收平台返回的人员年龄、性别、颜值等信息，将信息返...  查看详情  
                
新手从零开始学习微信小程序开发01
...1文章目录新手从零开始学习小程序开发01前言一、什么是微信小程序？二、如何着手学习微信小程序1.开发工具下载安装2.注册账户前言本章主要介绍微信小程序开发工具下载注册一、什么是微信小程序？我个人觉得微信...  查看详情  
                
微信小程序--》从零实现小程序项目案例(代码片段)
...🛵个人主页：亦世凡华、🛺系列专栏：微信小程序🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。👀引言      ⚓经过web前端开发的学习，相信大家对于前端开发...  查看详情  
                
微信小程序原生ai运动（动作）检测识别解决方案
前几年受疫情影响，人员流动受限，反而让“AI运动”概念风靡一时、空前火爆。目前已经在AI运动锻炼、体育教学、线上运动主题活动等场景中，成功得到了应用，并获得了广大互联网用户的认可。   一、AI运动锻炼...  查看详情  
                
微信小程序|人脸识别的最终解决方案(代码片段)
...能-婚恋交友【附完整代码】》一、人脸识别功能现状1.1微信原生接口篇微信原生的人脸识别接口可以完美的结合小程序所采集到的图像，可以达到实时帧级别的识别，是高效开发人脸识别功能的首选！但是，由于...  查看详情  
                
微信小程序怎么破定位
微信小程序支持地理位置定位，可以通过获取用户所在地理位置，来实现小程序相关功能。你可以使用微信小程序API（wx.getLocation）来获取用户的地理位置，然后再根据获取的经纬度，通过百度地图提供的api调取服务，来获取用...  查看详情  
                
微信小程序旋转大师的代码是啥
参考技术A微信小程序旋转大师的代码是什么-百度知道2个回答回答时间：2022年12月1日最佳回答：微信小程序实现可实时改变转速的css3旋转动画实例代码,前言本文主要介绍的是关于微信小程序实现可实时改变转速的css3旋转动画...  查看详情  
                
微信小程序｜基于小程序+c#制作一个聊天系统(代码片段)
...与服务端的聊天功能。用小程序自带的客服功能只能绑定微信且一对一沟通，接入市面上成熟的即时通讯预算又略显不足，干脆自己开发一个也能应对简单的业务场景。实现流程1、服务端1.1、项目创建1.2、设计界面1.3、...  查看详情  
                
基于python的百度ai人脸识别api接口（可用于opencv-python人脸识别）(代码片段)
基于Python的百度AI人脸识别API接口（可用于OpenCV-Python人脸识别）资源：https://download.csdn.net/download/weixin_53403301/43644312之前的项目：【最新】基于OpenCV的Python人脸识别、检测、框选（遍历目录下所有照片依次识别...  查看详情  
                
python+opencv人脸识别身份认证系统设计：专栏总述
...识别身份认证系统(4)—人脸识别本项目的实现机制：基于OpenCV使用Haar级联与dlib库进行人脸检测及实时跟踪，应用LBPH算法开发了一个功能相对完整的人脸识别系统。系统采用sqlite3进行序列化数据存储，能够对陌生人...  查看详情  
                
ai实战篇｜基于ai开放平台实现人脸识别对比功能，超详细教程附带源码
  查看详情  
                
微信小程序从零开始开发步骤-引入框架weui
首先来看下WeUI的官方介绍：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信小程序的开发过程中，涉及到的前端复杂的样式界面...  查看详情