zhgdlarge/src/views/sevenLargeScreen/videoManagement/index.vue

<template>
	<div class="videoManage">
		<div class="left">
			<div class="videoListBig">
				<div class="title"><i>监控设备列表</i></div>
				<el-scrollbar style="height: 100%">
					<div class="content">
						<div class="decivList">
							<div
								class="menuDev"
								v-for="item in shipinList"
								:key="item.id"
								:class="item.deviceState == 1 ? 'online' : 'offline'"
								@click="checkVideo(item)"
							>
								<div class="decName">
									<span style="white-space: nowrap"> {{ item.videoName }}</span>
								</div>
								<div class="status">{{ item.deviceState == 1 ? "在线" : "离线" }}</div>
							</div>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</div>
		<div class="right">
			<div class="videoPlayerBig">
				<div class="title"><i>视频监控</i></div>
				<div class="content">
					<div ref="playWndBox" style="width: 100%; height: 100%">
						<div
							id="playWnd"
							class="playWnd"
							:style="{
								height: playWndHeight + 'px',
								width: playWndWidth + 'px'
							}"
						></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, getCurrentInstance, nextTick, Ref } from "vue";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import { selectProjectVideoListApi} from "@/api/modules/video";
let shipinList = ref([] as any);
const store = GlobalStore();
const playWndBox = ref(null);
let playWndHeight = ref("");
let playWndWidth = ref("");
let pubKey = ref("");
let initCount = ref(0);
let oWebControl = ref(null);
let cameraIndexCode = ref<Array<string>>([]);
let objData = ref({
	appkey: "23914849", //海康提供的appkey
	ip: "221.12.137.200", //海康提供的ip
	secret: "UV4xyujBtOGA4D0kvXG7", //海康提供的secret
	port: 444,
	playMode: 0, // 0 预览 1回放
	layout: "2x2" //页面展示的模块数【16】
});

//设备列表的点击操作
const checkVideo = async (item: any) => {
	cameraIndexCode.value = item.serialNumber;
	previewVideo(cameraIndexCode.value);
};
//获取视频列表
const getVideoList = async () => {
	const res = await selectProjectVideoListApi({
		projectSn: store.sn
	});
	shipinList.value = res.result.videoList[0].list;
	objData.value.appkey = res.result.videoList[0].list[0].appId;
	objData.value.ip = res.result.videoList[0].list[0].account;
	objData.value.secret = res.result.videoList[0].list[0].appSecret;
	objData.value.port = res.result.videoList[0].list[0].password;
	cameraIndexCode.value = res.result.videoList[0].list[0].serialNumber;
	console.log("视频列表", res);
	previewVideo(res.result.videoList[0].list[0].serialNumber);
};
onMounted(async () => {
	setTimeout(() => {
		getVideoList();
	}, 1500);
	// 获取页面的实例对象 ee
	const pageInstance = getCurrentInstance();
	// 获取dom节点对象
	const tagDomObj = pageInstance?.refs.playWndBox;
	playWndHeight.value = tagDomObj?.clientHeight;
	playWndWidth.value = tagDomObj?.clientWidth;

	// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
	window.addEventListener("scroll", () => {
		if (oWebControl.value == undefined) {
			oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
		}
	});

	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
	window.addEventListener("resize", e => {
		if (oWebControl.value == undefined) {
			// console.log("wwwww", e);

			oWebControl.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
			// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
			// setWndCover();
		}
	});

	// 初始化播放器插件
	nextTick(async() => {
		await initPlugin();
	});
});

onBeforeUnmount(() => {
	if (oWebControl.value === undefined) {
		// 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
		oWebControl.JS_HideWnd();
		// 销毁当前播放的视频
		oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
		// 断开与插件服务连接
		oWebControl.JS_Disconnect();
	}
});

const initPlugin = () => {
	oWebControl = new WebControl({
		szPluginContainer: "playWnd", // 指定容器id
		iServicePortStart: 15900, // 指定起止端口号，建议使用该值
		iServicePortEnd: 15900,
		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
		cbConnectSuccess: () => {
			// 创建WebControl实例成功
			oWebControl
				.JS_StartService("window", {
					// WebControl实例创建成功后需要启动服务
					// 值"./VideoPluginConnect.dll"写死
					dllPath: "./VideoPluginConnect.dll"
				})
				.then(
					function () {
						// 设置消息回调
						oWebControl.JS_SetWindowControlCallback({
							// cbIntegrationCallBack: cbIntegrationCallBack,
						});
						//JS_CreateWnd创建视频播放窗口，宽高可设定
						oWebControl
							.JS_CreateWnd("playWnd", 1000, 600, { bEmbed: true }) //这一部分很重要，两个参数为你盒子的宽高，这样是写死是防止组件加载之前出现白屏；bEmbed: true 防止窗口闪烁
							.then(function () {
								// 创建播放实例成功后初始化
								init();
							});
					},
					function () {
						// 启动插件服务失败
					}
				);
		},
		// 创建WebControl实例失败
		cbConnectError: function () {
			// 这里写创建WebControl实例失败时的处理步骤,下面的代码仅做参看，具体实现步骤根据个人需求进行编写！！！！！！！！
			// console.log(0);
			// oWebControl.value = null;
			console.log(oWebControl.value);
			// 程序未启动时执行error函数，采用wakeup来启动程序
			window.WebControl.JS_WakeUp("VideoWebPlugin://");
			initCount.value++;
			if (initCount.value < 3) {
				setTimeout(function () {
					initPlugin();
				}, 3000);
			}
			// else {
			// 	setTimeout(function () {
			// 		setTimeout(function () {
			// 			router.push("/home");
			// 		}, 4000);
			// 	}, 4000);
			// }
			if (initCount.value < 2) {
				oWebControl.value = null;
				ElMessage.warning("插件未启动，正在尝试启动，请稍候...");
				// 程序未启动时执行error函数，采用wakeup来启动程序
				window.WebControl.JS_WakeUp("VideoWebPlugin://");
				setTimeout(() => {
					initPlugin();
				}, 3000);
				initCount.value++;
			}
			//  else {
			// 	window.location.href = this.videoWebPluginUrl;
			// }
			// console.log(oWebControl.value);
		},
		cbConnectClose: () => {
			// 异常断开：bNormalClose = false
			// JS_Disconnect正常断开：bNormalClose = true
			// console.log("cbConnectClose");
			oWebControl.value = null;
		}
	});
	// oWebControl.JS_CuttingPartWindow(500, 500, 500, 500);
};

// 初始化
const init = (callback: (() => void) | undefined) => {
	getPubKey(() => {
		let appkey = objData.value.appkey; //综合安防管理平台提供的appkey，必填
		let secret = setEncrypt(objData.value.secret); //综合安防管理平台提供的secret，必填
		let ip = objData.value.ip; //综合安防管理平台IP地址，必填
		let playMode = objData.value.playMode; //初始播放模式：0-预览，1-回放
		let port = objData.value.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
		let snapDir = "D:\\SnapDir"; //抓图存储路径
		let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
		let layout = objData.value.layout; //playMode指定模式的布局
		let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
		let encryptedFields = "secret"; //加密字段，默认加密领域为secret
		let showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
		let showSmart = 0; //是否显示移动框线框，0-不显示，非0-显示
		let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
		// var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
		oWebControl
			?.JS_RequestInterface({
				funcName: "init",
				argument: JSON.stringify({
					appkey: appkey, //API网关提供的appkey
					secret: secret, //API网关提供的secret
					// ip: ip + ":" + port, //API网关IP地址
					ip: ip, //API网关IP地址
					playMode: playMode, //播放模式（决定显示预览还是回放界面）
					port: port, //端口
					snapDir: snapDir, //抓图存储路径
					videoDir: videoDir, //紧急录像或录像剪辑存储路径
					layout: layout, //布局
					enableHTTPS: enableHTTPS, //是否启用HTTPS协议
					encryptedFields: encryptedFields, //加密字段
					showToolbar: showToolbar, //是否显示工具栏
					showSmart: showSmart, //是否显示智能信息
					buttonIDs //自定义工具条按钮
				})
			})
			.then(function (oData: any) {
				oWebControl.JS_Resize(playWndWidth.value, playWndHeight.value); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题

				if (callback) {
					callback();
				}
				// 隐藏
				// oWebControl.JS_HideWnd()
			});
	});
};

// RSA 加密
let setEncrypt = (value: string) => {
	let encrypt = new window.JSEncrypt();
	encrypt.setPublicKey(pubKey);
	return encrypt.encrypt(value);
};
// 获取公钥
const getPubKey = (callback: { (): void; (): void }) => {
	oWebControl
		.JS_RequestInterface({
			funcName: "getRSAPubKey",
			argument: JSON.stringify({
				keyLength: 1024
			})
		})
		.then(function (oData: { responseMsg: { data: Ref<string> } }) {
			if (oData.responseMsg.data) {
				pubKey = oData.responseMsg.data;
				callback();
			}
		});
};

// 调用这个函数可进行视频播放
// 视频预览功能
const previewVideo = (data: string | null) => {
	let cameraIndexCode = data; // 获取输入的监控点编号值，必填
	let streamMode = 0; // 主子码流标识：0-主码流，1-子码流
	let transMode = 1; // 传输协议：0-UDP，1-TCP
	let gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
	let wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）

	oWebControl
		.JS_RequestInterface({
			funcName: "startPreview",
			argument: JSON.stringify({
				cameraIndexCode: cameraIndexCode, // 监控点编号
				streamMode: streamMode, // 主子码流标识
				transMode: transMode, // 传输协议
				gpuMode: gpuMode, // 是否开启GPU硬解
				wndId: wndId // 可指定播放窗口
			})
		})
		.then(function () {
			oWebControl.JS_SetWindowControlCallback({});
		});
};
</script>

<style lang="scss" scoped>
.videoManage {
	width: 100%;
	height: 100%;
	display: flex;
	.left {
		width: 17%;
		height: 100%;
		// background: pink;
		.videoListBig {
			width: 100%;
			height: 100%;
			margin-top: 15%;
			.title {
				position: fixed;
				top: 12%;
				height: 5%;
				line-height: 45px;
				text-align: left;
				font-size: calc(100vw * 18 / 1920);
				color: #ffffff;
				background: url("@/assets/images/titleImg.webp") no-repeat;
				background-size: 150% 100%;
				i {
					margin-left: 50px;
					font-family: OPPOSansH;
				}
			}
			.content {
				height: 800px;
				width: 100%;
				margin-top: 10px;
				background: url("@/assets/images/cardImg.png") no-repeat;
				background-size: 100% 100%;
				color: #fff;
				display: flex;
				font-size: calc(100vw * 14 / 1920);
			}
		}
		.decivList {
			width: 100%;
			height: 70%;
			.menuDev {
				height: 6%;
				background: url("@/assets/images/dustNoise/listImg.png") no-repeat;
				background-size: 100% 100%;
				color: #fff;
				display: flex;
				line-height: 35px;
				font-size: calc(100vw * 14 / 1920);
				margin: 2% 3%;
				cursor: pointer;
				.decName {
					width: 30%;
					span {
						margin-left: 10%;
					}
				}
				.status {
					margin-left: 56%;
				}
			}
			.menuDev:hover {
				height: 6%;
				background: url("@/assets/images/dustNoise/devImg.png") no-repeat;
				background-size: 100% 100%;
			}
		}
		.online {
			.status {
				color: #65d7f9;
			}
		}
		.offline {
			.status {
				color: #ec6266;
			}
		}
	}
	.right {
		margin-left: 1%;
		width: 83%;
		height: 100%;
		.videoPlayerBig {
			width: 100%;
			height: 100%;
			.title {
				height: 5%;
				line-height: 35px;
				text-align: left;
				font-size: calc(100vw * 18 / 1920);
				color: #ffffff;
				background: url("@/assets/images/larborManagement/videoPlayer.webp") no-repeat;
				background-size: 100% 100%;
				i {
					margin-left: 50px;
					font-family: OPPOSansH;
				}
			}
			.content {
				height: 95%;
				width: 100%;
				margin-top: 10px;
				.main {
					border-radius: 8px;
					flex: 1;
					height: 80vh;
				}
			}
		}
	}
}
</style>