在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
因为你提供的是本地的推流,我不能直接运行。
这个反馈比较少,你开启预览是否看到画面,测试安卓 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推流只有声音没有画面,可能是以下几个原因导致的:
- 权限问题:确保已在manifest.json中正确配置了摄像头权限:
"android": {
"permissions": [
"android.permission.CAMERA",
"android.permission.RECORD_AUDIO"
]
}
- 组件初始化时机问题:建议在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)
})
-
样式问题:确保live-pusher组件有明确的宽高样式,并且没有被其他元素遮挡。
-
推流地址问题:建议先测试一个公开的推流服务器地址,排除服务器端问题。
-
华为手机兼容性问题:部分华为机型需要特殊处理,可以尝试添加以下配置:
this.pusherObj = new plus.video.LivePusher('livePusher',{
url: this.pusherUrl,
video: {
width: 360,
height: 640,
fps: 15,
bitrate: 800
}
});