uni-app 微信小程序下华为手机live-pusher 的 snapshot 回调执行情况
uni-app 微信小程序下华为手机live-pusher 的 snapshot 回调执行情况
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 | CLI |
操作步骤:
- 华为mete 30 真机点击识别
预期结果:
- snapshot 回调成功
实际结果:
- snapshot 回调无结果 无报错
bug描述:
<template>
<view class="">
<view class="custom" :style="{height: CustomBar+'px'}">
<view class="navcontent" :style="[{top:statusBar + 'px'}]">
<text class=" iconfont i-icon-return text-bold text-black text-xxl bg-white "
style="width: 60rpx;height: 60rpx;opacity: 0.9;left:-56rpx" @click.prevent.stop="BackPage"></text>
<text class="text-black text-bold text-xl" style="line-height: 45px;">刷脸</text>
</view>
</view>
<view class="livefater">
<view style="width: 348px;height: 348px;border-radius: 348px;overflow: hidden;background-color: #CCCCCC;">
<live-pusher id='livePusher' ref="livePusher" class="livePusher" url="https://domain/push_stream"
waiting-image="https://www.standardtec.cn/wp-content/uploads/2020/09/cropped-logo-lg-60x60.png" mode="SD" :muted="true"
:enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="1:1" min-bitrate="1000"
audio-quality="16KHz" :enable-mic="false" :zoom="false" @statechange="statechange"
@netstatus="netstatus" @error="error"></live-pusher>
</view>
<cover-image src="../../static/images/round.png" class="gaiimg"></cover-image>
</view>
<view class="padding justify-center" style="display:flex;flex-direction: row;">
<view class="basis-xsg">
<button class="cu-btn bg-grey " @click="BackPage">返回</button>
</view>
<view class="margin-lr basis-xsg">
<button :class="loading ? 'bg-grey':'bg-blue'" class="cu-btn" @click="snapshot">识别</button>
</view>
<view class="basis-xsg">
<button class="cu-btn bg-grey " @click="switchCamera">切换</button>
</view>
</view>
<i-toast id="toast"></i-toast>
</view>
</template>
<script>
const app = getApp();
const {$Toast} = require('../../wxcomponents/iview/base/index');
import {get, post, put} from '@/http/api'
import {getters, mapState} from 'vuex'
export default {
data() {
return {
livePusher: null, //流视频对象
course: null,
fil: true,
imgList: [""],
statusBar: 0,
CustomBar: 0,
loading: false
}
},
computed: {
...mapState(['sessionkey', 'userInfo', 'userid', 'orgId', 'userRole', 'chargeOrg']),
mapOtids() {
let that = this;
let result = {}
if (that.course == null || that.course.trainees.length == 0) return result;
that.course.trainees.forEach((item, index, array) => {
result[item.otId] = "1";
})
return result;
}
},
onLoad() {
let query = this.$route.query;
this.CustomBar = app.globalData.CustomBar;
this.course = JSON.parse(decodeURIComponent(query.course))
},
onUnload() {
let that = this;
that.stopPreview();
let orgId = that.orgId;
let trainees = encodeURIComponent(JSON.stringify(that.course.trainees));
let id = that.course._id;
that.$eventHub.$emit('trainees', {
trainees,
id
});
},
mounted() {
},
onReady() {
this.livePusher = uni.createLivePusherContext('livePusher', this);
this.startPreview(); //开启预览并设置摄像头
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
}
})
},
methods: {
statechange(e) {
// console.log("statechange:" + JSON.stringify(e));
},
netstatus(e) {
// console.log("netstatus:" + JSON.stringify(e));
},
error(e) {
console.log("error:" + JSON.stringify(e));
},
switchCamera: function() {
this.livePusher.switchCamera({
success: (a) => {
// console.log("switch camera:" + JSON.stringify(a));
}
})
},
start: function() {
this.livePusher.start({
success: (a) => {
// console.log("livePusher.start:" + JSON.stringify(a));
}
});
},
close: function() {
this.livePusher.close({
success: (a) => {
// console.log("livePusher.close:" + JSON.stringify(a));
}
});
},
// 拍照事件
snapshot: function() {
let that = this;
uni.getSetting({
success(res) {
if(!res.authSetting['scope.writePhotosAlbum']){
uni.authorize({
scope:'scope.writePhotosAlbum',
success() {
that.takeSnapShot();
},
fail() {
$Toast({
type: 'warning',
content: '请授权后再操作',
duration: 5
});
}
})
}else{
that.takeSnapShot()
}
}
})
},
takeSnapShot(){
let that = this;
if (that.loading == true) return;
let flag = that.checkCanQuery();
if (flag == false) {
return;
}
that.livePusher.snapshot({
success: (e) => {
console.log("livePusher snapshot:" + JSON.stringify(e));
that.getMinImage(e.tempImagePath)
}
});
},
// 开启摄像头
startPreview() {
var that = this
this.livePusher.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
}
});
},
stopPreview: function() {
this.livePusher.stopPreview({
success: (a) => {
console.log("livePusher.stopPreview:" + JSON.stringify(a));
}
});
},
getMinImage(imgPath) {
let that = this;
uni.compressImage({
src: imgPath,
quality: 20,
success: res => {
console.log(res)
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
let base64 = res.data ;
// console.log("base64 img:" + base64);
console.log(base64)
that.getTrainees(base64);
},
fail: (e) => {
console.log("图片转换失败");
}
})
}
});
},
checkCanQuery() {
},
getTrainees(strBase){
},
BackPage() {
uni.navigateBack({
delta: 1
});
}
}
}
</script>
<style scoped>
.custom {
background-color: #FFFFFF;
}
.navcontent {
height: 45px;
display: -ms-flex;
display: -webkit-flex;
display: flex;
justify-content: space-around;
flex-direction: row;
color: #333333;
}
.livePusher {
width: 350px;
height: 350px;
}
.livefater {
display: -ms-flex;
display: -webkit-flex;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 50rpx;
margin-bottom: 50rpx;
height: 350px;
}
.gaiimg {
width: 350px;
height: 350px;
margin-top: -350px;
}
</style>
更多关于uni-app 微信小程序下华为手机live-pusher 的 snapshot 回调执行情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
遇到同样的问题 期待解决
更多关于uni-app 微信小程序下华为手机live-pusher 的 snapshot 回调执行情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html
同样问题 期待解决
在华为Mate 30等部分安卓设备上,live-pusher组件的snapshot方法确实存在回调不执行的问题。这通常与设备兼容性相关,以下是几个关键排查点:
- 权限配置:确保已在
app.json中声明writePhotosAlbum权限:
"mp-weixin": {
"permission": {
"scope.writePhotosAlbum": {
"desc": "用于保存人脸识别截图"
}
}
}
- 上下文获取时机:在
onReady中创建live-pusher上下文是正确的,但建议增加延迟:
onReady() {
setTimeout(() => {
this.livePusher = uni.createLivePusherContext('livePusher', this);
this.startPreview();
}, 500)
}
- 相机状态检查:在调用snapshot前验证预览状态:
takeSnapShot(){
const that = this;
that.livePusher.getStatus({
success: (res) => {
if(res.status === 'ready'){
that.livePusher.snapshot({
success: (e) => {
console.log("snapshot success:", e);
that.getMinImage(e.tempImagePath);
},
fail: (err) => {
console.log("snapshot fail:", err);
}
});
}
}
});
}
- 临时解决方案:如仍无回调,可尝试先停止预览再重新开启:
async takeSnapShot(){
await this.stopPreview();
await this.startPreview();
// 增加重试机制
setTimeout(() => {
this.livePusher.snapshot({...});
}, 1000);
}

