uniapp实现简单直播功能

uniapp实现简单的直播功能其实很简单,因为uniapp本身就集成了一个api,直播主要有两点,推流拉流,下面是实现代码

1.推流

<template>
	<view class="content">
		<template>
			<view>
				<live-pusher
					id="livePusher"
					ref="livePusher"
					class="livePusher"
					url=""  **这里需要请求后端接口,拿到推流地址**
					mode="SD"
					:muted="true"
					:enable-camera="true"
					:auto-focus="true"
					:beauty="1"
					whiteness="2"
					aspect="9:16"
					@statechange="statechange"
					@netstatus="netstatus"
					@error="error"
				></live-pusher>
				<button class="btn" @click="start">开始推流</button>
				<button class="btn" @click="pause">暂停推流</button>
				<button class="btn" @click="resume">resume</button>
				<button class="btn" @click="stop">停止推流</button>
				<button class="btn" @click="snapshot">快照</button>
				<button class="btn" @click="startPreview">开启摄像头预览</button>
				<button class="btn" @click="stopPreview">关闭摄像头预览</button>
				<button class="btn" @click="switchCamera">切换摄像头</button>
				<button class="btn" @click="bofang">去播放</button>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			context:[]
		};
	},
	onReady() {
		// 注意:需要在onReady中 或 onLoad 延时
		this.context = uni.createLivePusherContext('livePusher', this);
	},
	methods: {
		statechange(e) {
			console.log('statechange:' + JSON.stringify(e));
		},
		netstatus(e) {
			console.log('netstatus:' + JSON.stringify(e));
		},
		error(e) {
			console.log('error:' + JSON.stringify(e));
		},
		start(){
			this.context.start({
				success: a => {
					console.log('livePusher.start:' + JSON.stringify(a));
				},
				error:err=>{
					console.log(err)
				}
			});
		},
		close() {
			this.context.close({
				success: a => {
					console.log('livePusher.close:' + JSON.stringify(a));
				}
			});
		},
		snapshot() {
			this.context.snapshot({
				success: e => {
					console.log(JSON.stringify(e));
				}
			});
		},
		resume() {
			this.context.resume({
				success: a => {
					console.log('livePusher.resume:' + JSON.stringify(a));
				}
			});
		},
		pause() {
			this.context.pause({
				success: a => {
					console.log('livePusher.pause:' + JSON.stringify(a));
				}
			});
		},
		stop() {
			this.context.stop({
				success: a => {
					console.log(JSON.stringify(a));
				}
			});
		},
		switchCamera() {
			this.context.switchCamera({
				success: a => {
					console.log('livePusher.switchCamera:' + JSON.stringify(a));
				}
			});
		},
		startPreview() {
			this.context.startPreview({
				success: a => {
					console.log('livePusher.startPreview:' + JSON.stringify(a));
				}
			});
		},
		stopPreview() {
			this.context.stopPreview({
				success: a => {
					console.log('livePusher.stopPreview:' + JSON.stringify(a));
				}
			});
		},
		bofang(){
			this.$u.route({
				url: 'pages/index/index'
			})
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>

**

2. 拉流

这里是app拉流,用的是video标签,代码如下

<template>
	<view>
		<video src="" style="width: 100vw;height: 400rpx;" :autoplay="true" controls></video>
	</view>
</template>
 
<script>
	export default {}
</script>

src是请求接口得到的拉流地址
**

上面就是简单的直播方式实现,亲测有效,需要添加美颜等功能可根据官方文档自行添加

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值