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是请求接口得到的拉流地址
**

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

UniApp一个基于 Vue.js 的跨平台开发框架,可以用于开发同时运行在多个平台上的应用程序。要实现场地预定功能,可以按照以下步骤进行: 1. 创建项目:使用命令行或者可视化工具创建一个 UniApp 项目。 2. 定义数据模型:根据场地预定的需求,定义场地和预定的数据模型。例如,可以创建一个场地列表和预定列表的数据模型。 3. 创建页面:使用 Vue.js 的语法和组件创建相关的页面。可以创建一个展示场地列表的页面和一个预定场地的页面。 4. 实现场地列表:在场地列表页面中,从后端获取场地数据,并展示在页面上。可以使用网络请求库(如 axios)向后端发送请求,并使用 Vue.js 的数据绑定将数据渲染到页面上。 5. 实现预定功能:在预定页面中,用户选择一个场地并填写预定信息。通过表单校验和提交,将预定信息发送给后端。后端处理预定请求,并返回相应的结果(如成功或失败)。 6. 更新状态:根据后端返回的结果,更新页面的状态。例如,如果预定成功,可以提示用户预定成功并更新预定列表页面的数据。 7. 添加其他功能:根据需求,可以添加其他相关功能,如查看预定详情、取消预定、修改预定等。 以上是一个简单实现场地预定功能的步骤,具体的实现细节和流程可以根据项目需求进行调整和扩展。希望对你有帮助!如果有更多问题,请继续提问。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值