【2020-04-23】使用uniapp实现简易直播

2020年4月23日23:14:38 发表评论 547 热度

实验准备

  1. 服务器部署nginx-rtmp作为我们直播推流和拉流的服务器(如果服务商选择七牛,也是直接给地址推流)。为了加快部署,我在这一步使用Docker。
    docker pull tiangolo/nginx-rtmp
    docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp
  1. 记下推流地址(我本地搭建的:192.168.1.178:1935
  2. 新建Uniapp项目
  3. 点击项目下方的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>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: