做h5网站设计互联网广告销售

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

小程序代码，主要利用的是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;
}