uniapp直播模块丐版
准备
- 在服务器部署
nginx-rtmp作为我们直播推流和拉流的服务器（如果服务商选择七牛，也是直接给地址推流）。为了加快部署，我在这一步使用Docker。
docker pull tiangolo/nginx-rtmp
docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp
- 记下推流地址（本地搭建的：
192.168.1.123:1935） - 新建Uniapp项目
- 点击项目下方的
manifest.json文件，点击APP常用其他设置去除V3编译器（Hbuilder 2.5.9 alpha V3模式会报uni.createLivePusherContext的错，后续版本无此问题）
Part 1 直播推流
index.nvue(uni.createLivePusherContext在APP端仅支持Nvue)
<template>
<view>
<live-pusher id="livePusher" :url="url" mode="FHD"></live-pusher>
<button @click="startLive">开始推流（开始直播）</button>
<button @click="stopLive">结束推流</button>
</view>
</template>
<script>
export default {
data() {
return {
url: 'rtmp://192.168.1.178:1935/live/exp',
enableCamera: false,
context: null
};
},
onReady() {
this.context = uni.createLivePusherContext('livePusher', this);
},
methods: {
EnableCamera() {
this.enableCamera = true;
},
startLive() {
this.context.start({
success: a => {
console.log('livePusher.start:' + JSON.stringify(a));
}
});
},
stopLive() {
this.context.stop({
success: a => {
console.log(JSON.stringify(a));
}
});
}
}
};
</script>
Part 2 直播拉流(播放)
App的实时音视频播放，不是使用 live-player，而是直接使用 video 组件。 （来源：官网文档）
<template>
<view>
<video src="rtmp://192.168.1.178:1935/live/exp" style="width: 100vw;height: 400rpx;" :autoplay="true" controls></video>
</view>
</template>
<script>
export default {}
</script>
效果
若Gif无法播放右键新标签打卡
备注
- 解释一下推流/拉流地址结构：
rtmp://<ServerIp>:<Port>/live/<LiveKeyWords>
