uniapp app 人脸识别的实现示例

Valora ·

更新时间:2024-09-21

· 1856 次阅读

由于小程序端有camera组件直接就可以调起摄像头但是 app端是不支持这个标签的所以只能用其他的方法使用 nvue 中 live-pusher 组件

子组件

<template>
<div>
<div class="livefater">
<div style="width: 300px;height: 300px;border-radius: 150px;overflow: hidden;">
<!-- orientation="horizontal" //设置垂直水平方向 -->
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url=""
mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2"
aspect="1:1" @statechange="statechange" @netstatus="netstatus" @error="error"></live-pusher>
</div>
<cover-image src="/static/image/gai1.png" class="gaiimg"></cover-image>
</div>
<view class="message" style="color: #fff;">
<text class="info">{{message}}</text>
</view>
</div>
</template>
<script>
export default {
props: {
time: {
default: 5000,
type: Number
},
message: {
default: '识别中，请稍后...',
type: String
}
},
data() {
return {}
},
mounted() {
// 注意：需要在onReady中 或 onLoad 延时
this.context = uni.createLivePusherContext("livePusher", this);
var that = this
uni.getSystemInfo({
success: function(e) {
// 计算导航栏高度
that.statusBar = e.statusBarHeight
// #ifndef MP  
if (e.platform == 'android') {
that.CustomBar = e.statusBarHeight + 50
} else {
that.CustomBar = e.statusBarHeight + 45
}
console.log(that.statusBar)
// #endif  
// #ifdef MP-WEIXIN  
let custom = wx.getMenuButtonBoundingClientRect()
that.CustomBar = custom.bottom + custom.top - e.statusBarHeight
// #endif  
// #ifdef MP-ALIPAY  
that.CustomBar = e.statusBarHeight + e.titleBarHeight
// #endif  
}
})
setTimeout(() => {
this.startPreview()
})
},
methods: {
// 拍照事件
snapshot: function() {
var that = this
this.context.snapshot({
success: (e) => {
console.log(e.message, '拍照信息');
this.$emit('faceImg', e.message)
}
});
},
// 开启摄像头
startPreview() {
console.log("1")
var that = this
this.context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
that.Timer = setInterval(function() {
that.snapshot()
}, that.time)
},
fail(err) {
console.log(err);
}
});
},
},
}
</script>
<style>
<style lang="less">page {
background: #0c8cf9;
}
.u-navbar__content__left {
display: flex !important;
align-items: center;
}
.u_nav_slot {
display: flex;
align-items: center;
flex-direction: row;
color: rgba(0, 0, 0, 0.9);
font-size: 14.4rpx;
font-weight: 700;
}
.text {
margin-left: 1rpx;
color: #fff;
font-size: 16rpx;
}
.box {
z-index: 99;
position: absolute;
left: 35%;
top: 25%;
width: 250rpx;
height: 250rpx;
background: pink;
}
.message {
flex: 1;
justify-content: center;
align-items: center;
font-weight: 700;
}
.info {
color: #fff !important;
font-size: 20rpx;
}
.livePusher {
width: 300px;
height: 300px;
}
.livefater {
display: -ms-flex;
display: -webkit-flex;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 10rpx;
margin-bottom: 50rpx;
height: 350px;
}
.gaiimg {
width: 300px;
height: 300px;
margin-top: -300px;
}
</style>
</style>

由于人脸一般是原型样式但是默认的live-pusher 是正方形而且层级是比较高的其他普通元素标签是无法压住他的但是 cover-imgae的图片是可以压上去的

父组件

<TestingFace :time="5000" @faceImg="faceImg" :message="message"></TestingFace>

faceImg 就是子组件传过来的图片 message 是传过去的内容 time是倒计时的拍照时间，具体内容可以根据内容去加逻辑注意子父组件都是 nvue