uniapp嵌套webview h5调用前置摄像头闪退问题

HTM5+ plusAPI调用前置摄像头闪退

App使用webview加载h5,实现人脸验证功能,首次调起前置摄像头快照大概率闪退问题

this.pusher = plus.video.createLivePusher('live', {
        url: '',
        top: '100px',
        left: '50px',
        width: '80%',
        height: '70%',
        position: 'absolute',
        aspect: '9:16',
        'z-index': 999
      })
      // 推流对象append到当前页面中。this.webview当前窗口对象
      this.webview.append(this.pusher)
      // 转换成前置摄像头--引起闪退
      // this.pusher.switchCamera()

原因分析:

原因有二:
一、App首次调用摄像头涉及授权问题,要先授权再执行人脸组件(我这边用extend写的,授权页面弹出来了但是h5还再执行)
二、h5调用摄像头使用的到直播流,直播流未加载完就去操作反转摄像头容易报错崩溃

解决方案:

第一步:授权成功之后再加载h5

plus.android.requestPermissions(['android.permission.CAMERA'], async function(e) {  
                console.error('e ==>', e);
                if (e.granted.includes('android.permission.CAMERA')) { // 授权成功
                    // 在这里调用h5组件
                    // Vue.extend(Face)或者设置组件显示
                }  
            }, function(e) {
                // 当前容器只提示一次,销毁后台再进还提
                console.log(e)  
            });

第二步:直播流 反转摄像头执行顺序

// 1.创建窗口对象
this.webview = 创建窗口/获取当前窗口;
this.pusher = null;
this.htmlShaw = null;
this.faceTimeout = null
// 2.创建视频推流对象
init () { 
      this.pusher = plus.video.createLivePusher('livepusher', {
        url: '',
        top: '100px',
        left: '50px',
        width: '80%',
        height: '70%',
        position: 'absolute',
        aspect: '9:16',
        'z-index': 999
      })
      // 将推流对象append到当前页面中
      this.webview.append(this.pusher)
    },
// 3.添加html覆盖 要不样式初始化时候不好看
      this.htmlShaw = plus.webview.create('/hybrid/html/scan.html', 'face', {
        top: '70px',
        background: 'transparent',
      })
      // 显示窗口
      this.htmlShaw.show()
// 4.异步反转摄像头和执行快照
this.faceTimeout = setTimeout(() => {
        this.pusher.switchCamera()
        this.snapshot() // 快照api
      }, 500)

记得 销毁异步和关闭html覆盖的webview窗口

你可能感兴趣的:(uni-app,webview,vue)