uni-app使用live-pusher简单模拟人脸识别页面样式
实现想法
公司的需求是模拟一个人脸识别,不用第三发插件,简单模拟样式即可。
基本思路是调起手机前置摄像头 ,再设置一个圆形的样式来达到一个基本样式
调起手机摄像头
看了官方的媒体组件,只有camera和live-pusher比较合适
camera不支持App,并且需要触发调用,不合符需求
所以只剩下live-pusher一个选择
引入组件,并基础设置后
javascript
<live-pusher id="pusherId"
ref="pusherRef"
class="livePusher"
aspect="1:1" // 宽高比例
:whiteness="1" // 美白
:beauty="1" // 美颜
/>
我们在页面上可以看见效果
不过这里需要注意一下,如果你是 nvue 页面,还需要手动调起一下摄像头
javascript
onMounted(() => {
const instance = getCurrentInstance() as ComponentInternalInstance;
const pusherContext = uni.createLivePusherContext("pusherId", instance.ctx)
pusherContext.startPreview()
})
官方文档中写默认摄像头为前置,但此时显示的是后置摄像头,并且设置的默认前置也是不生效的,需要手动翻转一下
javascript
onMounted(() => {
// 获取当前组件实例
const instance = getCurrentInstance() as ComponentInternalInstance;
// 获取live-pusher上下文对象
const pusherContext = uni.createLivePusherContext("pusherId", instance.ctx)
// 翻转摄像头
pusherContext.switchCamera()
})
设置圆形
这是一个令人头疼的问题
组件设置宽高为正方形后,设置了圆角属性不生效
尝试了nvue页面在父级元素画圆后设置溢出隐藏,也无济于事
最后添加了cover-img标签,用一张圆形的图片盖住四角达到的效果
javascript
<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>
看下最终效果,先这样吧。
有别的好的方法,请路过留言,万分感谢!