德
  • 发布:2022-06-16 14:12
  • 更新:2023-05-11 13:47
  • 阅读:1215

【报Bug】live-pusher无法使用

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10 企业ltsc

HBuilderX类型: 正式

HBuilderX版本号: 3.4.15

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: redmi 9a

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">  
        <view class="preview" :style="{ width: windowWidth, height: windowHeight }">  
            <live-pusher  
                id="livePusher"  
                ref="livePusher"  
                class="livePusher"  
                :style="{ width: windowWidth, height: windowHeight }"  
                :url="pushUrl"  
                mode="FHD"  
                :beauty="0"  
                :whiteness="0"  
                :aspect="aspect"  
                :min-bitrate="1000"  
                audio-quality="16KHz"  
                device-position="back"  
                orientation="vertical"  
                :auto-focus="false"  
                :muted="true"  
                :enable-camera="true"  
                :enable-mic="false"  
                :zoom="true"  
                @statechange="statechange"  
                @error="onErrors"  
            ></live-pusher>  
            <!--提示语-->  
            <cover-view class="remind">{{ address }}</cover-view>  
            <cover-view class="remind">{{ username }}{{ time }}</cover-view>  
        </view>  
        <view class="menu">  
            <!--底部菜单区域背景-->  
            <cover-image class="menu-mask" src="@/static/camera/bar.png"></cover-image>  
            <!--返回键-->  
            <cover-image class="menu-back" @tap="back" src="@/static/camera/back.png"></cover-image>  
            <!--快门键-->  
            <cover-image class="menu-snapshot" @tap="snapshot" src="@/static/camera/take_btn.png"></cover-image>  
            <!--反转键-->  
            <cover-image class="menu-flip" @tap="flip" src="@/static/camera/flip.png"></cover-image>  
        </view>  
    </view>  
</template>  

<script>  
let _this = null;  
export default {  
    data() {  
        return {  
            dotype: 'watermark',  
            username: uni.getStorageSync('loginUserName'),  
            address: '暂无信息',  
            time: '2022-2-14 10:23',  
            pushUrl: '', //打开相机的轮询  
            poenCarmeInterval: null, //打开相机的轮询  
            aspect: '9:16', //比例  
            windowWidth: '100vw', //屏幕可用宽度  
            windowHeight: '100vh', //屏幕可用高度  
            camerastate: false, //相机准备好了  
            livePusher: null, //流视频对象  
            snapshotsrc: null, //快照,  
            timer: null //定时器  
        };  
    },  
    mounted() {  
        _this = this;  
        _this.initCamera();  
        setTimeout(() => {  
            _this.getAddress();  
            let date = new Date();  
            _this.time = _this.dateFormat('YYYY-mm-dd HH:MM', date);  
            _this.livePusher = uni.createLivePusherContext('livePusher', _this);  
             _this.startPreview(); //开启预览并设置摄像头  
            _this.poenCarme();  
        }, 5000);  
    },  
    onShow() {  
        clearInterval(this.timer);  
        // 每隔10秒刷新地址和时间  
        this.timer = setInterval(() => {  
            this.getAddress();  
            let date = new Date();  
            this.time = this.dateFormat('YYYY-mm-dd HH:MM', date);  
        }, 10000);  
    },  
    onUnload() {  
        clearInterval(this.timer);  
    },  
    methods: {  
        getAddress() {  
            uni.getLocation({  
                type: 'gcj02',  
                geocode: true,  
                isHighAccuracy: true,  
                success: res => {  
                    this.address = res.address.province + res.address.city + res.address.district + res.address.street + res.address.streetNum + res.address.poiName;  
                    console.log('当前位置:', this.address);  
                    console.log('当前位置的经度:' + res.longitude);  
                    console.log('当前位置的纬度:' + res.latitude);  
                }  
            });  
        },  
        //轮询打开  
        poenCarme() {  
            _this = this;  
            //#ifdef APP-PLUS  
            if (plus.os.name == 'Android') {  
                this.poenCarmeInterval = setInterval(function() {  
                    console.log('poenCarme', _this.camerastate);  
                    if (!_this.camerastate) {  
                        console.log('poenCarme.false', _this.camerastate);  
                        _this.startPreview();  
                    }  
                }, 2500);  
            }  
            //#endif  
        },  
        //初始化相机  
        initCamera() {  
            _this = this;  
            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() {  
            this.livePusher.startPreview({  
                success: a => {  
                    console.log('startPreview', a);  
                },  
                complete: a => {  
                    console.log('startPreview.complete', a);  
                }  
            });  
        },  

        //停止预览  
        stopPreview() {  
            _this = this;  
            this.livePusher.stopPreview({  
                success: a => {  
                    _this.camerastate = false; //标记相机未启动  
                }  
            });  
        },  

        //状态  
        statechange(e) {  
            _this = this;  
            //状态改变  
            console.log(e);  
            if (e.detail.code == 1007) {  
                _this.camerastate = true;  
            } else if (e.detail.code == -1301) {  
                _this.camerastate = false;  
            }  
        },  
        onErrors(e) {  
            console.log('onError.error', e);  
        },  
        //返回  
        back() {  
            uni.navigateBack();  
        },  

        //抓拍  
        snapshot() {  
            _this = this;  
            console.log('snapshot.start');  
            try {  
                this.livePusher.snapshot({  
                    success: e => {  
                        console.log('livePusher.success', JSON.stringify(e));  
                    },  
                    fail: err => {}  
                });  
            } catch (e) {  
                console.log('livePusher.catch', JSON.stringify(e));  
            }  
        },  

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

        //设置  
        setImage() {  
            _this = this;  
            console.log('setImage', this.username, this.address, this.time, _this.snapshotsrc);  
            return;  
        },  
        dateFormat(fmt, date) {  
            let ret;  
            const opt = {  
                'Y+': date.getFullYear().toString(), // 年  
                'm+': (date.getMonth() + 1).toString(), // 月  
                'd+': date.getDate().toString(), // 日  
                'H+': date.getHours().toString(), // 时  
                'M+': date.getMinutes().toString(), // 分  
                'S+': date.getSeconds().toString() // 秒  
                // 有其他格式化字符需求可以继续添加,必须转化成字符串  
            };  
            for (let k in opt) {  
                ret = new RegExp('(' + k + ')').exec(fmt);  
                if (ret) {  
                    fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'));  
                }  
            }  
            return fmt;  
        }  
    }  
};  
</script>  

<style lang="less">  
.live-camera {  
    justify-content: center;  
    align-items: center;  
    position: relative;  
}  

.preview {  
    justify-content: center;  
    align-items: center;  
}  

.remind {  
    position: absolute;  
    top: 10rpx;  
    left: 20rpx;  
    z-index: 99999;  
    width: 100%;  
    &:nth-child(2) {  
        top: 40rpx;  
    }  
}  

.menu {  
    position: absolute;  
    left: 0;  
    bottom: 0;  
    width: 750rpx;  
    height: 180rpx;  
    z-index: 99999;  
    align-items: center;  
    justify-content: center;  
}  

.menu-mask {  
    position: absolute;  
    left: 0;  
    bottom: 0;  
    width: 750rpx;  
    height: 180rpx;  
    z-index: 98;  
}  

.menu-back {  
    position: absolute;  
    left: 30rpx;  
    bottom: 50rpx;  
    width: 80rpx;  
    height: 80rpx;  
    z-index: 99;  
    align-items: center;  
    justify-content: center;  
}  

.menu-snapshot {  
    width: 130rpx;  
    height: 130rpx;  
    z-index: 99;  
}  

.menu-flip {  
    position: absolute;  
    right: 30rpx;  
    bottom: 50rpx;  
    width: 80rpx;  
    height: 80rpx;  
    z-index: 99;  
    align-items: center;  
    justify-content: center;  
}  
</style>

操作步骤:

预期结果:

拿到快照临时文件信息

实际结果:

bug描述:

livePusher组件内所有方法都没有回调
快照snapshot也没反应只有声音

2022-06-16 14:12 负责人:DCloud_Android_DQQ 分享
已邀请:
德

(作者) - .

使用文档示例代码同样无效

DCloud_Android_DQQ

DCloud_Android_DQQ

hello uni在你的设备上 运行不正常?
拍个视频看看。没看懂你的意思

  • (作者)

    你有QQ获取其他的联系方式方便加一下吗

    2022-06-17 14:17

  • (作者)

    除了切换前后摄像头,其他都不执行

    2022-06-17 14:24

  • DCloud_Android_DQQ

    回复 : 先说明你的问题。

    2022-06-17 14:52

德

(作者) - .

这个组件无法正常使用,开启预览失败,切换摄像头可以正常,无法截屏快照

  • (作者)

    而且会出现异常退出

    2022-06-17 15:13

Azikou

Azikou

大佬解决了么, 我也是。 求分享

杨杨得亿

杨杨得亿 - 这个人很懒,什么都没有留下~

建议使用nvue来编写这个相机,然后把nvue作为子模板挂在vue页面下。

  • Azikou

    我是这么做的。 然后当他作为组件时,一些api就没响应了,

    this.livePusher = uni.createLivePusherContext('livePusher', this);

    首先是这个api上的,startPreview,snapshot 这些都没反应,打印this.livePusher就报json错误

    2023-05-11 13:52

  • 杨杨得亿

    回复 Azikou: 可能它作为组件的时,并没有在pages.json中注册,所有再创建livePusherContext 对象时,找不到根组件,那个this可以加上this.$parent试试,this.livePusher = uni.createLivePusherContext('livePusher', this.$parent);我没有过多的时间调试你的这个demo,我这边也写过类似的水印相机,我是把他作为公共的nvue模板,然后哪里使用,就挂在哪个vue的下面。

    2023-05-11 14:17

  • Azikou

    好的,我试试 this.$parent这个

    2023-05-11 14:27

  • Azikou

    回复 1***@qq.com: 还是不行,大佬能加个好友么,qq179526027 wx:Azikou

    2023-05-11 14:31

  • 杨杨得亿

    回复 Azikou: 加你了

    2023-05-11 14:42

要回复问题请先登录注册