固定ip做网站路由设置,电商网站开发与运营,宝安网站制作,四川省城乡住房与建设厅网站公司的业务需求是用户在使用某个功能前#xff0c;必须使用人脸识别#xff0c;确保当前使用人是用户本人#xff0c;防止某些功能乱用。后端用的是腾讯的人脸识别方案#xff0c;这里只是前端的识别代码#xff0c;保证人脸剧中#xff0c;大小合适#xff0c;有一个人…公司的业务需求是用户在使用某个功能前必须使用人脸识别确保当前使用人是用户本人防止某些功能乱用。后端用的是腾讯的人脸识别方案这里只是前端的识别代码保证人脸剧中大小合适有一个人脸以上 小程序代码主要利用的是wx.createVKSession这个API来实现样式部分可自行修改 这部分代码只是小程序前端识别的代码真正的人脸比对代码是在后端需要前端识别到人脸后上传到后端进行比对。
部分位置可根据业务需求要样式来修改这里只是我自己调整的位置
wxml
view classtitle{{verifyText}}/view
view classcontainer
image src{{faceImg}} wx:if{{faceImg}} classfaceImg modewidthFix/camera classcamera device-positionfront flashoff/camera
/viewjs部分 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;listenernull;VKSessionnull;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.x0.65||points.x0.4||points.y0.65||points.y0.35){this.setData({verifyText:请移动面容到框内,isCentre:false,face:{}},(){clearTimeout(faceVerifyTime)faceVerifyTime null;})return}else if(size.width0.95||size.width0.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;
}
