uni-app + Vue3 + EZUIKit.js 播放视频流

EZUIKit.js 是萤石云（ Ezviz ）推出的轻量级 JavaScript 视频播放库，主要用于在网页中嵌入实时视频流播放功能，支持 RTSP 、 RTMP 、 HLS等主流视频流协议。 ‌12

主要功能

‌低延迟预览‌：提供实时视频流播放功能，支持云存储回放和SD卡回放。 ‌34
‌多协议支持‌：兼容PC端和移动端浏览器，支持主流视频流协议。 ‌23
‌API扩展‌：提供播放控制、音频控制、视频截图等丰富API，便于开发者自定义集成。 ‌34

应用场景

适用于安防监控、智能家居等需要实时视频交互的场景，可快速对接摄像头或其他智能设备。

将 ezuikit.js 放到static目录下(需要 ezuikit.js 文件私信我(文件太大放不进来))

在 components 目录下创建 videoPage.vue 文件,展示视频列表页面

html 复制代码

<template>
	<view class="container">
		<view class="video-grid">
			<view v-for="(item, index) in props.videoData" :key="index" class="video-item">
				<view class="video-content" @click="openVideoPlayBack(item)">
					<img class="imgbox" src="/static/images/camera.png" alt="" />
				</view>
				<view class="video-title">{{ item.cameraName }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const props = defineProps({
		videoData: {
			type: Array,
			default: [{
				cameraName: "南门",
				url: "ezopen://open.ys7.com/FW2963484/1.hd.live"
			}]
		},
		accessToken: {
			type: String,
			default: ""
		}
	})
	
	function openVideoPlayBack(item) {
		uni.navigateTo({
				url: `/pages/videoPlaybaack/videoPlaybaack?url=${item.url}&accessToken=${props.accessToken}`
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;

		.video-grid {
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: space-between;
		    gap: 10px;
		 
		    .video-item {
		      width: calc(50% - 5px);
		      margin-bottom: 10px;
		      box-sizing: border-box;
		 
		      .video-content {
				  width: 160px;
				  height: 120px; // 固定视频高度
				  border-radius: 8px;
				  overflow: hidden; // 防止视频溢出圆角
				  background-color: #333;
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  .imgbox {
					  width: 50px;
					  height: 50px;
				  }
		      }
		 
		      .video-title {
		        text-align: center;
		        margin-top: 8px;
		        font-size: 14px;
		        color: #333;
		      }
		    }
		  }
	}
</style>

在 pages 目录下创建 videoPlaybaack.vue 文件,播放视频组件,播放视频必须要传 url 和 accessToken

videoPlaybaack.vue 文件

html 复制代码

<template>
	<view class="container">
		<view id="video-container"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	// 接收页面跳转的传参
	onLoad((e) => {
		let {
			url = null, accessToken = null
		} = e;
		initPlayers(url, accessToken)
	})
	onUnload(() => {
		destroyPlayer()
	})
	let players = ref({}); // 存储所有播放器实例
	// 初始化播放器
	async function initPlayers(url, accessToken) {
		try {
			await loadEZUIKit();
			if (!accessToken) {
				console.error("accessToken is required");
				return;
			}
			const systemInfo = uni.getSystemInfoSync();

			const containerId = "video-container";
			players.value = new EZUIKit.EZUIKitPlayer({
				id: containerId,
				accessToken: accessToken,
				url: url,
				// width: "360",
				// height: "600",
				width: systemInfo.windowWidth,
				height: (systemInfo.windowHeight)/2,
				template: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
				header: true, // 是否显示标题栏
				env: {
					domain: "https://open.ys7.com",
				},
			});
		} catch (error) {
			console.error("Failed to initialize EZUIKit:", error);
		}
	}
	// 动态加载 EZUIKit.js
	function loadEZUIKit() {
		return new Promise((resolve, reject) => {
			if (typeof EZUIKit !== "undefined") {
				resolve();
				return;
			}
			const script = document.createElement("script");
			script.src = "/static/js/ezuikit.js";
			script.onload = resolve;
			script.onerror = reject;
			document.head.appendChild(script);
		});
	}

	function destroyPlayer() {
		if (players.value && typeof players.value.destroy === "function") {
			players.value.destroy();
			players.value = {};
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 600px;
		display: flex;
		justify-content: center;
		align-items: center;
		// padding-top: 44px;

		.video-container {
			width: 100%;
		}
	}
</style>