邯郸网站建设外包北京seo公司

实现想法

公司的需求是模拟一个人脸识别，不用第三发插件，简单模拟样式即可。
基本思路是调起手机前置摄像头，再设置一个圆形的样式来达到一个基本样式

调起手机摄像头

看了官方的媒体组件，只有camera和live-pusher比较合适
camera不支持App，并且需要触发调用，不合符需求

所以只剩下live-pusher一个选择
引入组件，并基础设置后

<live-pusher id="pusherId" ref="pusherRef" class="livePusher" aspect="1:1"    // 宽高比例:whiteness="1"  // 美白:beauty="1"     // 美颜/>

我们在页面上可以看见效果

不过这里需要注意一下，如果你是 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标签，用一张圆形的图片盖住四角达到的效果

  <template><div class="face"><view>拿起手机，眨眨眼</view><div class="pushContent"><live-pusher id="pusherId" ref="pusherRef" class="livePusher" aspect="1:1" :whiteness="1" :beauty="1" device-position="front"/><cover-image class="pusherImg" src="/static/images/faceRadio.png" alt=""></cover-image></div></div></template><script lang="ts" setup>import { 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> <style>page{background-color: #FFF !important;}</style><style lang="scss"  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>

看下最终效果，先这样吧。
有别的好的方法，请路过留言，万分感谢！