uniapp live-pusher + 腾讯云直播

直播端

html 复制代码
<live-pusher
			id="livePusher"
			ref="livePusher"
			class="livePusher"
			:url="src"
			:mode="mode"
			:enable-camera="enableCamera"
			:auto-focus="true"
			:device-position="position"
			:beauty="beauty"
			:whiteness="whiteness"
			aspect="9:16"
			@statechange="statechange"
			@netstatus="netstatus"
			@error="error"
			:style="'height: ' + windowHeight + 'px;'"
			style="width: 750rpx"
		></live-pusher>
javascript 复制代码
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			windowHeight: 0,
			src: '',
			mode: 'FHD',
			enableCamera: true,
			position: 'front',
			beauty: 0,
			whiteness: 0,
			context: null,
			// 是否开始推流
			isStart: false,
			isPause: false,
		};
	},
	onLoad(options) {
		/* 叫后端返回,推流地址别加鉴权,加了鉴权出不来 */
		this.src = options.url;
	},
	onShow() {
		let res = uni.getSystemInfoSync();
		this.windowHeight = res.windowHeight;
		if (this.context) {
			this.resume();
		}
	},
	onReady() {
		this.context = uni.createLivePusherContext('livePusher', this);
		this.startPreview();
		// 开始推流
		this.start();
	},
	onBackPress(e) {
		if (e.from == 'backbutton') {
			this.back();
			return true;
		}
	},
	onUnload() {
		this.stop();
	},
	methods: {
		// 开始推流
		start() {
			this.context.start({
				success: (e) => {
					this.isStart = true;
					console.log('开始推流', e);
				},
				fail: (err) => {
					console.log('开始推流失败', err);
				}
			});
		},
		// 开启预览
		startPreview() {
			this.context.startPreview({
				success: (e) => {
					console.log('开启预览', e);
				}
			});
		},
		// 直播状态变化
		statechange(e) {
			console.log('直播状态变化', e);
		},
		// 直播网络变化
		netstatus(e) {
			console.log('直播网络变化', e);
		},
		error(e) {
			console.log('直播报错', e);
		},
		stop() {
			this.context.stop({
				success: () => {
					
				}
			});
		},
		// 继续推流
		resume() {
			this.context.resume({
				success: () => {
					this.isPause = false;
				}
			});
		},
		// 暂停推流
		pause() {
			this.context.pause({
				success: () => {
					this.isPause = true;
				}
			});
		},
		// 退出直播
		back() {
			uni.showModal({
				content: '是否要关闭直播间?',
				success: (res) => {
					if (res.cancel) {
						return;
					}
					this.stop();
				}
			});
		},
	}
};
</script>

腾讯云直播文档地址(发给后端就行---推流地址别加鉴权)

https://cloud.tencent.com/document/product/267/32833

观众端,拉流地址就让后端直接返回就行

其他代码就不贴了,涉及到我这边其他业务,你们不一定用得上,懒得贴

相关推荐
一位搞嵌入式的 genius1 分钟前
深入理解 JavaScript 异步编程:从 Event Loop 到 Promise
开发语言·前端·javascript
m0_564914924 分钟前
Altium Designer,AD如何修改原理图右下角图纸标题栏?如何自定义标题栏?自定义原理图模版的使用方法
java·服务器·前端
brevity_souls6 分钟前
SQL Server 窗口函数简介
开发语言·javascript·数据库
方安乐15 分钟前
react笔记之useCallback
前端·笔记·react.js
2501_9159090616 分钟前
苹果iOS应用上架详细流程与注意事项解析
android·ios·小程序·https·uni-app·iphone·webview
小二·39 分钟前
Python Web 开发进阶实战:AI 伦理审计平台 —— 在 Flask + Vue 中构建算法偏见检测与公平性评估系统
前端·人工智能·python
走粥1 小时前
选项式API与组合式API的区别
开发语言·前端·javascript·vue.js·前端框架
We་ct1 小时前
LeetCode 12. 整数转罗马数字:从逐位实现到规则复用优化
前端·算法·leetcode·typescript
方安乐1 小时前
react笔记之useMemo
前端·笔记·react.js
郑州光合科技余经理1 小时前
源码部署同城O2O系统:中台架构开发指南
java·开发语言·后端·架构·系统架构·uni-app·php