chunwan/pages/pipei/shipin/detail.nvue

<template>
	<view class="room" :style="{'width': winWidth+'px', 'height': winHeight+'px'}">
		<view class="room-hd">
			<zego-remote-view class="video-view" :style="{'width': winWidth+'px', 'height': winHeight+'px'}" :streamID="sellerStreamId"></zego-remote-view>
			<zego-local-view class="shitu"></zego-local-view>
		</view>
		
		<view class="room-fd" :style="{'width': winWidth+'px'}">
			<view class="item">
				<view class="pic">
					<image class="pimg" src="@/static/yuyin-01-on.png"></image>
				</view>
				<view class="txt"><text>开启</text></view>
			</view>
			<view class="item">
				<view class="pic">
					<image class="pimg" src="@/static/yuyin-02.png"></image>
				</view>
				<view class="txt"><text>开启</text></view>
			</view>
			<view class="item">
				<view class="pic">
					<image class="pimg" src="@/static/yuyin-03.png"></image>
				</view>
				<view class="txt"><text>开启</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'
	import permision from "@/js_sdk/wa-permission/permission.js"
	//导入 ZEGO Express SDK
	import ZegoExpressEngine from '@/uni_modules/zego-ZegoExpressUniApp-JS/components/zego-ZegoExpressUniApp-JS/lib/ZegoExpressEngine';
	import ZegoRemoteView from "@/uni_modules/zego-ZegoExpressUniApp-JS/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoRemoteView";
	import ZegoLocalView from "@/uni_modules/zego-ZegoExpressUniApp-JS/components/zego-ZegoExpressUniApp-JS/zego-view/ZegoLocalView";
	
	let roomConfig = {};
	roomConfig.isUserStatusNotify = true;
	const profile = {
		appID : 267111980,
		appSign: 'afcaa90a7750ee556e450ca62287c5f9a362e9ed711789717cda0e18f088858e',
		scenario : 0
	};
	export default {
		components: {
		    ZegoLocalView,
		    ZegoRemoteView,
		},
		data() {
			return {
				winWidth: 0,
				winHeight: 0,
				userInfo: {},
				playStreamId: "",
				title: "视频语音",
				background: {
					// 导航栏背景图
					background: 'url(https://api.lyiyuan.cn/profile/upload/static/yuyin-bg.png) center top no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: '100 auto',
				},
				engine: null,
				roomId: "",
				sellerStreamId: ""
			}
		},
		onLoad(o) {
			this.id = o.id;
			this.type=o.type;
			this.winWidth = uni.getSystemInfoSync().windowWidth;
			this.winHeight = uni.getSystemInfoSync().windowHeight;
		},
		mounted() {
		  this.toPermission();
		},
		methods: {
			async toPermission() {
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform === "android") {
				   const res = await permision.requestAndroidPermission(
				        "android.permission.RECORD_AUDIO"
				    );
				   const res1 =  await permision.requestAndroidPermission(
				        "android.permission.CAMERA"
				    );
					this.getUserInfo();
					return ;
				}
				// #endif
				this.getUserInfo();
			},
			//查询个人信息
			async getUserInfo() {
				const { code, data , msg} = await api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
				if(code == 200){
					console.log("getUserInfo",data)
					this.userInfo = data;
					this.loginRoom();
				}else{
					uni.showToast({
						title: msg,
						position: "bottom",
						icon: "none",
					})
				}
			},
			async loginRoom(){
				const that = this;
				const res = await api.findZegoToken({
					userId: uni.getStorageSync("userInfo").id,
					sellerId: this.id
				})
				if(res.code == 200){
					// 获取token传入
					roomConfig.token = res.data.token;
					this.playStreamId = res.data.userStreamId;
					this.sellerStreamId = res.data.userStreamId;
					this.roomId = res.data.roomId;
					console.log("loginRoom11",res.data)
					this.engine = await ZegoExpressEngine.createEngineWithProfile(profile);
					this.engine.enableCamera(this.type == 1?true:false)
					this.engine.enableEffectsBeauty(true);
				
					// 创建美颜参数对象
					let beautyParam = {};
					// 美白、红润、磨皮、锐化
					beautyParam.whitenIntensity = this.userInfo.reserved5;
					beautyParam.rosyIntensity = this.userInfo.reserved6;
					beautyParam.smoothIntensity = this.userInfo.reserved7;
					beautyParam.sharpenIntensity = this.userInfo.reserved8;
					// 设置美颜参数 
					this.engine.setEffectsBeautyParam(beautyParam);
					this.engine.useFrontCamera(true)
					// 以下为常用的房间相关回调
					this.engine.on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
						console.log("roomStateUpdate",roomID)
					  // 房间状态更新回调，登录房间后，当房间连接状态发生变更（如出现房间断开，登录认证失败等情况），SDK会通过该回调通知
					}); ;
					
					this.engine.on('roomUserUpdate', (roomID, updateType, userList) => {
					  // 用户状态更新，登录房间后，当房间内有用户新增或删除时，SDK会通过该回调通知
						console.log("roomUserUpdate",roomID,userList)
					});
					
					this.engine.on('playerStateUpdate', (roomID, updateType, streamList) => {
						console.log("playerStateUpdate",roomID)
					  // 调用拉流接口成功后，当拉流器状态发生变更，如出现网络中断导致推流异常等情况，SDK在重试拉流的同时，会通过该回调通知
					});
					this.engine.on('roomStreamUpdate', (roomID, updateType, streamList) => {
						console.log("playerStateUpdate",streamList)
					  // 流状态更新，登录房间后，当房间内有用户新推送或删除音视频流时，SDK会通过该回调通知
						// this.sellerStreamId = streamList[0].streamID;
					});
					// 调用推流接口成功后，当推流器状态发生变更，如出现网络中断导致推流异常等情况，SDK在重试推流的同时，会通过该回调通知
					that.engine.on('publisherStateUpdate', (streamID, state, errorCode, extendedData) => {
						console.log("publisherStateUpdate",streamID)
						
					});
					// 登录房间
					// 开始登录房间
					this.engine.loginRoom(res.data.roomId, 
						{
							'userID': uni.getStorageSync("userInfo").id, 
							'userName': uni.getStorageSync("userInfo").nickname
						}, 
						roomConfig
					);
					this.engine.startPreview();
					this.engine.startPublishingStream(this.playStreamId);
					setTimeout(()=>{
						this.toTuiliu()
					},100)
				}
			},
			toTuiliu() {
				const that = this;
				console.log(this.sellerStreamId)
				that.engine.startPlayingStream(this.sellerStreamId);
				ZegoExpressEngine.instance().on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {
				    /** 调用拉流接口成功后，当拉流器状态发生变更，如出现网络中断导致推流异常等情况，SDK在重试拉流的同时，会通过该回调通知 */
					
						console.log("playerStateUpdate",roomID)
				 });
			}
		},
		onBackPress() {
			uni.sendSocketMessage({data:JSON.stringify({
				"userId": uni.getStorageSync("userInfo").id,
				type: 11,
				"topic":"message"
			})})
			/** 停止推流 */
			this.engine?.stopPublishingStream();
			/** 停止本地预览 */
			this.engine?.stopPreview();
			/** 停止拉流 */
			this.engine?.stopPlayingStream(this.sellerStreamId);
			/** 退出房间 */
			this.engine?.logoutRoom(this.roomId);
		}
	}
</script>

<style lang="scss">
.room{
 &-hd{
	 flex-direction: column;
	 position: relative;
	.shitu{
		width: 300rpx;
		height: 300rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: fixed;
		right: 20rpx;
		top: 150rpx;
		z-index: 1222;
	}
 }
 &-fd{
 		height: 220rpx;
 		position: fixed;
 		left: 0;
 		bottom: 40rpx;
 		z-index: 44;
 		flex-direction: row;
 		.item{
 			flex: 1;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			display: flex;
			justify-content: center;
			align-items: center;
			.txt{
				margin-top: 20rpx;
				text{
					font-size: 30rpx;
					color: #ffffff;
				}
			}
			.pic{
				width: 130rpx;
				height: 130rpx;
				background-color: rgba(0, 0, 0,0.36);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				margin-bottom: 10rpx;
				.pimg{
					width: 130rpx;
					height: 130rpx;
				}
				
			}
 		}
 	}
}
</style>