2***@qq.com

发布：2023-08-04 11:02
更新：2023-08-10 10:08
阅读：525

【报Bug】vue文件下使用官方live-pusher组件及使用案例，但推流没有成功

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Window10

HBuilderX类型：正式

HBuilderX版本号： 3.6.15

手机系统： Android

手机系统版本号： Android 10

手机厂商：华为

手机机型： HONOR X10

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view>  
            <live-pusher  
                    id='livePusher'   
                    ref="livePusher"   
                    style="width: 100vw;height: 600upx;"  
                    :url="rtmpUrl"  
                    mode="SD"  
                    :muted="false"   
                    :enable-camera="true"   
                    :auto-focus="true"   
                    :beauty="1"   
                    whiteness="2"  
                    aspect="9:16"  
                    @statechange="statechange"   
                    @netstatus="netstatus"   
                    @error = "error"  
            ></live-pusher>  

            <view class="btn-box">  
                <button style="background: #FCD1D1; color: #E45762;" class="btn" @click="pauseOrResume">{{pauseText}}</button>  
                <button style="background: #E43D33; color: #fff;" class="btn" @click="meetingOver">结束会议</button>  
                <!-- <button type="default" class="btn" @click="switchCamera"><uni-icons type="camera-filled" size="35"/></button> -->  
            </view>  
        <view style="text-align: center; margin-bottom: 24px;">  
            会议已进行 {{ dateText }}  
        </view>  
    </view>  
</template>

onReady() {  
    this.context = uni.createLivePusherContext("livePusher", this);  
}，  
methods:{  
statechange(e) {  
                console.log("状态改变:" + JSON.stringify(e));  
            },  
            netstatus(e) {  
                console.log("网络状态:" + JSON.stringify(e));  
            },  
            error(e) {  
                console.log("错误提示:" + JSON.stringify(e));  
            },  
            start: function() {  
                console.log("开始推流");  
                this.isClose = false;//直播未停止不能退出  
                this.context.start({  
                    success: (a) => {  
                        console.log("开始推流：" + JSON.stringify(a));  
                    }  
                });  
                      }  
}

操作步骤：

见附件很代码文档

预期结果：

推流成功

实际结果：

推流成功

bug描述：

文件上是.vue，使用live-pusher组件推流状态是正常，但是网络状态推流没反应。

2023-08-04 11:02 负责人:无分享

2 个回复

2***@qq.com (作者)

// #ifdef APP-PLUS
const currentWebview = this.$mp.page.$getAppWebview(); //注意相关操作写在APP-PLUS条件编译下
// #endif
pusher = plus.video.createLivePusher("livepusher", {
url:this.rtmpUrl,
top:'0px',
left:'0px',
width: '100%',
height: '500px',
position: 'static',
muted:false,
mode:"FHD",
enableCamera:true,
aspect:"16:9"
});
currentWebview.append(pusher);
pusher.addEventListener('statechange', function(e) {
console.log(e)
console.log('statechange: ' + JSON.stringify(e));
}, false);
// 监听网络状态变化事件
pusher.addEventListener('netstatus', function(e) {
console.log('netstatus: ' + JSON.stringify(e));
}, false);
// 监听错误事件
pusher.addEventListener('error', function(e) {
console.log('error: ' + JSON.stringify(e));
}, false);
this.startPusher();
methods:{
// 开始推流
startPusher() {
this.isClose = false;//直播未停止不能退出
pusher.start(function() {
console.log("开始推流")
}, function(e) {
console.log('开始推流:',e)
});
},
}

喜欢技术的前端 - QQ---445849201

加了代码，测试，成功推流，用地址也有播流画面，这里换一下rtmpUrl: '你的地址',

<template>  
    <view>  
        <live-pusher id='livePusher' ref="livePusher" style="width: 100vw;height: 600upx;" :url="rtmpUrl" mode="SD"  
            :muted="false" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="9:16"  
            @statechange="statechange" @netstatus="netstatus" @error="error"></live-pusher>  

        <view class="btn-box">  
            <button style="background: #FCD1D1; color: #E45762;" class="btn"  
                @click="pauseOrResume">{{pauseText}}</button>  
            <button style="background: #E43D33; color: #fff;" class="btn" @click="meetingOver">结束会议</button>  
            <!-- <button type="default" class="btn" @click="switchCamera"><uni-icons type="camera-filled" size="35"/></button> -->  
        </view>  
        <view style="text-align: center; margin-bottom: 24px;">  
            会议已进行 {{ dateText }}  
        </view>  
        <button @click="start">开始推流</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                rtmpUrl: '你的地址',  
                pauseText: 'pauseText',  
                dateText: 'dateText',  
                                isClose:''  
            }  
        },  
        onReady() {  
            this.context = uni.createLivePusherContext("livePusher", this);  
        },  
        methods: {  

            meetingOver() {  

            },  
            pauseOrResume() {  

            },  
            statechange(e) {  
                console.log("状态改变:" + JSON.stringify(e));  
            },  
            netstatus(e) {  
                console.log("网络状态:" + JSON.stringify(e));  
            },  
            error(e) {  
                console.log("错误提示:" + JSON.stringify(e));  
            },  
            start: function() {  
                console.log("开始推流");  
                this.isClose = false; //直播未停止不能退出    
                this.context.start({  
                    success: (a) => {  
                        console.log("开始推流：" + JSON.stringify(a));  
                    }  
                });  
            }  
        }  
    }  
</script>  

<style>  

</style>

2***@qq.com (作者)

我有加地址的，是rtmp个流地址，但是在vue下还是有问题，我后面直接用原生的写的。但是为啥首次推流会闪退呢？

2023-08-10 10:08
喜欢技术的前端

回复 2***@qq.com: 我之前就用的rtmp地址，倒是没发现，可能跟机型有关，大概率是 this.context = uni.createLivePusherContext("livePusher", this); 这里的问题

2023-08-10 10:10
2***@qq.com (作者)

回复喜欢技术的前端: 有可能，那你又出现第一次直播闪退的现象吗？

2023-08-10 11:41
喜欢技术的前端

回复 2***@qq.com: 没有，我是用小米测试的，你可以给这里加个延时

2023-08-10 11:46

要回复问题请先登录或注册

【报Bug】vue文件下使用官方live-pusher组件及使用案例，但推流没有成功

操作步骤：

见附件很代码文档

预期结果：

推流成功

实际结果：

推流成功

bug描述：

2 个回复

公告

相关问题

【报Bug】vue文件下 使用官方live-pusher组件及使用案例，但推流没有成功

操作步骤： 见附件很代码文档

预期结果： 推流成功

实际结果： 推流成功

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

【报Bug】vue文件下使用官方live-pusher组件及使用案例，但推流没有成功

操作步骤：

见附件很代码文档

预期结果：

推流成功

实际结果：

推流成功