mianxueyoupin/pages/shop/live/live.nvue

<!-- 
	版本声明：
	* 由于 WanlLive、WanlChat、以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任 
	* 深圳前海万联科技有限公司 @www.i36k.com /pages/shop/live/live
-->
<template>
	<view class="content">
		<div class="wanlive-pusher">
			<!-- #ifndef H5 -->
			<live-pusher
				id="livePusher"
				ref="livePusher"
				class="livePusher"
				:url="liveData.pushurl"
				:style="{width: screenWidth + 'px',height: screenHeight + 'px'}"
				mode="HD"
				aspect="9:16"
				@statechange="statechange"
				@netstatus="netstatus"
				@error="error"
			/>
			<!-- #endif -->
		</div>
		<div class="wanlive-header" :style="{top:statusBarHeight + 'px'}">
			<wanl-live-header 
				:shopdata="shopData" 
				:state="state" 
				:online="liveStatis.online" 
			/>
		</div>
		<!-- <div class="wanlive-bulletin" :style="{top: 0, left: 0}">
			<wanl-live-bulletin />
		</div> -->
		<div v-if="state == 1" class="wanlive-message" :style="{bottom:statusFootHeight + 60 +'px'}">
			<wanl-live-message ref="message" />
		</div>
		<div class="wanlive-control" :style="{bottom:statusFootHeight +'px'}">
			<wanl-live-control
				:statusFootHeight="statusFootHeight" 
				:screenHeight="screenHeight"
				:screenWidth="screenWidth"
				:liveId="liveData.id"
				:like="liveStatis.like" 
				:state="state"
				@send="sendLive" 
				@change="handleLive"
			/>
		</div>
	</view>
</template>

<script>
var system = uni.getSystemInfoSync();
import wanlLiveHeader from '@/components/wanl-live/header';
import wanlLiveTip from '@/components/wanl-live/tip';
import wanlLiveMessage from '@/components/wanl-live/message';
import wanlLiveBulletin from '@/components/wanl-live/bulletin';
import wanlLiveControl from '@/components/wanl-live/control';
export default {
	components: {
		wanlLiveHeader,
		wanlLiveTip,
		wanlLiveMessage,
		wanlLiveBulletin,
		wanlLiveControl
	},
	data() {
		return {
			statusBarHeight: system.safeAreaInsets.top,
			statusFootHeight: system.safeAreaInsets.bottom,
			screenHeight: system.screenHeight,
			screenWidth: system.screenWidth,
			state: 0,
			publish: true, // 推流状态
			startTimer: null,
			liveStatis: {
				online: 0,
				like: 0
			},
			liveData: {
				id: 0,
				liveid: ''
			},
			shopData: {
				shopname: '直播正在准备中'
			},
			goodsData: [],
			goodsSelected: []
		};
	},
	// 监听页面卸载
	onUnload() {
		this.publish = false;
		this.pageUnload();
	},
	// 监听返回
	onBackPress() {
		this.publish = false;
		if (this.liveData.id == 0) {
			this.$wanlshop.back(1);
		}else{
			uni.showModal({
			    title: '提示',
			    content: '您确定要结束直播吗？',
			    success: (res) =>{
			        if (res.confirm) {
						this.handleLive('stop');
			            uni.reLaunch({
			                url: `/pages/page/end_live?id=${this.liveData.id}`
			            });
			        }
			    }
			});
		}
	},
	onReady() {
		// #ifdef H5
			uni.showToast({title: 'H5不支持直播推流', icon: 'error'});
		// #endif
		// #ifndef H5
		setTimeout(() => {
			this.context = uni.createLivePusherContext('livePusher', this);
			this.context.startPreview();
		}, 100);
		// 保持屏幕常亮 1.0.5升级
		uni.setKeepScreenOn({
			keepScreenOn: true
		});
		// #endif
		// 监听直播消息
		uni.$on('onLiveMessage', this.onMessage);
	},
	methods: {
		// 接受直播群组消息
		onMessage(msg) {
			this.$nextTick(() => {
				this.$refs.message.onMessage(msg);
			});
			if(this.liveData.liveid == msg.group){
				if(msg.message.type == 'publish'){ // 推流成功
					uni.hideLoading();
					clearTimeout(this.startTimer);
				}else if(msg.message.type == 'publish_done'){ // 中断
					// 如果不是手动关闭，自动恢复直播推流
					if (this.publish) {
						let intervalID = setInterval(() => {
							uni.showToast({
								title: '网络状态不佳',
								icon: 'error'
							});
							this.context.resume({
							    success: (a) => {
									clearInterval(intervalID);
							    }
							});
						}, 1500);
					}
				}else if(msg.message.type == 'ban'){ // 封禁
					//封禁直播跳转结束页
				}
				this.liveStatis.like = msg.like;
				this.liveStatis.online = msg.online;
			}
		},
		async sendLive(e) {
			switch (e.type) {
				case 'msg':
					await uni.request({
						url: '/wanlshop/live/send',
						data: {
							message: e.message,
							group: this.liveData.liveid
						}
					});
					break;
				case 'like':
					this.liveStatis.like += 1;
					await uni.request({
						url: '/wanlshop/live/like',
						data: {
							id: this.liveData.id
						}
					});
					break;
			}
		},
		// 监听页面是否卸载，只卸载已播放
		async pageUnload(){
			if (this.state == 1) {
				await uni.request({
					url: '/wanlshop/live/unload',
					data: { 
						group: this.liveData.liveid,
						type: 'rtmp'
					}
				});
			}
		},
		// 操作直播
		async handleLive(method, data = []) {
			// #ifdef H5
				uni.showToast({title: 'H5不支持直播推流', icon: 'error'});
			// #endif
			// #ifndef H5
			switch(method)
			{
				// 开始推流
				case 'start':
					uni.showLoading({
						title: '直播启动中'
					});
					// 定时器
					this.startTimer = setTimeout(() => {
						uni.hideLoading();
						this.handleLive('stop');
						uni.showToast({
							title: 'API直播回调超时',
							icon: 'error'
						});
						console.error('API直播回调超时：请检查、1.推流地址是否正确，2.直播是否回调到API服务器，3.检查IM是否正常启动');
					}, 10000);
					// 提交服务器
					await uni.request({
						url: '/wanlshop/live/startLive',
						method: 'POST',
						data: data,
						success: res => {
							// 储存返回详情
							this.liveData = res.data;
							this.state = 1;
							setTimeout(() => {
								this.context.start({
									success: e => this.startlive(e)
								});
							}, 100);
						}
					});
					break;
				// 停止推流
				case 'stop':
				    this.context.stop();
				    break;
				// 翻转相机
			    case 'switch':
			        this.context.switchCamera();
			        break;
				// 快照
				case 'snapshot':
					this.context.snapshot({
						success: (e) => {
							console.log(e);
							uni.showToast({
							    title: '截图成功'
							});
						}
					});
				    break;
				// 更改导航栏
				case 'user':
				    this.shopData = data;
				    break;
			    default:
			}
			// #endif
		},
		startlive(e){
			console.log('开启直播事件:' + JSON.stringify(e));
		},
		statechange(e) {
			console.log('状态变化事件:' + e.detail.message);
		},
		netstatus(e) {
			console.log('网络状态通知:' + JSON.stringify(e));
		},
		error(e) {
			console.error('渲染错误事件:' + JSON.stringify(e));
		}
	}
};
</script>

<style>
	@import '@/static/style/wanlnvue.css';
		
	/* 直播播放	 */
	.wanlive-pusher {
		position: fixed;
		z-index: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #0c0d2b;
	}
	
	/* 提示 */
	.wanlive-tip{
		position: fixed;
		z-index: 20;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	/* 导航栏 */
	.wanlive-header {
		position: fixed;
		z-index: 30;
		right: 0;
		left: 0;
	}
	
	/* 公告栏 */
	.wanlive-bulletin {
		position: fixed;
		z-index: 40;
	}

	/* 滚动消息 */
	.wanlive-message {
		position: fixed;
		z-index: 50;
		right: 0;
		left: 0;
	}
	
	/* 发送消息 */
	.wanlive-control {
		position: fixed;
		z-index: 60;
		right: 0;
		left: 0;
	}
</style>