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方法确实存在回调不执行的问题。这通常与设备兼容性相关,以下是几个关键排查点:

  1. 权限配置:确保已在app.json中声明writePhotosAlbum权限:
"mp-weixin": {
  "permission": {
    "scope.writePhotosAlbum": {
      "desc": "用于保存人脸识别截图"
    }
  }
}
  1. 上下文获取时机:在onReady中创建live-pusher上下文是正确的,但建议增加延迟:
onReady() {
  setTimeout(() => {
    this.livePusher = uni.createLivePusherContext('livePusher', this);
    this.startPreview();
  }, 500)
}
  1. 相机状态检查:在调用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);
          }
        });
      }
    }
  });
}
  1. 临时解决方案:如仍无回调,可尝试先停止预览再重新开启:
async takeSnapShot(){
  await this.stopPreview();
  await this.startPreview();
  // 增加重试机制
  setTimeout(() => {
    this.livePusher.snapshot({...});
  }, 1000);
}
回到顶部