官方网站建设的目的,乌兰察布盟建设银行网站,邹平县seo网页优化外包,用jsp做网站一般会用到什么uni-app使用live-pusher简单模拟人脸识别页面样式 实现想法调起手机摄像头设置圆形 实现想法
公司的需求是模拟一个人脸识别#xff0c;不用第三发插件#xff0c;简单模拟样式即可。 基本思路是调起手机前置摄像头#xff0c;再设置一个圆形的样式来达到一个基本样式
调起… uni-app使用live-pusher简单模拟人脸识别页面样式 实现想法调起手机摄像头设置圆形 实现想法
公司的需求是模拟一个人脸识别不用第三发插件简单模拟样式即可。 基本思路是调起手机前置摄像头再设置一个圆形的样式来达到一个基本样式
调起手机摄像头
看了官方的媒体组件只有camera和live-pusher比较合适 camera不支持App并且需要触发调用不合符需求 所以只剩下live-pusher一个选择 引入组件并基础设置后
live-pusher idpusherId refpusherRef classlivePusher aspect1:1 // 宽高比例:whiteness1 // 美白:beauty1 // 美颜/我们在页面上可以看见效果
不过这里需要注意一下如果你是 nvue 页面还需要手动调起一下摄像头
onMounted(() {const instance getCurrentInstance() as ComponentInternalInstance;const pusherContext uni.createLivePusherContext(pusherId, instance.ctx)pusherContext.startPreview()
})官方文档中写默认摄像头为前置但此时显示的是后置摄像头并且设置的默认前置也是不生效的需要手动翻转一下
onMounted(() {// 获取当前组件实例const instance getCurrentInstance() as ComponentInternalInstance;// 获取live-pusher上下文对象const pusherContext uni.createLivePusherContext(pusherId, instance.ctx)// 翻转摄像头pusherContext.switchCamera()
})设置圆形
这是一个令人头疼的问题 组件设置宽高为正方形后设置了圆角属性不生效 尝试了nvue页面在父级元素画圆后设置溢出隐藏也无济于事 最后添加了cover-img标签用一张圆形的图片盖住四角达到的效果 templatediv classfaceview拿起手机眨眨眼/viewdiv classpushContentlive-pusher idpusherId refpusherRef classlivePusher aspect1:1 :whiteness1 :beauty1 device-positionfront/cover-image classpusherImg src/static/images/faceRadio.png alt/cover-image/div/div/templatescript langts setupimport { onMounted, ref, getCurrentInstance, type ComponentInternalInstance } from vue;const pusherRef ref({} as UniHelper.LivePusherInstance)onMounted(() {const instance getCurrentInstance() as ComponentInternalInstance;const pusherContext uni.createLivePusherContext(pusherId, instance.ctx)pusherContext.switchCamera()// pusherContext.startPreview({}) // nvue 页面吊起摄像头}) /script stylepage{background-color: #FFF !important;}/stylestyle langscss scoped.face{padding: 46rpx 45rpx;text-align: center;display: flex;justify-content: center;flex-direction: column;align-items: center;.pushContent{position: relative;width: 300rpx;height: 300rpx;border-radius: 250rpx;overflow: hidden;margin: 50rpx auto;.livePusher{width: 300rpx;height: 300rpx;border-radius: 50%;}.pusherImg{position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 300rpx;height: 300rpx;}}}/style看下最终效果先这样吧。 有别的好的方法请路过留言万分感谢
