当前位置: 首页 > news >正文

小程序人脸分析

公司的业务需求是用户在使用某个功能前,必须使用人脸识别,确保当前使用人是用户本人,防止某些功能乱用。后端用的是腾讯的人脸识别方案,这里只是前端的识别代码,保证人脸剧中,大小合适,有一个人脸以上

小程序代码,主要利用的是wx.createVKSession这个API来实现,样式部分可自行修改

这部分代码只是小程序前端识别的代码,真正的人脸比对代码是在后端,需要前端识别到人脸后上传到后端进行比对。
部分位置可根据业务需求要样式来修改,这里只是我自己调整的位置

wxml

<view class="title">{{verifyText}}</view>
<view class="container">
<image src="{{faceImg}}" wx:if="{{faceImg}}" class="faceImg" mode="widthFix"/><camera class="camera" device-position="front"  flash="off"></camera>
</view>

js部分


let listener = null;
let videoCtx = null;
let VKSession = null;
let faceVerifyTime = null; //面容验证倒计时Page({data: {faceImgHeight: 314,faceImgWidth: 314,face: {origin: {x: 0,y: 0},size: {width: 0,height: 0},points:[]},verifyText:"请移动面容到框内",isCentre:false, //是否面容在正中间startVerify:false, //是否正在验证faceImg:"", //面容图片地址},/*** 生命周期函数--监听页面加载*/onLoad() {this.getAuthSetting(); //获取权限this.initFaceVerify()},getAuthSetting(){wx.getSetting({success :(res)=> {if(!res.authSetting['scope.camera']){wx.showModal({title: '请允许获取摄像头权限',showCancel:false,complete: (modalRes) => {if (modalRes.confirm) {wx.openSetting({success:(settingRes)=>{if(!settingRes.authSetting['scope.camera']){this.getAuthSetting()}else{wx.navigateBack()}}})}}})}}})},initFaceVerify(){videoCtx = null;listener=null;VKSession=null;videoCtx = wx.createCameraContext();let count = 0;listener = videoCtx.onCameraFrame((frame) => {count++;if (count === 5) {this.detectFace(frame);count = 0;}});VKSession = wx.createVKSession({version: 'v1',track: {plane: {mode: 1},face: {mode: 2}}});VKSession.on('updateAnchors', (anchors) => {// 有面容console.log(anchors,'有面容')if(this.data.startVerify){return;}let anchor = anchors[0];this.setData({face: {points: anchor.points,origin: anchor.origin,size: anchor.size}},()=>{this.isFaceCentered()})})VKSession.on('removeAnchors', (anchors) => {// 面容消失if(this.data.startVerify){return;}this.setData({verifyText:'请移动面容到框内',isCentre:false,face:{}},()=>{clearTimeout(faceVerifyTime)faceVerifyTime = null;})})setTimeout(() => {// 直接开始this.handleStart()}, 500);},onUnload() {VKSession.destroy();},picture(){this.setData({startVerify:true},()=>{clearTimeout(faceVerifyTime)faceVerifyTime = null;videoCtx.takePhoto({quality:'original',success:(e)=>{//上传照片接口,图片换成远端url地址 自行替换uploadImage(e.tempImagePath).then((res)=>{this.setData({faceImg:res})wx.showLoading({title: '正在验证',})try {// 执行后端分析人脸api({img:res}).then((writeoffRes) => {//识别成功//自行处理识别成功结果}).catch(err => {wx.hideLoading();wx.showModal({title: err.msg,showCancel:false,confirmText:'重新核验',complete: (res) => {if (res.confirm) {this.setData({startVerify:false,faceImg:"",verifyText:'请移动面容到框内',isCentre:false,face:{}},()=>{this.handleStart()})}}})})} catch (error) {console.log(error)}}).catch(()=>{this.setData({startVerify:false,faceImg:"",verifyText:'请移动面容到框内',isCentre:false,face:{}},()=>{this.handleStart()wx.showToast({title: '网络连接失败,请重试',})})})}})})},handleStart() {VKSession.start((errno) => {console.warn('VKSession.start errno', errno);});listener.start();},handleStop() {listener.stop({complete: (res) => {console.warn('listener.stop', res);}});VKSession.stop();},async detectFace(frame) {// 获取面容VKSession.detectFace({frameBuffer: frame.data,width: frame.width,height: frame.height,scoreThreshold: 0.8,sourceType: 0,modelMode: 2});},isFaceCentered() {// 判断面容是否在中间if(!this.data.face.points){return;}let points = this.data.face.points[43]; //位置let size = this.data.face.size; //大小if(points.x>0.65||points.x<0.4||points.y>0.65||points.y<0.35){this.setData({verifyText:'请移动面容到框内',isCentre:false,face:{}},()=>{clearTimeout(faceVerifyTime)faceVerifyTime = null;})return}else if(size.width>0.95||size.width<0.32){this.setData({verifyText:'请移动面容显示完整面容',isCentre:false,face:{}},()=>{clearTimeout(faceVerifyTime)faceVerifyTime = null;})return}this.setData({verifyText:'请保持不动',isCentre:true},()=>{this.verifyCentre()})},verifyCentre(){// 开始验证面容if(faceVerifyTime||this.data.startVerify){return}else{faceVerifyTime = setTimeout(() => {if(this.data.isCentre){this.handleStop()this.picture()}else{clearTimeout(faceVerifyTime)faceVerifyTime = null;}}, 1500);}}
})

style

.container {position: relative;padding: 200rpx 0;
}
.title{position: absolute;width: 100%;text-align: center;padding-top: 100rpx;font-size: 36rpx;
}
.camera{width: 600rpx;height: 600rpx;border-radius: 50% 50%;margin: 0 auto;
}
.faceImg{width: 600rpx;height: 600rpx;border-radius: 50% 50%;margin: 0 auto;position: absolute;z-index: 999;
}
http://www.lryc.cn/news/387025.html

相关文章:

  • UML建模笔记
  • 初见SpringCloud ing
  • Python | Leetcode Python题解之第198题打家劫舍
  • 什么是中断?---STM32篇
  • 51单片机第1步_putchar()和_getkey()应用
  • 微信小程序中的地图的使用
  • MySQL root密码丢失处理
  • RabbitMQ中java实现队列和交换机的声明
  • 解决SPA(单页应用)首屏加载速度慢
  • ElementUI框架搭建及组件使用
  • 同三维T908转换器 SDI转DVI/HDMI/VGA/色差分量/AV转换器
  • 【设计模式】【创建型5-5】【原型模式】
  • 原子变量原理剖析
  • WebSocket走私实践(附赠LiveGBS监控系统未授权管理员密码重置)
  • CentOS 7 和 CentOS Stream 8 的主要区别
  • 基于go1.19的站点模板爬虫
  • (单机版)神魔大陆|v0.51.0|冰火荣耀
  • k8s自动补全工具和UI管理界面
  • 内网渗透:内网基础信息收集
  • cos符号链提示是什么?TOT呢?
  • docker-compose部署Flink及Dinky
  • 数字时代的文化革命:Facebook的社会影响
  • 66.前端接口调用返回400的错误
  • Hadoop 安装与伪分布的搭建
  • 网络安全:渗透测试思路.(面试)
  • 优化堆排序
  • vue3使用一些组件的方法
  • OceanBase 4.2.1 离线安装
  • ForkJoin
  • 实验2 色彩模式转换