uniapp簡易直播

實驗准備

1. 在服務器部署nginx-rtmp作為我們直播推流和拉流的服務器（如果服務商選擇七牛，也是直接給地址推流）。為了加快部署，我在這一步使用Docker。

docker pull tiangolo/nginx-rtmp
docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp

2. 記下推流地址（我本地搭建的：192.168.1.178:1935）
3. 新建Uniapp項目
4. 點擊項目下方的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>