<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>
xiaopao
- 发布：2025-02-25 16:43
- 更新：2025-02-25 16:43
- 阅读：14
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： Mac mini Apple M2 (macOS:14.4.1 (23E224))
HBuilderX类型： 正式
HBuilderX版本号： 4.45
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： ALP-AL00
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
0、在manifest.json勾选LivePusher模块并打好自定义基座
1、利用plus.video.LivePusher初始化对象
2、利用preview()开启预览
3、利用start()开始推流
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、结果推出去的只有声音，但没有画面。