MingGaoApp_vue/MingGaoApp/pages/response/video.nvue

<template>
	<view class="video_box" :style="'height:' +  phoneHeight + 'px'">
		<!-- 本地预览视图 -->
		<view class="video_me" v-if="allUserViewObjectList.length > 0" v-for="(item, index) in allUserViewObjectList" :key="item.userID" :style="'height:' +  phoneHeight + 'px'">
			<!-- <zego-local-view v-if="videoShow" :viewMode="publisherViewModeIndex"
				style="width: 100%; flex: 1; border: 1px solid #0000; z-index: 20">
			</zego-local-view> -->
			
			<!-- 服务器拉流的视图 -->
			<zego-remote-view v-if="item.streamID" :streamID="item.streamID" :viewMode="item.viewMode"
				style="width: 100%; flex: 1; border: 1px solid #0000; z-index: 20">
			</zego-remote-view>
		</view>

		<!-- 服务器传来的预览图 -->
		<view class="video_you" v-if="allUserViewObjectList.length > 0">
			<!-- <zego-remote-view v-if="item.streamID" :streamID="item.streamID" :viewMode="item.viewMode"
				style="height: 403.84rpx; flex: 1;">
			</zego-remote-view> -->
			
			<!-- 本地视图 -->
			<zego-local-view v-if="videoShow" :viewMode="publisherViewModeIndex"
				style="height: 403.84rpx; flex: 1; z-index: 200">
			</zego-local-view>
		</view>

		<view class="video_btn">
			<view class="video_imgList">
				<view class="video_imgList1">
					<view class="video_view" @click="turn">
						<image class="video_view_img" src="../../static/image/9.png" mode=""></image>
					</view>
					<text class="video_view_txt">翻转镜头</text>
				</view>
				<view class="video_imgList2" v-if="CameraShow">
					<view class="video_view" @click="closeCamera">
						<image class="video_view_img" src="../../static/image/11.png" mode=""></image>
					</view>
					<text class="video_view_txt" style="margin: 0 0 0 30rpx;">静音</text>
				</view>
				
				<view class="video_imgList2" v-else>
					<view class="video_view" @click="openCamera">
						<image class="video_view_img" src="../../static/image/12.png" mode=""></image>
					</view>
					<text class="video_view_txt" style="margin: 0 0 0 30rpx;">开启</text>
				</view>
			</view>

			<image @click="offVideo()" style="width: 50px; height: 50px; margin: 0 0 0 330rpx;"
				src="../../static/image/10.png" mode=""></image>
		</view>

		<!-- 消息提醒 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import permision from "@/zego-express-video-uniapp/permission.js";
	import ZegoExpressEngine from '@/zego-express-video-uniapp/lib/ZegoExpressEngine';
	import {
		ZegoScenario,
		ZegoRoomState,
		ZegoUpdateType,
		// ZegoViewMode
	} from '@/zego-express-video-uniapp/lib/ZegoExpressDefines'
	import {
		AppID,
		AppSign
	} from '@/zego-express-video-uniapp/KeyCenter.js'
	import ZegoLocalView from '@/zego-express-video-uniapp/zego-view/ZegoLocalView';
	import ZegoRemoteView from '@/zego-express-video-uniapp/zego-view/ZegoRemoteView';
	export default {
		data() {
			return {
				phoneHeight: '', // 获取当前的屏幕高度

				// 即构
				publisherViewModeIndex: 0, // 本地预览图
				viewModeA: 0, // 服务器预览图
				serveViewModeIndex: "", // 服务器拉流预览图
				engine: undefined,
				videoObj: null,
				userid: "Uni" + Math.floor(Math.random() * 1000000).toString(),
				isPublishingStream: false,
				shotShow: false, // 翻转镜头
				videoShow: false, // 切换视频显示
				
				allStreamList: [],
				allUserViewObjectList: [],
				
				CameraShow: true, // 镜头开启关闭
			}
		},
		components: {
			ZegoLocalView: ZegoLocalView,
			ZegoRemoteView: ZegoRemoteView
		},
		
		watch: {
			allUserViewObjectList(val) {
				if (val.length > 0) {
					val.forEach((item) => {
						if (item.streamID) {
							this.tensile(item)
							return true
						}
					})
				}
			}
		},
		
		methods: {
			// 即构 - 视频通话 初始化
			async setup() {
				var that = this
				// 创建引擎
				let profile = {
					appID: AppID,
					appSign: AppSign,
					scenario: ZegoScenario.General
				}
				this.engine = await ZegoExpressEngine.createEngineWithProfile(profile);
				this.engine.useFrontCamera(this.shotShow); // 设置前后摄像头
				// console.log(this.engine)
				this.addListeners();
				// console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + that.videoObj.room_id)
				this.engine.loginRoom(that.videoObj.room_id, {
					userID: that.videoObj.room_id,
					userName: that.videoObj.room_id
				}, {
					isUserStatusNotify: true
				});
			},

			// 即构 - 翻转镜头
			turn() {
				this.shotShow = !this.shotShow
				this.engine.useFrontCamera(this.shotShow)
			},
			
			// 即构 - 关闭镜头 - 停止拉流 、推流
			closeCamera() {
				console.log('关闭摄像头')
				this.allStreamList.forEach((item) => {
					// this.notTensile(item.streamID); // 停止拉流
					item.muteAudio = !item.muteAudio;
					this.engine.mutePlayStreamAudio(item.streamID, item.muteAudio);
				})
				// // 停止推流
				// this.engine.stopPreview();
				// this.engine.stopPublishingStream();
				this.CameraShow = false
			},
			// 即构 - 开启镜头 - 开启拉流、推流
			openCamera() {
				console.log('开启摄像头')
				this.allStreamList.forEach((item) => {
					// this.engine.startPlayingStream(item.streamID); // 开始拉流
					item.muteAudio = !item.muteAudio;
					this.engine.mutePlayStreamAudio(item.streamID, item.muteAudio);
				})
				// // 开始推流
				// this.engine.startPreview();
				// this.engine.startPublishingStream(this.videoObj.room_id);
				this.CameraShow = true
			},

			// 切换视频显示
			changeShow() {
				this.videoShow = !this.videoShow
				// this.onPublish()
				this.engine.startPreview();
				this.engine.startPublishingStream(this.videoObj.room_id);
				this.publishBtnName = "Stop Publishing";
				console.log(this.videoShow)
			},

			// 即构 - 视频通话 监听房间
			addListeners() {
				// 房间状态变化通知
				this.engine.on("roomStateUpdate", (roomID, state, errorCode, extendedData) => {
					// console.log('房间状态变化')
					if (state == "CONNECTED") {
						// 与房间连接成功，只有当房间状态是连接成功时，才能进行推流、拉流等操作。
						// 接下来的“预览并推流”的代码写在这里
						console.log("房间连接成功");
					}
					if (state == "DISCONNECTED") {
						// 与房间断开了连接
						console.log("与房间断开连接");
					}

					if (state == "CONNECTING") {
						// 与房间尝试连接中
						console.log("与房间尝试连接中");
					}
				});

				// 房间用户变化通知
				this.engine.on("roomUserUpdate", (roomID, updateType, userList) => {
					console.log(updateType)
					console.log(userList)
					console.log("有其他用户进出房间");
					if (updateType == ZegoUpdateType.Add) {
						for (let user of userList) {
							for (let stream of this.allStreamList) {
								if (user.userID == stream.user.userID) {
									user.streamID = stream.streamID;
								}
							}
							this.allUserViewObjectList.push(user);
						}
					} else if (updateType == ZegoUpdateType.Delete) {
						this.allUserViewObjectList = this.allUserViewObjectList.filter((object) => {
							for (let user of userList) {
								if (user.userID == object.userID) {
									return false;
								}
							}
							return true;
						});
					}

					if (updateType == "1") {
						// 有其他用户退出房间
						this.offVideo()
					}
				});

				// 房间内其他用户推的流变化通知
				this.engine.on("roomStreamUpdate", (roomID, updateType, streamList) => {
					// if (updateType == "0") {
					// 	// 流新增，开始拉流
					// 	this.tensile(streamList[0].streamID)
					// } else if (updateType == "1") {
					// 	// 流删除，停止拉流
					// 	this.notTensile(streamList[0].streamID);
					// }
					
					console.log('---------updateType-----------', updateType)
					console.log('---------streamList-----------', streamList)
					console.log('---------ZegoUpdateType-----------', ZegoUpdateType)
					console.log('---------ZegoUpdateType.Add-----------', ZegoUpdateType.Add)
					console.log('---------ZegoUpdateType.Delete-----------', ZegoUpdateType.Delete)
					console.log('---------allUserViewObjectList-----------', this.allUserViewObjectList)
					
					if (updateType == ZegoUpdateType.Add) {
						for (let object of this.allUserViewObjectList) {
							for (let stream of streamList) {
								if (object.userID == stream.user.userID) {
									object.streamID = stream.streamID;
								}
							}
						}
						this.allStreamList = this.allStreamList.concat(streamList);
					} else if (updateType == ZegoUpdateType.Delete) {
						for (let object of this.allUserViewObjectList) {
							for (let stream of streamList) {
								if (object.streamID == stream.streamID) {
									object.streamID = undefined;
								}
							}
						}
						this.allStreamList = this.allStreamList.filter((object) => {
							for (let stream of streamList) {
								if (object.streamID == stream.streamID) {
									return false;
								}
							}
							return true;
						});
					}
				});

				// 房间内在线用户数量回调
				// this.engine.on("roomOnlineUserCountUpdate", (roomID, count) => {
				// 	// console.log(roomID)	
				// 	console.log(count)
				// 	console.log('>?>>>>>>>>>>>>>>>>>>>>>>>在线用户有变化')
				// });

				// 拉流质量回调
				this.engine.on("playerQualityUpdate", (streamID, quality) => {
					console.log('拉流质量回调')
				});

				// 拉流后的事件回调
				this.engine.on("playerStateUpdate", (streamID, state, errorCode, extendedData) => {
					console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>' + '拉流后的事件触发了')
				})
			},

			// 拉流 
			// tensile(roomId) {
			// 	console.log('拉流进入了啊')
			// 	console.log(roomId)
			// 	this.serveViewModeIndex = roomId
			// 	console.log(this.serveViewModeIndex)
			// 	this.engine.startPlayingStream(roomId);
			// },
			
			tensile(item) {
				console.log(this.allStreamList)
				console.log(item)
				console.log(this.allUserViewObjectList)
				this.engine.startPlayingStream(item.streamID)
			},

			// 停止拉流
			notTensile(roomId) {
				// console.log(roomId)
				this.serveViewModeIndex = roomId
				// console.log(this.serveViewModeIndex)
				this.engine.stopPlayingStream(roomId)
			},

			// 推流 - 展示视图 - 本地视频流
			onPublish() {
				// 设置视频配置
				// ZegoExpressEngine.instance().setVideoConfig(this.videoObj.room_id);

				if (this.isPublishingStream) {
					// 停止推流
					this.engine.stopPreview();
					this.engine.stopPublishingStream();
				} else {
					console.log('开始推流了啊', this.isPublishingStream)
					// 开始推流
					this.engine.startPreview();
					this.engine.startPublishingStream(this.videoObj.room_id);
					this.videoShow = true
				}
				this.isPublishingStream = !this.isPublishingStream;
			},

			// 挂断退出
			offVideo() {
				console.log('进入了啊')
				this.engine.logoutRoom(this.videoObj.room_id)
				this.$refs.uToast.show({
					type: 'default',
					message: '结束视频通话！',
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
				// uni.redirectTo({
				// 	url: "/pages/response/index"
				// })

			},
		},

		async onLoad(optinos) {
			var that = this
			that.videoObj = JSON.parse(optinos.videoObj)
			// console.log(that.videoObj)
			// 即构 - 视频通话
			// 获取系统信息同步接口
			if (uni.getSystemInfoSync().platform === 'android') {
				await permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
				await permision.requestAndroidPermission('android.permission.CAMERA');
			}
			await this.setup()
			this.onPublish(); // 推流
			uni.getSystemInfo({ //异步获取。
				success(res) {
					// that.phoneHeight = res.windowHeight - 13; //窗口高度
					that.phoneHeight = res.windowHeight; //窗口高度
				}
			});
		},

		// 监听页面返回
		onBackPress() {
			console.log('返回了！')
		},
	}
</script>

<style lang="scss">
	.video_box {
		background: #000;

		.video_you {
			border: 1px solid;
			background: #fff;
			width: 150px;
			height: 200px;
			position: absolute;
			right: 10px;
			top: 10px;
			overflow: hidden;
		}

		.video_me {
			z-index: 100;
			background: #000;
			position: relative;
			right: 0;
			top: 0;
		}

		.video_btn {
			position: absolute;
			bottom: 35rpx;
			left: 0;
			width: 750rpx;

			.video_imgList {
				display: flex;
				flex-direction: row;
				justify-content: space-around;

				// 翻转
				.video_imgList1 {
					.video_view {
						background: rgba(0, 0, 0, .5);
						border-radius: 50px;
						width: 50px;
						height: 50px;
						margin: 0 auto;

						.video_view_img {
							height: 25px;
							width: 25px;
							margin: 24rpx 0 0 25rpx;
						}
					}

					.video_view_txt {
						color: #fff;
						font-size: 14px;
						line-height: 30px;
						text-align: center;
					}
				}

				// 语音通话
				.video_imgList2 {
					.video_view {
						background: rgba(0, 0, 0, .5);
						border-radius: 50px;
						width: 50px;
						height: 50px;
						margin: 0 0 0 30rpx;

						.video_view_img {
							height: 25px;
							width: 25px;
							margin: 24rpx 0 0 25rpx;
						}
					}

					.video_view_txt {
						color: #fff;
						font-size: 14px;
						line-height: 30px;
						text-align: center;
					}
				}
			}
		}
	}
</style>