1***@qq.com
1***@qq.com
  • 发布:2023-11-03 10:06
  • 更新:2024-01-26 11:24
  • 阅读:303

【报Bug】live-pusher 长时间黑屏

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: WINDOWS 10

HBuilderX类型: 正式

HBuilderX版本号: 3.95

手机系统: Android

手机系统版本号: Android 9.0

手机机型: JUXING X21

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template> <view class="pengke-camera" :style="{ width: windowWidth, height: windowHeight }"> <live-pusher id="livePusher" ref="livePusher" class="livePusher" url="" mode="SD" beauty="0" whiteness="0" aspect="aspect" min-bitrate="200" audio-quality="16KHz" device-position="back" :auto-focus="true"

muted="true" :enable-camera="true" :enable-mic="false" :zoom="false" @statechange="statechange" @netstatus="netstatus" @error="error" :style="{ width: windowWidth, height: windowHeight }"></live-pusher>

<view class="menu">  
    <!--返回键-->  
    <cover-image class="menu-back" :class="{'selected-btn':selectNum==0}"  
        src="/static/live-camera/back.png"></cover-image>  

    <!--快门键-->  
    <cover-image class="menu-snapshot" :class="{'selected-btn':selectNum==1}"  
        src="/static/live-camera/shutter.png"></cover-image>  

    <!--反转键-->  
    <cover-image class="menu-picture" :class="{'selected-btn':selectNum==2}"  
        src="/static/live-camera/picture.png"></cover-image>  
</view>  

</view>
</template>

<script>
let _this = null;
export default {
data() {
return {
eventTime: '',
poenCarmeInterval: null, //打开相机的轮询
aspect: '2:3', //比例
windowWidth: '', //屏幕可用宽度
windowHeight: '', //屏幕可用高度
camerastate: false, //相机准备好了
livePusher: null, //流视频对象
snapshotsrc: null, //快照
selectNum: 0
};
},
onLoad(e) {
_this = this;
this.initCamera();
},
onShow() {
this.listenEvent();
},
onHide() {
this.removeListener();
this.livePusher.stopPreview();
},
onReady() {
this.livePusher = uni.createLivePusherContext('livePusher', this);
var that = this;
setTimeout(function() {
that.startPreview(); //开启预览并设置摄像头
that.poenCarme();
}, 3000)

    },  
    methods: {  
        listenEvent() {  
            var that = this;  
            // 监听键按下事件      
            uni.$on("keydown", function(res) {  
                switch (res.data) {  
                    case 21:  
                        if (that.selectNum > 0) {  
                            that.selectNum = that.selectNum - 1;  
                        } else {  
                            that.selectNum = 2;  
                        }  
                        console.log("that.selectNum", that.selectNum)  
                        break;  
                    case 22:  
                        if (that.selectNum < 2) {  
                            that.selectNum = that.selectNum + 1;  
                        } else {  
                            that.selectNum = 0;  
                        }  
                        console.log("that.selectNum", that.selectNum)  
                        break;  
                }  
            });  
            uni.$on("keyup", function(res) {  
                switch (res.data) {  
                    case 139:  
                        if (that.eventTime) {  
                            var curTime = new Date() - that.eventTime  
                            if (curTime < 500) {  
                                that.eventTime = new Date();  
                                return;  
                            }  
                        }  
                        that.eventTime = new Date();  
                        switch (that.selectNum) {  
                            case 0:  
                                uni.navigateBack();  
                                break;  
                            case 1:  
                                that.snapshot();  
                                break;  
                            case 2:  
                                that.picture();  
                                break;  
                        }  
                        break;  
                }  
            });  
            // uni.$on("longpressed", function(res) {  
            //  uni.navigateBack();  
            // });  
        },  
        removeListener() {  
            uni.$off('keydown');  
            uni.$off('keyup');  
            // uni.$off('longpressed');  
        },  
        //轮询打开  
        poenCarme() {  
            //#ifdef APP-PLUS  
            if (plus.os.name == 'Android') {  
                this.poenCarmeInterval = setInterval(function() {  
                    // console.log("camerastate",_this.camerastate);  
                    if (!_this.camerastate) {  
                        // console.log("startPreview")  
                        _this.startPreview();  
                    }  
                }, 2500);  
            }  
            //#endif  
        },  
        //初始化相机  
        initCamera() {  
            uni.getSystemInfo({  
                success: function(res) {  
                    _this.windowWidth = res.windowWidth;  
                    _this.windowHeight = res.windowHeight;  
                    let zcs = _this.aliquot(_this.windowWidth, _this.windowHeight);  
                    _this.aspect = (_this.windowWidth / zcs) + ':' + (_this.windowHeight / zcs);  
                    console.log('画面比例:' + _this.aspect);  
                }  
            });  
        },  

        //整除数计算  
        aliquot(x, y) {  
            if (x % y == 0) return y;  
            return this.aliquot(y, x % y);  
        },  

        //开始预览  
        startPreview() {  
            // console.log("preview",JSON.stringify(_this.livePusher))  
            this.livePusher.start({  
                success: a => {  
                    console.log('livePusher.start:',JSON.stringify(a));  
                }  
            });  
            this.livePusher.startPreview({  
                success: (a) => {  
                    // console.log(a)  
                },  
                fail: (e) => {  
                    console.log(JSON.stringify(e) + "错误");  
                },  
            });  
        },  

        //停止预览  
        stopPreview() {  
            this.livePusher.stopPreview({  
                success: (a) => {  
                    _this.camerastate = false;  
                }  
            });  
        },  

        //状态  
        statechange(e) {  
            plus.android.requestPermissions(['android.permission.CAMERA'], function(e) {  
                // console.log("requestPermissions", e);  
            })  

            const appAuthorizeSetting = uni.getAppAuthorizeSetting()  
            // console.log("cameraAuthorized", appAuthorizeSetting.cameraAuthorized)  
            //状态改变  
            console.log("statechange", e);  
            if (e.detail.code == 1007) {  
                _this.camerastate = true;  
            } else if (e.detail.code == -1301) {  
                _this.camerastate = false;  
            }  
        },  

        netstatus(e) {  
            console.log("netstatus", e);  
        },  

        error(e) {  
            console.log("error", e);  
        },  
        //返回  
        back() {  
            uni.navigateBack();  
        },  

        //抓拍  
        snapshot() {  
            //震动  
            uni.vibrateShort({  
                success: function() {  
                    console.log('success');  
                }  
            });  
            //拍照  
            this.livePusher.snapshot({  
                success: (e) => {  
                    console.log("--------step1--------")  
                    _this.snapshotsrc = e.message.tempImagePath;  
                    console.log(_this.snapshotsrc)  
                    _this.stopPreview();  
                    _this.setImage();  
                    // uni.uploadFile({  
                    //  url: '上传接口的路径',  
                    //  filePath: e.path,  
                    //  name: 'imageFile',  
                    //  success: function(res) {  
                    //      //服务器返回的图片地址url  
                    //  },  
                    //  error: function(err) {  
                    //      console.log(err)  
                    //  }  
                    // }  
                    uni.navigateBack();  
                }  
            });  
        },  

        //反转  
        flip() {  
            this.livePusher.switchCamera();  
        },  

        //相册  
        picture() {  
            uni.navigateTo({  
                url: '/pages/picture/picture'  
            })  
        },  

        //设置  
        setImage() {  
            // let pages = getCurrentPages();  
            // let prevPage = pages[pages.length - 2];  
            // prevPage.$vm.setImage({  
            //  path: _this.snapshotsrc  
            // });  
        }  
    }  
};  

</script>

<style lang="less">
.pengke-camera {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #000000;

    .livePusher {  
        height: 95%;  
        width: 200rpx;  

    }  

    .menu {  
        width: 100rpx;  
        height: 750rpx;  
        position: absolute;  
        right: 10rpx;  
        z-index: 99;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  

        // background-color: #00aaff;  
        background-image: url(/static/live-camera/bar.png);  

        .selected-btn {  
            border-style: solid;  
            border-width: 5px;  
            border-color: #00ffff;  
        }  

        .menu-mask {  
            width: 180rpx;  
            height: 750rpx;  
        }  

        .menu-back {  
            margin-top: 10rpx;  
            margin-bottom: 10rpx;  
            width: 80rpx;  
            height: 80rpx;  
            align-items: center;  
            justify-content: center;  
        }  

        .menu-snapshot {  
            margin-top: 10rpx;  
            margin-bottom: 10rpx;  
            width: 80rpx;  
            height: 80rpx;  
        }  

        .menu-picture {  
            margin-top: 10rpx;  
            margin-bottom: 10rpx;  
            width: 80rpx;  
            height: 80rpx;  
            align-items: center;  
            justify-content: center;  
        }  
    }  
}  

</style>

操作步骤:

每次跳转到这个页面就会等很久差不多2~3分钟才能获取到摄像头的视频流,黑屏期间一直上报
{
"type": "statechange",
"timeStamp": 1698976851606,
"target": {
"id": "livePusher",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "livePusher",
"dataset": {},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {
"message": "打开摄像头失败,请确认摄像头权限是否打开",
"code": -1301
},
"stopPropagation": "function() { [native code] }"
}

预期结果:

跳转到此页面后live-pusher能够短时间内获取到摄像头的视频流

实际结果:

长时间黑屏

bug描述:

我的需求是通过live-pusher实现自定义相机的功能,按照官方文档的推荐使用的nvue写的页面,在我的Android 9.0的系统设备上运行的软件,live-pusher的statechange返回事件一直上报:“打开摄像头失败,请确认摄像头权限是否打开“,错误码-1301,我查看设备摄像头权限处于打开的,使用uni.chooseImage来调用相机是正常的,但live-pusher总是长时间黑屏,需要放很久才能显示正常,官方的demo也是一样的

2023-11-03 10:06 负责人:无 分享
已邀请:
m***@163.com

m***@163.com

请问您最后解决这个问题了嘛?

m***@163.com

m***@163.com

我使用 live-pusher 切换到后台再返回就是黑屏呢

要回复问题请先登录注册