devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app项目+云函数+百度AI(人脸识别签到)_uniapp 百度云人脸签到

作者：你好赵伟 | 2024-06-11 13:34:22

赞

踩

uniapp 百度云人脸签到

云函数方面 

打开uniclould控制台数据库为项目建表

        face_config 百度AI人脸识别配置表 

        userInfo 用户信息配置表 （人脸注册时需要唯一的用户id索引，所以建个表来自动生成注册用户的id）

face_config表结构

userInfo表结构

在项目创建的云函数列表内新建名为 face 的云函数

在face文件夹处鼠标右键使用命令窗口打开所在目录输入以下命令安装依赖

  1. npm i request -save
  2. npm i request-promise -save

face/index.js

  1. 'use strict';
  2. //链接数据库
  3. const db = uniCloud.database()
  4. //引入request模块
  5. const rq = require("request-promise")
  6. //声明百度AI配置表
  7. const Bai_Ai = db.collection('face_config')
  8. //用户列表
  9. const user_info = db.collection('userInfo')
  10. exports.main = async (event, context) => {
  11. 	//查询数据库中 百度AI配置信息
  12. 	let Bai_Ai_data =( await Bai_Ai.get()).data[0]
  13. 	//启动参数  type  get 获取人脸信息供录入  signin 人脸注册
  14. 	let type=event.type
  15. 	//判断百度AI前面是否存在
  16. 	if(Bai_Ai_data.face_Access_Token.length>0){
  17. 		//人脸检测
  18. 		if(event.type=='get'){
  19. 			return new Promise((resolve,reject)=>{
  20. 				var options = {
  21. 				        'method': 'POST',
  22. 				        'url': 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=' + Bai_Ai_data.face_Access_Token ,
  23. 				        'headers': {
  24. 				                'Content-Type': 'application/json'
  25. 				        },
  26. 				        body: JSON.stringify({
  27. 				                "image": event.face_image.substring(23),
  28. 				                "image_type": "BASE64",
  29. 				                "face_field": "quality",
  30. 				        })
  31. 				};
  32. 				rq(options).then(res=>{
  33. 					//是否检测到人脸
  34. 					if(JSON.parse(res).error_msg=='SUCCESS'){
  35. 						//人脸是否完整
  36. 						if(JSON.parse(res).result.face_list[0].quality.completeness){
  37. 							//阈值判断+提示
  38. 							//左眼
  39. 							let left_eye=JSON.parse(res).result.face_list[0].quality.occlusion.left_eye
  40. 							//右眼
  41. 							let right_eye=JSON.parse(res).result.face_list[0].quality.occlusion.right_eye
  42. 							//鼻子
  43. 							let nose=JSON.parse(res).result.face_list[0].quality.occlusion.nose
  44. 							//嘴巴
  45. 							let mouth=JSON.parse(res).result.face_list[0].quality.occlusion.mouth
  46. 							//左脸
  47. 							let left_cheek=JSON.parse(res).result.face_list[0].quality.occlusion.left_cheek
  48. 							//右脸
  49. 							let right_cheek=JSON.parse(res).result.face_list[0].quality.occlusion.right_cheek
  50. 							//下巴
  51. 							let chin_contour=JSON.parse(res).result.face_list[0].quality.occlusion.chin_contour
  52. 							//图片质量可以
  53. 							if(left_eye<=0.6&&right_eye<=0.6&&nose<=0.7&&mouth<=0.7&&left_cheek<=0.8&&right_cheek<=0.8&&chin_contour<=0.6){
  54. 								resolve(
  55. 									{	
  56. 										code:'200',
  57. 										image:event.face_image
  58. 									}
  59. 								)
  60. 							}else{
  61. 								if(left_eye>0.6){
  62. 									resolve(
  63. 										{
  64. 											code:'400',
  65. 											message:'左眼被遮挡'
  66. 										}
  67. 									)
  68. 								}else if(right_eye>0.6){
  69. 									resolve(
  70. 										{
  71. 											code:'400',
  72. 											message:'右眼被遮挡'
  73. 										}
  74. 									)
  75. 								}else if(nose>0.7){
  76. 									resolve(
  77. 										{
  78. 											code:'400',
  79. 											message:'鼻子被遮挡'
  80. 										}
  81. 									)
  82. 								}else if(mouth>0.7){
  83. 									resolve(
  84. 										{
  85. 											code:'400',
  86. 											message:'嘴巴被遮挡'
  87. 										}
  88. 									)
  89. 								}else if(left_cheek>0.8){
  90. 									resolve(
  91. 										{
  92. 											code:'400',
  93. 											message:'左脸被遮挡'
  94. 										}
  95. 									)
  96. 								}else if(right_cheek>0.8){
  97. 									resolve(
  98. 										{
  99. 											code:'400',
  100. 											message:'右脸被遮挡'
  101. 										}
  102. 									)
  103. 								}else if(chin_contour>0.6){
  104. 									resolve(
  105. 										{
  106. 											code:'400',
  107. 											message:'下巴被遮挡'
  108. 										}
  109. 									)
  110. 								}
  111. 							}
  112. 						}else{
  113. 							resolve(
  114. 								{
  115. 									code:'400',
  116. 									message:'未检测到人脸'
  117. 								}
  118. 							)
  119. 						}
  120. 					}else{
  121. 						//未检出人脸  反馈前端
  122. 						resolve( 
  123. 							{
  124. 								code:'400',
  125. 								message:'未检测到人脸q',
  126. 							}
  127. 						)
  128. 					} 
  129. 				})
  130. 			})
  131. 		}
  132. 		//人脸注册
  133. 		if(event.type=='signin'){
  134. 			//加入人脸库
  135. 			//数据库注册用户信息 获取id
  136. 			return new Promise((resolve,reject)=>{
  137. 				//判断是否存在此人
  138. 				user_info.where({name:event.name}).get().then(res=>{
  139. 					if(res.data.length==0){
  140. 						user_info.add({name:event.name}).then(res=>{
  141. 							var _user_info_={
  142. 								name:event.name
  143. 							}
  144. 							 var options = {
  145. 									'method': 'POST',
  146. 									'uri': 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + Bai_Ai_data.face_Access_Token,
  147. 									'headers': {
  148. 											'Content-Type': 'application/json'
  149. 									},
  150. 									body: JSON.stringify({
  151. 											"group_id": "yj_face_arr",
  152. 											"image": event.face_image.substring(23),
  153. 											"image_type": "BASE64",
  154. 											"user_id": res.id,//必填
  155. 											"user_info":JSON.stringify(_user_info_)
  156. 									})
  157. 								};
  158. 								rq(options).then(res=>{
  159. 									resolve(
  160. 										{
  161. 											code:'200',
  162. 											message:'人脸注册成功'
  163. 										}
  164. 									) 
  165. 								})
  166. 						})	
  167. 						
  168. 					}else{
  169. 						resolve(
  170. 							{
  171. 								code:'400',
  172. 								message:'此用户已存在'
  173. 							}
  174. 						)
  175. 					}
  176. 				})
  177. 				
  178. 				
  179. 			})
  180. 				
  181. 			
  182. 		}
  183. 		//人脸 1:N 搜索
  184. 		if(event.type=='comparison'){
  185. 			return new Promise((resolve)=>{
  186. 				var options = {
  187. 				        'method': 'POST',
  188. 				        'url': 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + Bai_Ai_data.face_Access_Token,
  189. 				        'headers': {
  190. 				                'Content-Type': 'application/json'
  191. 				        },
  192. 				        body: JSON.stringify({
  193. 				                "group_id_list": "yj_face_arr",
  194. 								"image": event.face_image.substring(23),
  195. 				                "image_type": "BASE64"
  196. 				        })
  197. 				}
  198. 				rq(options).then(res=>{
  199. 					
  200. 					resolve(
  201. 						{
  202. 							code:'200',
  203. 							message:'人脸匹配成功',
  204. 							user_info:JSON.parse( JSON.parse(res).result.user_list[0].user_info )
  205. 						}
  206. 					) 
  207. 				})
  208. 				
  209. 			})
  210. 		}	
  211. 		
  212. 	}else{
  213. 		//不存在  生成签名
  214. 		console.log('签名不存在')
  215. 		var options = {
  216. 		        'method': 'POST',
  217. 		        'url': 'https://aip.baidubce.com/oauth/2.0/token?client_id='+Bai_Ai_data.face_API_Key+'&client_secret='+Bai_Ai_data.face_Secret_Key+'&grant_type=client_credentials',
  218. 		        'headers': {
  219. 		                'Content-Type': 'application/json',
  220. 		                'Accept': 'application/json'
  221. 		        }
  222. 		};
  223. 		rq(options).then(res=>{
  224. 			console.log(JSON.parse(res).access_token)
  225. 			//签名存入数据表
  226. 			Bai_Ai.doc('657bbf51652341901ba0e89b').update({
  227. 				'face_Access_Token':JSON.parse(res).access_token
  228. 			})
  229. 		})
  230. 	}
  231. 	
  232. };

百度AI方面

开通人脸识别服务---应用列表--创建应用

可视化人脸库---新建用户组yj_face_arr

将应用的信息填入第一步创建好的数据表中  Access_token 为云函数内部生成并填入 

前端方面

pages文件下创建文件夹

face/new_file.nvue    

  1. <template>
  2. 	<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">
  3. 	        <view class="preview" :style="{ width: windowWidth, height: windowHeight-80}">
  4. 	            <live-pusher id="livePusher" ref="livePusher" class="livePusher" mode="FHD" beauty="1" whiteness="0"
  5. 	                min-bitrate="1000" audio-quality="16KHz" :auto-focus="true" :muted="true"
  6. 	                :enable-camera="true" :enable-mic="false" :zoom="false" orientation="horizontal" @statechange="statechange"
  7. 	                :style="{ width: cameraWidth, height: cameraHeight }"></live-pusher>
  8. 	
  9. 	            <!--提示语-->
  10. 	            <cover-view class="remind">
  11. 	                <text class="remind-text" style="">{{ message }}</text>
  12. 	            </cover-view>
  13. 	
  14. 	            <!--辅助线-->
  15. 	            <cover-view class="outline-box" >
  16. 	                <cover-image class="outline-img" :style="{width: windowWidth+20, height: windowHeight+150}" src="../../static/face2.png"></cover-image>
  17. 	            </cover-view>
  18. 	    </view>
  19. 	</view>
  20. </template>
  21.  
  22. <script>
  23. 	import { pathToBase64, base64ToPath } from 'image-tools'
  24.     export default {
  25.         data() {
  26.             return {
  27. 				//启动参数
  28. 				type:'',
  29.                 //提示
  30.                 message: '',
  31.                 //相机画面宽度
  32.                 cameraWidth: '',
  33.                 //相机画面宽度
  34.                 cameraHeight: '',
  35.                 //屏幕可用宽度
  36.                 windowWidth: '',
  37.                 //屏幕可用高度
  38.                 windowHeight: '',
  39.                 //流视频对象
  40.                 livePusher: null,
  41.                 //照片
  42.                 snapshotsrc: null,
  43.                 ifPhoto: false,
  44.             };
  45.         },
  46.         onLoad(e) {
  47.             //获取屏幕高度
  48.             this.initCamera();
  49. 			this.type=e.type
  50.         },
  51.         onReady() {
  52.           this.livePusher = uni.createLivePusherContext('livePusher', this);
  53.         },
  54.         onShow() {
  55.             //开启预览并设置摄像头
  56.             this.startPreview();
  57.         },
  58.         methods: {
  59.             //获取屏幕高度
  60.             initCamera() {
  61.                 let that = this
  62.                 uni.getSystemInfo({
  63.                     success: function(res) {
  64.                         that.windowWidth = res.windowWidth;
  65.                         that.windowHeight = res.windowHeight;
  66.                         that.cameraWidth = res.windowWidth;
  67.                         that.cameraHeight = res.windowWidth * 1.5;
  68.                     }
  69.                 });
  70.             },
  71.             //启动相机
  72.             startPreview() {
  73. 				var that=this
  74. 				setTimeout(()=>{
  75. 					console.log(that.livePusher)
  76. 					that.livePusher.startPreview({
  77. 					    success(res) {
  78. 					        console.log('启动相机', res)
  79. 					    }
  80. 					});
  81. 				},300)
  82.                
  83.             },
  84.             //停止相机
  85.             stopPreview() {
  86.                 let that = this
  87.                 this.livePusher.stopPreview({
  88.                     success(res) {
  89. 						that.statechange()
  90.                         console.log('停止相机', res)
  91.                     }
  92.                 });
  93.             },
  94.             //摄像头 状态
  95.             statechange(e) {
  96.                  //拍照
  97.                 this.snapshot()
  98.             },
  99.             //抓拍
  100.             snapshot() {
  101.                 let that = this
  102. 				console.log('拍照')
  103. 				that.message=''
  104.                 this.livePusher.snapshot({
  105.                     success(res) {
  106.                         that.snapshotsrc = res.message.tempImagePath;
  107.                         that.uploadingImg(res.message.tempImagePath)
  108.                     }
  109.                 });
  110.             },
  111.             // 图片上传
  112.             uploadingImg(e) { 
  113.                 let url = e
  114.                 let that = this 
  115. 				//图片转base64
  116. 				pathToBase64(e).then(base64 => {
  117. 					//上传云端进行分析
  118. 					uniCloud.callFunction({
  119. 						name:'face',
  120. 						data:{
  121. 							type:that.type,
  122. 							face_image:base64
  123. 						}
  124. 					}).then(res=>{
  125. 						if(res.result.code=='200'){
  126. 							//如果是注册 则须保存人脸图片进行渲染
  127. 							if(that.type=='signin'){
  128. 								uni.setStorageSync('user_face',res.result.image)
  129. 							}
  130. 							//人脸 1:N 匹配 结果
  131. 							if(that.type=='comparison'){
  132. 								console.log(res)
  133. 							}
  134. 							uni.navigateBack()
  135. 						}else{
  136. 							that.message=res.result.message
  137. 							console.log('错误',res.result.message)
  138. 							//重新启动拍照
  139. 							setTimeout(()=>{
  140. 								that.snapshot()
  141. 							},100)
  142. 						}
  143. 					})
  144. 				})
  145.             },
  146. 	
  147.             //验证请求
  148.             request(url) {
  149.                 let data = {
  150.                     token: this.userInfo.token,
  151.                     photo: url
  152.                 }
  153.             },
  154.             // 认证失败，重新认证
  155.             anew(msg) {
  156.                 let that = this
  157.                 uni.showModal({
  158.                     content: msg,
  159.                     confirmText: '重新审核',
  160.                     success(res) {
  161.                         if (res.confirm) {
  162.                             // console.log('用户点击确定');
  163.                             that.getCount()
  164.                         } else if (res.cancel) {
  165.                             // console.log('用户点击取消');
  166.                             uni.navigateBack({
  167.                                 delta: 1
  168.                             })
  169.                         }
  170.                     }
  171.                 })
  172.             },
  173.         }
  174.     };
  175. </script>
  176. <style lang="scss">
  177. 	  .live-camera {
  178. 	        .preview {
  179. 	            justify-content: center;
  180. 	            align-items: center;
  181. 	            .outline-box {
  182. 	                position: absolute;
  183. 	                top: 0;
  184. 	                left: 0;
  185. 	                bottom: 0;
  186. 	                z-index: 99;
  187. 	                align-items: center;
  188. 	                justify-content: center;
  189. 	            }
  190. 	
  191. 	            .remind {
  192. 	                position: absolute;
  193. 	                bottom: 10px;
  194. 	                width: 750rpx;
  195. 	                z-index: 100;
  196. 	                align-items: center;
  197. 	                justify-content: center;
  198. 	                .remind-text {
  199. 	                    color: #dddddd;
  200. 	                    font-weight: bold;
  201. 	                }
  202. 	            }
  203. 	        }
  204. 	    }
  205. </style>

face_sign_in/face_sign_in.vue

  1. <template>
  2. 	<view class="content">
  3. 		<view class="face-box" @click="getface">
  4. 			<image class="face-bg" src="../../static/face_bg.png" mode="" v-if="!image"></image>
  5. 			<view class="fb-msg" v-if="!image">
  6. 				点击录入人脸信息
  7. 			</view>
  8. 			<image class="face" :src="image" mode="" v-if="image"></image>
  9. 		</view>
  10. 		<view class="top">
  11. 			<view class="t-l">
  12. 				姓名：
  13. 			</view>
  14. 			<input class="t-r" placeholder="请输入姓名" type="text" @input="getuser_name" />
  15. 		</view>
  16. 		<view class="foot" hover-class="foot-hover" @click="getdata">
  17. 			提交信息
  18. 		</view>
  19. 	</view>
  20. </template>
  21.  
  22. <script>
  23. 	export default {
  24. 		data() {
  25. 			return {
  26. 				image:'',
  27. 				name:''
  28. 			}
  29. 		},
  30. 		onLoad() {
  31. 			
  32. 		},
  33. 		onShow() {
  34. 			var image=uni.getStorageSync('user_face')
  35. 			this.image=image
  36. 		},
  37. 		methods: {
  38. 			//获取人脸信息
  39. 			getface(){
  40. 				uni.navigateTo({
  41. 					url:"/pages/face/new_file?type=get"
  42. 				})
  43. 			},
  44. 			getuser_name(e){
  45. 				this.name=e.target.value
  46. 			},
  47. 			getdata(){
  48. 				var that=this
  49. 				if(that.image&&that.name){
  50. 					uniCloud.callFunction({
  51. 						name:'face',
  52. 						data:{
  53. 							type:'signin',
  54. 							face_image:that.image,
  55. 							name:that.name
  56. 						}
  57. 					}).then((res)=>{
  58. 						console.log('人脸信息注册接口',res)
  59. 						if(res.result.code=='200'){
  60. 							uni.showToast({
  61. 								icon:'none',
  62. 								title:res.result.message
  63. 							})
  64. 							setTimeout(()=>{
  65. 								uni.removeStorageSync('user_face')
  66. 								uni.navigateBack()
  67. 							},1000)
  68. 						}
  69. 						
  70. 					})
  71. 					
  72. 					
  73. 					
  74. 				}else{
  75. 					uni.showToast({
  76. 						icon:"none",
  77. 						title:'请完善信息'
  78. 					})
  79. 				}
  80. 			}
  81. 		}
  82. 	}
  83. </script>
  84.  
  85. <style>
  86. 	.content {
  87. 		height: 100%;
  88. 		width:100%;
  89. 		display: flex;
  90. 		flex-direction: column;
  91. 		align-items: center;
  92. 	}
  93. 	.face-box{
  94. 		margin-top: 30rpx;
  95. 		border-radius: 10rpx;
  96. 		border:1px solid #64aff4;
  97. 		height: 500rpx;
  98. 		width: 400rpx;
  99. 		overflow: hidden;
  100. 		display: flex;
  101. 		flex-direction: column;
  102. 		align-items: center;
  103. 		position: relative;
  104. 	}
  105. 	.face-bg{
  106. 		height: 100%;
  107. 		width: 120%;
  108. 	}
  109. 	.face{
  110. 		height: 160%;
  111. 		width: 100%;
  112. 	}
  113. 	.fb-msg{
  114. 		position: absolute;
  115. 		bottom: 20rpx;
  116. 		color: #ffffff;
  117. 	}
  118. 	.top{
  119. 		width: 80%;
  120. 		margin-top: 100rpx;
  121. 		height: 100rpx;
  122. 		display: flex;
  123. 		align-items: center;
  124. 		justify-content: center;
  125. 	}
  126. 	.t-l{
  127. 		font-size: 32rpx;
  128. 		text-align: center;
  129. 	}
  130. 	.t-r{
  131. 		margin-left: 20rpx;
  132. 		height: 100%;
  133. 		width: 40%;
  134. 		border-radius: 10rpx;
  135. 		text-indent: 20rpx;
  136. 		border:1px solid #64aff4;
  137. 	}
  138. 	.foot{
  139. 		width: 400rpx;
  140. 		text-align: center;
  141. 		height: 120rpx;
  142. 		line-height: 120rpx;
  143. 		border-radius: 15rpx;
  144. 		margin-top: 50rpx;
  145. 		color: #ffffff;
  146. 		background-color: #64aff4;
  147. 	}
  148. 	.foot-hover{
  149. 		width: 400rpx;
  150. 		text-align: center;
  151. 		height: 120rpx;
  152. 		line-height: 120rpx;
  153. 		border-radius: 15rpx;
  154. 		margin-top: 50rpx;
  155. 		color: #ffffff;
  156. 		background-color: #487fb0;
  157. 	}
  158. </style>

index/index.vue

  1. <template>
  2. 	<view class="content">
  3. 		<image class="logo" src="/static/logo.png"></image>
  4. 		
  5. 		<view class="text-area">
  6. 			<text class="title" @click="zhuce">注册人脸信息</text>
  7. 		</view>
  8. 		<view class="text-area">
  9. 			<text class="title" @click="bidui">人脸1:N搜索信息</text>
  10. 		</view>
  11. 	</view>
  12. </template>
  13.  
  14. <script>
  15. 	export default {
  16. 		data() {
  17. 			return {
  18. 				title: ''
  19. 			}
  20. 		},
  21. 		onLoad() {
  22. 			var that=this
  23. 			
  24. 		},
  25. 		methods: {
  26. 			zhuce(){
  27. 				console.log('????')
  28. 				uni.navigateTo({
  29. 					url:'/pages/face_sign_in/face_sign_in'
  30. 				})
  31. 			},
  32. 			bidui(){
  33. 				uni.navigateTo({
  34. 					url:'/pages/face/new_file?type=comparison'
  35. 				})
  36. 			}
  37. 		}
  38. 	}
  39. </script>
  40.  
  41. <style>
  42. 	.content {
  43. 		display: flex;
  44. 		flex-direction: column;
  45. 		align-items: center;
  46. 		justify-content: center;
  47. 	}
  48.  
  49. 	.logo {
  50. 		height: 200rpx;
  51. 		width: 200rpx;
  52. 		margin-top: 200rpx;
  53. 		margin-left: auto;
  54. 		margin-right: auto;
  55. 		margin-bottom: 50rpx;
  56. 	}
  57.  
  58. 	.text-area {
  59. 		display: flex;
  60. 		justify-content: center;
  61. 	}
  62.  
  63. 	.title {
  64. 		font-size: 36rpx;
  65. 		color: #8f8f94;
  66. 	}
  67. </style>

注意：需要配置云函数 Node.js 的版本

云函数文件下 package.json 内添加

本文只做了云函数调用百度AI的人脸检测，人脸库注册，人脸1:N搜索的功能 会这些大部分业务都不会有难度了

第一次写文章，有不足的大家多多担待，辛苦大家点个小赞，谢谢喽！！

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

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

  

闽ICP备14008679号