在uni-app的vue页面使用live-pusher推流没有画面只有声音

在uni-app的vue页面使用live-pusher推流没有画面只有声音

开发环境 版本号 项目创建方式
Mac macOS:14.4.1 (23E224) HBuilderX

产品分类:uniapp/App

PC开发环境操作系统:Mac

HBuilderX类型:正式

HBuilderX版本号:4.45

手机系统:Android

手机系统版本号:Android 10

手机厂商:华为

手机机型:ALP-AL00

页面类型:vue

vue版本:vue3

打包方式:云端

示例代码:

<template>  
    <view class="content">  
        <template v-if="pusherUrl">  
            <live-pusher id="livePusher" class="livePusher" ref="livePusher" />  
        </template>  

        <view class="btn">  
            <button @click="doStart()">开始推流</button>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            pusherObj: null, // 推流对象  
            pusherUrl: '' // 推流地址  
        }  
    },  
    onLoad() {  
        console.log(uni.getDeviceInfo())  
        this.pusherUrl = 'rtmp://192.168.1.33/live/push/camera/demo'  
        setTimeout(() => {  
            this.pusherObj = new plus.video.LivePusher('livePusher',{  
                url: this.pusherUrl  
            });  
            setTimeout(() => {  
                this.pusherObj.preview()  
            }, 500)  
        }, 500)  
    },  
    methods: {  
        // 开始推流  
        doStart() {  
            console.log(this.pusherObj)  
            // 开始推流  
            this.pusherObj.start(() => {  
                console.log('Start pusher success!');  
            }, (e) => {  
                console.log(e);  
            });  
        }  
    }  
}  
</script>  

<style>  
    .content {  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        flex-direction: column;  
    }  
    .livePusher {  
        width: 320px;  
        height: 280px;  
    }  
    .btn {  
        margin-top: 20px;  
    }  
</style>  

操作步骤:

0、在manifest.json勾选LivePusher模块并打好自定义基座  
1、利用plus.video.LivePusher初始化对象  
2、利用preview()开启预览  
3、利用start()开始推流

预期结果:

能够显示推流的声音及画面。

实际结果:

只有声音,没有画面

bug描述:

1、在vue的页面(非nvue)中使用<live-pusher>组件进行推流
2、利用plus.video.LivePusher初始化对象(因为利用uni.createLivePusherContext(id, this);声音画面都没)
3、利用preview()开启预览
4、利用start()开始推流
5、结果推出去的只有声音,但没有画面。


更多关于在uni-app的vue页面使用live-pusher推流没有画面只有声音的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

因为你提供的是本地的推流,我不能直接运行。
这个反馈比较少,你开启预览是否看到画面,测试安卓 ios 等真机设备是否都不正常?

更多关于在uni-app的vue页面使用live-pusher推流没有画面只有声音的实战教程也可以访问 https://www.itying.com/category-93-b0.html


开启预览能看到画面,只是开始进行推送时画面就定住了的样子,但能推送声过去,就是画面没有。真机设备也是正常的。(注:在nvue页面,换为uni.createLivePusherContext(id, this)使用时接送是正常的)

请问这个还有别的方法不?请问有没DEMO可提供参考下?

根据您描述的问题,在uni-app的vue页面使用live-pusher推流只有声音没有画面,可能是以下几个原因导致的:

  1. 权限问题:确保已在manifest.json中正确配置了摄像头权限:
"android": {
    "permissions": [
        "android.permission.CAMERA",
        "android.permission.RECORD_AUDIO"
    ]
}
  1. 组件初始化时机问题:建议在mounted生命周期中初始化live-pusher,而不是onLoad。Vue3中可以这样修改:
import { onMounted } from 'vue'
onMounted(() => {
    this.pusherObj = new plus.video.LivePusher('livePusher',{
        url: this.pusherUrl,
        whiteness: 0,  // 美白
        beauty: 0,     // 美颜
    });
    setTimeout(() => {
        this.pusherObj.preview()
    }, 500)
})
  1. 样式问题:确保live-pusher组件有明确的宽高样式,并且没有被其他元素遮挡。

  2. 推流地址问题:建议先测试一个公开的推流服务器地址,排除服务器端问题。

  3. 华为手机兼容性问题:部分华为机型需要特殊处理,可以尝试添加以下配置:

this.pusherObj = new plus.video.LivePusher('livePusher',{
    url: this.pusherUrl,
    video: {
        width: 360,
        height: 640,
        fps: 15,
        bitrate: 800
    }
});
回到顶部