网站视频怎么做,公共资源交易中心网站建设汇报,ui界面设计教程,网站建设与网页设计开题报告微信小程序的人脸检测功能#xff0c;配合蓝牙#xff0c;配合ESP32 可以实现一些有趣的玩具 本文先只说微信小程序的人脸检测功能
1、人脸检测使用了摄像头#xff0c;就必须在用户隐私权限里面声明。 修改用户隐私声明后#xff0c;还需要等待审核#xff0c;大概一天 …微信小程序的人脸检测功能配合蓝牙配合ESP32 可以实现一些有趣的玩具 本文先只说微信小程序的人脸检测功能
1、人脸检测使用了摄像头就必须在用户隐私权限里面声明。 修改用户隐私声明后还需要等待审核大概一天
2、app.json文件中也必须声明 permission:{scope.bluetooth:{desc: 获取蓝牙用于硬件链接},scope.camera:{desc: 获取摄像头用于人脸检测}},这个不做是无法真机调试的 模拟器上会一直报无效的 app.json permission[“scope.bluetooth”]、app.json permission[“scope.camera”] 这个错误可以忽略
然后就是直接看代码了 face.xml
blockview classwork-log styleheight: 300rpx; /viewview classwork-log styleheight: 200rpx; view classwork-eyeviewview classwork-eye styleheight: {{eyeLetfHeight}};width:{{eyeLetfWidth}}/view/viewview classwork-eyeviewview classwork-eye styleheight: {{eyeRightHeight}};width:{{eyeRightWidth}}/view/view/view
/block
face.wxss
page{width: 100%;position: fixed;top:0;left:0;background-color: black;
}
.work-log {width: 96%;flex-direction:row;display: flex;margin-top: 15rpx;margin-bottom: 5rpx;margin-left: 2%;
}
.work-eyeview {width: 50%;height: 100%;background-color: black;display: flex;justify-content: center;align-items: center;
}
.work-eye {width: 30%;height: 100%;box-shadow: 4px 4px 15px #c0bfbf;background-color: #eef1f7;border-radius: 10rpx;
}
face.json
{disableScroll: true,renderer: webview,navigationBarTitleText: 人脸三维识别,pageOrientation: auto,navigationStyle:custom
}face.js Component({session: undefined, // 全局的VKsession对象data:{originx:1%,originy:1%,eyeLetfHeight:100%,eyeLetfWidth:30%,eyeRightHeight:100%,eyeRightWidth:30%},methods: {onReady(){//初始化VKthis.init();},onHide :function(){//关闭this.closeBle();},onUnload :function(){this.closeBle();},// 对应案例的初始化逻辑由统一的 behavior 触发 初始化VKstart完毕后进行更新渲染循环init() {this// VKSession 配置const session this.session wx.createVKSession({track: {face: {mode: 1}},version: v2,});try {session.start(err {if (err) return console.error(VK error: , err);//摄像头设置为前置摄像头 1 0 为后置const config session.configconfig.cameraPosition 1; session.config config;console.log(VKSession.start ok,version:, session.version)// VKSession EVENT resizesession.on(resize, () {})// 开启三维识别session.update3DMode({open3d: true})// VKSession EVENT addAnchorssession.on(addAnchors, anchors {console.log(addAnchor, anchors)})// VKSession EVENT updateAnchorssession.on(updateAnchors, anchors {var anchor anchors[0];//第一个人脸//43 两个眼睛中间点 46鼻头var centeracch anchor.points[46];//两个眼睛中间点//72 左上眼皮 73 左下眼皮 75 右上眼皮 76 右下眼皮//console.log(centeracch);//鼻头var eyeLetfLen this.calen(this.calculateEye(anchor.points[72],anchor.points[73],anchor.points[52],anchor.points[55]));var eyeRightLen this.calen(this.calculateEye(anchor.points[75],anchor.points[76],anchor.points[58],anchor.points[61]));this.setData({originx:centeracch.x * 100 %,originy:centeracch.y * 100 %,eyeLetfHeight: eyeLetfLen %,eyeLetfWidth: (70 - (eyeLetfLen / 100 ) * 40) %,eyeRightHeight: eyeRightLen %,eyeRightWidth: (70 - (eyeRightLen / 100 ) * 40) %})})// VKSession removeAnchors// 识别目标丢失时不断触发session.on(removeAnchors, anchors {console.log(removeAnchors,anchors);this.setData({originx:1%,originy:1%})});console.log(ready to initloop)// start 初始化完毕后进行更新渲染循环this.initLoop();});} catch(e) {console.error(e);}},calen(eyelen){var l 105 - eyelen;if(l100){return 100;}else if (l 5){return 3;}else{return l;}},calculateEye(up,dow,left,right){var ylen this.calculateDistance(up.x,up.y,dow.x,dow.y);var xlen this.calculateDistance(right.x,right.y,left.x,left.y);return xlen/ylen;},calculateDistance(x1, y1, x2, y2) { var dx x2 - x1; var dy y2 - y1; return Math.sqrt(dx * dx dy * dy); },// 限帧逻辑initLoop() {// 限制调用帧率,暂时去掉let fps 30let fpsInterval 1000 / fpslet last Date.now()const session this.session;// 逐帧渲染const onFrame timestamp {try {let now Date.now()const mill now - last// 经过了足够的时间if (mill fpsInterval) {last now - (mill % fpsInterval); //校正当前时间session.getVKFrame(1,1);}} catch(e) {console.error(e);}session.requestAnimationFrame(onFrame)}session.requestAnimationFrame(onFrame)},},
})最终实现的效果就是 屏幕对应的眼睛和自己眼睛对应眨眼检测
