Vue3项目接入萤石云及初始化多个播放器

前期准备工作

注册萤石云开放平台账号，https://open.ys7.com/cn/s/index

设备要支持萤石云或者海康威视协议，也就是这俩个牌子的设备

接下来正式开始接入：

• 安装官方视频解析工具
• 导入项目初始化播放器

pnpm install ezuikit-js

import EZUIKit from ‘ezuikit-js’

完整代码如下：

<!-- 视频监控 -->
<template>
	<div class="video">
		<div class="video-item">
			<div class="item">
				<div class="home" ref="viewtools">
					<div id="video-container1"></div>
				</div>
			</div>
			<div class="item">
				<div class="home" ref="viewtoolTwo">
					<div id="video-container2"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import EZUIKit from "ezuikit-js";
let ezvizPlayOne = ref(null);
let ezvizPlayTwo = ref(null);
let viewtools = ref();
let viewtoolTwo = ref();
function autoVideoOne(params) {
    // 获取父节点的宽高
	let divW = viewtools.value.clientWidth
	let divH = viewtools.value.clientHeight
	if (ezvizPlayOne.value !== null) {
		return;
	}
	//获取萤石token
	ezvizPlayOne.value = new EZUIKit.EZUIKitPlayer({
		autoplay: true,  // 默认播放
		//视频播放包裹元素
		id: "video-container1",
		//萤石token
		accessToken: "at.b5a0ocvra1035des5cmq1f6h0yvc3soe-4qqvr8a044-16tx7jj-qndmey3xw",
		// ezopen://open.ys7.com/${设备序列号}/{通道号}.live
		url: "ezopen://open.ys7.com/D03798715/1.hd.live", // 播放地址
		template: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
		// header: ['capturePicture', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
		plugin: ['talk'], // 加载插件，talk-对讲
		// 视频下方底部控件
		footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
		footer: ['talk', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
		audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
		// openSoundCallBack: data => console.log("开启声音回调", data),
		// closeSoundCallBack: data => console.log("关闭声音回调", data),
		// startSaveCallBack: data => console.log("开始录像回调", data),
		// stopSaveCallBack: data => console.log("录像回调", data),
		// capturePictureCallBack: data => console.log("截图成功回调", data),
		// fullScreenCallBack: data => console.log("全屏回调", data),
		// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
		width: divW,
		height: divH
	})
}
function autoVideoTwo(params) {
	let divW = viewtoolTwo.value.clientWidth
	let divH = viewtoolTwo.value.clientHeight
	if (ezvizPlayTwo.value !== null) {
		return;
	}
	//获取萤石token
	ezvizPlayTwo.value = new EZUIKit.EZUIKitPlayer({
		autoplay: true,  // 默认播放
		//视频播放包裹元素
		id: "video-container2",
		//萤石token
		accessToken: "at.b5a0ocvra1035des5cmq1f6h0yvc3soe-4qqvr8a044-16tx7jj-qndmey3xw",
		// ezopen://open.ys7.com/${设备序列号}/{通道号}.live
		url: "ezopen://open.ys7.com/D35970858/1.hd.live", // 播放地址
		template: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
		// header: ['capturePicture', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
		plugin: ['talk'], // 加载插件，talk-对讲
		// 视频下方底部控件
		footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
		footer: ['talk', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
		audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
		// openSoundCallBack: data => console.log("开启声音回调", data),
		// closeSoundCallBack: data => console.log("关闭声音回调", data),
		// startSaveCallBack: data => console.log("开始录像回调", data),
		// stopSaveCallBack: data => console.log("录像回调", data),
		// capturePictureCallBack: data => console.log("截图成功回调", data),
		// fullScreenCallBack: data => console.log("全屏回调", data),
		// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
		width: divW,
		height: divH
	})
}
onMounted(() => {
	autoVideoOne();
	autoVideoTwo();
})

</script>
<style lang="scss" scoped>
.video {
	width: 100%;
	height: 80%;

	.video-item {
		display: flex;
		padding: 1%;

		.item {
			flex: 1;
			height: 40vh;
			margin: 0 1%;

			.home {
				width: 100%;
				height: 100%;
			}

		}
	}
}
</style>