Uniapp live

In fact, uniApp is very simple to implement the simple function of live broadcasting, because uniApp itself integrates an API, live broadcasting mainly has two points, push flow pull flow, the following is the implementation code

1. The flow

<template>
	<view class="content">
		<template>
			<view>
                        <live-pusher
                                id="livePusher"
                                ref="livePusher"
                                class="livePusher"
                                url=""** here need to request the backend interface, get the push stream address **mode="SD"
                                :muted="true"
                                :enable-camera="true"
                                :auto-focus="true"
                                :beauty="1"
                                whiteness="2"
                                aspect="Now"
                                @statechange="statechange"
                                @netstatus="netstatus"
                                @error="error"
                        ></live-pusher>
                        <button class="btn" @click="start">Began pushing flow</button>
                        <button class="btn" @click="pause">Stop pushing flow</button>
                        <button class="btn" @click="resume">resume</button>
                        <button class="btn" @click="stop">Stop pushing flow</button>
                        <button class="btn" @click="snapshot">The snapshot</button>
                        <button class="btn" @click="startPreview">Enable Camera Preview</button>
                        <button class="btn" @click="stopPreview">Turn off camera preview</button>
                        <button class="btn" @click="switchCamera">Switching cameras</button>
                        <button class="btn" @click="bofang">Go to play</button>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			context:[]
		};
	},
	onReady() {
		// Note: need to be in onReady or onLoad delay
		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>

Copy the code

支那

2. Pull flow

Here is the app pull stream, using the video tag, and the code is as follows

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

SRC is the pull address ** obtained by the request interface

The above is a simple way to achieve live testing, effective, need to add beauty and other functions can be added according to the official document