MingGaoApp_vue/MingGaoApp/pages/response/video.nvue

<template>
	<view class="video_box" :style="'height:' +  phoneHeight + 'px'">
		<!-- 本地预览视图 -->
		<view class="video_me" v-show="allUserViewObjectList.length > 0">
		<!-- <view class="video_me" v-if="videoShow"> -->
			<zego-local-view :viewMode="publisherViewModeIndex"
				style="width: 150px; height: 200px; flex: 1; position: fixed; right: 0; top: 65px;">
			</zego-local-view>
		</view>

		<!-- 服务器传来的预览图 -->
		<view class="video_you" v-for="(item, index) in allUserViewObjectList" :key="item.streamID">
		<!-- <view class="video_you"> -->
			<zego-remote-view v-if="item.streamID" :streamID="item.streamID" :viewMode="item.viewMode"
				style="width: 620px; height: 600px; flex: 1;">
			</zego-remote-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 store from '@/store/index.js'; //需要引入store
	let App = getApp();
	// var API = App.globalData.socketTask;
	var API = App.globalData;
	
	import permision from "@/zego-express-video-uniapp/permission.js";
	import ZegoExpressEngine from '@/zego-express-video-uniapp/lib/ZegoExpressEngine';
	import {
		ZegoScenario,
		ZegoRoomState,
		ZegoUpdateType,
		// ZegoViewMode,
		ZegoVideoCodecID
	} 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) {
				var that = this
				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() {
				this.allStreamList.forEach((item) => {
					// this.notTensile(item.streamID); // 停止拉流
					item.muteAudio = !item.muteAudio;
					this.engine.mutePlayStreamAudio(item.streamID, item.muteAudio);
				})
				// // 停止推流
				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() {
				console.log('开始监听房间了啊')
				var that = this
				// console.log(this.allStreamList, '------------------')

				// 房间状态变化通知
				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) {
						console.log('进入了啊AAAAAAAAAA')
						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('进入了啊BBBBBBBBBBBBBBBBBBBBBBB')
					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);
						console.log(this.allStreamList, '-------------')
					} 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("playerQualityUpdate", (streamID, quality) => {
					console.log('拉流质量回调');
					console.log(streamID, quality);
					// if (this.videoShow == false) {
					// 	setTimeout(() => {
					// 		that.videoShow = true
					// 		console.log(that.videoShow, '要打开推流的视频窗口了啊')
					// 	}, 3500)
					// }
				});

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

			tensile(item) {
				console.log(this.allStreamList)
				console.log(item)
				console.log(this.allUserViewObjectList)
				this.engine.startPlayingStream(item.streamID)
			},

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

			// 推流 - 展示视图 - 本地视频流
			onPublish() {
				if (this.isPublishingStream) {
					// 停止推流
					this.engine.stopPreview();
					this.engine.stopPublishingStream();
				} else {
					console.log('开始推流了啊', this.isPublishingStream)
					// 开始推流
					this.engine.startPreview();
					
					// 设置编码格式
					// let videoConfig = {};
					// videoConfig.codecID = ZegoVideoCodecID.VP8;
					// this.engine.setVideoConfig(videoConfig);
					// 设置编码格式
					
					// this.engine.startPublishingStream(this.videoObj.room_id);
					console.log(this.userid)
					this.engine.startPublishingStream(this.userid);
					// this.videoShow = true
				}
				this.isPublishingStream = !this.isPublishingStream;
			},

			// 挂断退出
			async offVideo() {
				console.log('进入了啊')
				var that = this
				that.engine.logoutRoom(that.videoObj.room_id); // 退出房间
				that.$refs.uToast.show({
					type: 'default',
					message: '结束视频通话！',
				})
				setTimeout(() => {
					that.videoShow = true
					that.allStreamList = [];
					that.allUserViewObjectList = [];
					var obj = {}
					// obj = {
					// 	'action': 'read', // 动作标识，必填
					// 	'send_user_id': that.videoObj.user_id, // 接收人用户id， 非必填
					// 	'data': {}
					// }
					console.log('-----------接收人用户id-------------', that.videoObj.user_id, API)
					obj = {
						'action': 'list', // 动作标识，必填
						'type': '当前为挂断',
						'recv_user_id': that.videoObj.user_id, // 接收人用户id， 非必填
						'data': {}
					}
					API.socketTask.send({
						data: JSON.stringify(obj),
						async success(res) {
							console.log("消息发送成功");
						},
					});
					uni.navigateBack({
						delta: 1
					})
				}, 1500)
				// uni.redirectTo({
				// 	url: "/pages/response/index"
				// })

			},


			// 删除this.engine对象， 删除即构
			async destroyEngine() {
				this.engine = undefined;
				ZegoExpressEngine.destroyEngine();
			},
		},

		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; //窗口高度
				}
			});
		},
		async onShow() {
			await this.setup();
		},

		// 监听页面返回
		onBackPress() {
			console.log('返回了！')
			this.offVideo(); // 挂断退出
			this.destroyEngine(); // 删除this.engine对象，删除即构
		},

		// 页面卸载 - 生命周期
		onUnload() {
			this.destroyEngine();
			console.log('onUnload');
		},
	}
</script>

<style lang="scss">
	.video_box {
		background: #000;
		width: 1200rpx;
		position: relative;

		// .video_you {
		.video_me {
			background: #000;
			width: 150px;
			height: 200px;
			position: fixed;
			right: 0;
			top: 65px;
		}

		.video_you {
			background: #000;
			width: 620px;
			height: 600px;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.video_btn {
			position: fixed;
			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>