uni-app中使用5+的原生界面控件livepusher的Bug反馈

uni-app中使用5+的原生界面控件livepusher的Bug反馈

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win10 家庭中文版20H2
HBuilderX类型 正式
HBuilderX版本 3.2.3
手机系统 Android
手机系统版本 Android 7.1.1
手机机型 一体机
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

点击开始推流按钮后，过几秒直接闪退

预期结果：

点击推流按钮开始推流

实际结果：

点击开始推流按钮后，过几秒直接闪退

bug描述：

<template>  
    <view>  
        <text>hello-uni</text>  
        <button type="default" @click="startPusher">开始推流</button>  
    </view>  
</template>  

<script>  
    var pusher = null;  
    export default {  
        data() {  
            return {  

            };  
        },  
        onReady() {  
            const currentWebview = this.$mp.page.$getAppWebview();  
            console.log("ready")  
            pusher = plus.video.createLivePusher("livepusher", {    
                url:'', //填一个推流地址    
                top:'100px',    
                left:'0px',    
                width: '100%',    
                height: '300px',    
                position: 'static',  
                muted:false,  
                mode:"SD",  
                enableCamera:true,  
                aspect:"3:4"  
            });    
            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);  
        },  
        onLoad() {  

        },  
        methods: {  
            // 开始推流  
            startPusher() {  
                console.log("进入")  
                pusher.start(function() {  
                    console.log("开始了")  
                }, function(e) {  
                    console.log(e)  
                }); //推流开启  
            },  
        }  
    }  
</script>

更多关于uni-app中使用5+的原生界面控件livepusher的Bug反馈的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

请问解决了吗

更多关于uni-app中使用5+的原生界面控件livepusher的Bug反馈的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的代码和问题描述，这是一个典型的5+原生控件livepusher在uni-app中的使用问题。从代码逻辑和闪退现象分析，可能的原因和解决方案如下：

主要问题分析：

  1. 推流地址为空：你的代码中url:''推流地址为空字符串，这会导致推流器初始化后无法连接到有效的推流服务器，可能引发底层原生模块异常。

  2. 控件创建时机问题：在onReady生命周期中创建livepusher控件，但此时页面可能还未完全渲染完成，特别是对于需要获取准确布局信息的场景。

  3. 权限问题：Android 7.1.1系统需要明确的摄像头和麦克风权限声明，缺少权限可能导致闪退。

建议修改方案：

<template>
    <view>
        <text>hello-uni</text>
        <button type="default" @click="startPusher">开始推流</button>
        <!-- 添加一个容器用于定位livepusher -->
        <view id="pusher-container" style="position:relative;width:100%;height:300px;margin-top:100px;"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pusher: null,
            // 添加有效的推流地址
            pushUrl: 'rtmp://your-stream-server/app/stream'
        };
    },
    onReady() {
        // 延迟创建确保DOM渲染完成
        setTimeout(() => {
            this.initPusher();
        }, 100);
    },
    methods: {
        initPusher() {
            // 检查是否已存在pusher实例
            if (this.pusher) {
                return;
            }
            
            const currentWebview = this.$mp.page.$getAppWebview();
            
            // 使用正确的推流地址
            this.pusher = plus.video.createLivePusher("livepusher", {
                url: this.pushUrl, // 必须填写有效的推流地址
                top: '0px',
                left: '0px',
                width: '100%',
                height: '100%',
                position: 'static',
                muted: false,
                mode: "SD",
                enableCamera: true,
                aspect: "3:4"
            });
            
            // 获取容器并添加pusher
            const container = currentWebview.children()[0];
            if (container) {
                container.append(this.pusher);
            } else {
                currentWebview.append(this.pusher);
            }
            
            // 添加事件监听
            this.pusher.addEventListener('statechange', (e) => {
                console.log('statechange:', e.detail);
            }, false);
            
            this.pusher.addEventListener('netstatus', (e) => {
                console.log('netstatus:', e.detail);
            }, false);
            
            this.pusher.addEventListener('error', (e) => {
                console.error('pusher error:', e.detail);
            }, false);
        },
        
        startPusher() {
            if (!this.pusher) {
                this.initPusher();
                return;
            }
            
            console.log("开始推流");
            this.pusher.start(() => {
                console.log("推流开始成功");
            }, (e) => {
                console.error("推流失败:", e);
            });
        }
    },
    onUnload() {
        // 清理资源
        if (this.pusher) {
            this.pusher.close();
            this.pusher = null;
        }
    }
}
</script>

需要额外检查的配置：

  1. manifest.json权限配置：
{
    "permissions": {
        "Camera": {
            "description": "用于视频推流"
        },
        "Microphone": {
            "description": "用于音频推流"
        }
    }
}
回到顶部