ezuikit-js 是一個基于 JavaScript 的視頻播放庫，主要用于在網頁中嵌入實時視頻流播放功能。它通常用于與支持 RTSP、RTMP、HLS 等協議的攝像頭或視頻流服務器進行交互，提供流暢的視頻播放體驗。

主要功能
多協議支持：支持 RTSP、RTMP、HLS 等主流視頻流協議。

實時播放：低延遲播放實時視頻流。

多平臺兼容：支持 PC 端和移動端瀏覽器。

豐富的 API：提供 JavaScript API，方便開發者自定義控制和集成。

輕量級：庫文件體積小，加載速度快。

使用場景
安防監控：實時查看攝像頭視頻流。

直播應用：嵌入直播視頻流到網頁中。

視頻會議：播放遠程會議視頻流。

PlayVideomonitor.vue組件

<template><el-dialogv-model="dialogVisible":width="isLargeScreen ? 1680 : 840":close-on-click-modal="false":close-on-press-escape="false"><template #title><div style="display: flex; align-items: center">監控攝像頭 ({{ playName }}) &nbsp; &nbsp;<el-buttontype="text"size="mini"class="refresh-btn"@click="refreshFun"title="點擊刷新"><template #icon><span class="ti-shuaxin"></span></template></el-button>&nbsp; &nbsp;&nbsp; &nbsp;</div></template><el-tabs v-model="playType" class="demo-tabs" @tab-click="tabeChange"><el-tab-pane label="實時視頻" name="pcLive"><div :id="playConfig" class="videoMonitor-content"></div></el-tab-pane><el-tab-pane label="歷史回放" name="pcRec"><div :id="playRecConfig" class="videoMonitor-content"></div></el-tab-pane></el-tabs></el-dialog>
</template><script lang="ts" setup>
import EZUIKit from "ezuikit-js";
import { uuid } from "vue-uuid";
import { ElMessage } from "element-plus";
import {computed,getCurrentInstance,onMounted,ref,defineProps,defineEmits,
} from "vue";
import userInfoStorage from "@/userInfoStorage";
import { useMediaQuery } from "@vueuse/core";
const { proxy }: any = getCurrentInstance();
const props = defineProps<{modelValue: Boolean;playId: string | null;projectId: string;playName: string;
}>();const emits = defineEmits<{(e: "update:modelValue", value: Boolean): void;
}>();const isLargeScreen = useMediaQuery("(min-height:2000px)");
//公司id
const companyId = computed(() => {return userInfoStorage.getCompanyId();
});
let player: any = null;
let playerRec: any = null;
const dialogVisible = computed({get() {return props.modelValue;},set(v: Boolean) {emits("update:modelValue", v);},
});
const playConfig = ref(uuid.v4());
const playRecConfig = ref(uuid.v4());
const playType = ref("pcLive");
const getAccessToken = () => {if (playType.value !== "") {proxy.axios.get(`/cloud/camera/company/${companyId.value}/project/${props.projectId}/play-video/${props.playId}?linkType=0  `).then(({ data }: { data: any }) => {if (data.errorcode == 0) {if (playType.value == "pcLive") {init(data.data.accessToken, data.data.url, "pcLive");} else if (playType.value == "pcRec") {initRec(data.data.accessToken, data.data.url, "pcRec");}} else {ElMessage.warning(data.message);}}).catch((err: any) => {console.error(err);});}
};
const tabeChange = (val: any) => {if (playType.value == "pcLive") {if (player) {destroy();}} else {if (playerRec) {destroyRec();}}getAccessToken();
};
function init(token: any, url: any, playType: any) {if (player) {destroy();}player = new EZUIKit.EZUIKitPlayer({id: playConfig.value, // 視頻容器IDaccessToken: token,url: url,width: isLargeScreen.value ? 1600 : 800,height: isLargeScreen.value ? 900 : 450,template: playType,});setTimeout(() => {player.play();}, 500);
}
function initRec(token: any, url: any, playType: any) {if (playerRec) {destroyRec();}player = new EZUIKit.EZUIKitPlayer({id: playRecConfig.value, // 視頻容器IDaccessToken: token,url: url,width: isLargeScreen.value ? 1600 : 800,height: isLargeScreen.value ? 900 : 450,template: playType,});playerRec.play();
}function destroy() {if (player) {player.destroy();}player = null;
}
function destroyRec() {if (playerRec) {playerRec.destroy();}playerRec = null;
}const refreshFun = () => {getAccessToken();
};
onMounted(() => {getAccessToken();
});
</script>
<style scoped>
.videoMonitor-content {height: 400px;
}.el-dialog:deep(.el-dialog__body) {padding: 0 var(--el-dialog-padding-primary);
}
@media (min-height: 2000px) {.videoMonitor-content {height: 800px;}
}
</style>

父組件使用

<!-- 遍歷video信息  把每一個信息傳給monitorClick事件 -->
<template v-if="videoData && videoData.length > 0"><div v-for="(item, index) in videoData" :key="item.cameraId"><span:title="item.alias"class="imgconetnt"@click="monitorClick(item)"><img src="@/assets/img/monitor1.png" class="monitor-img" /></span></div></template>
<PlayVideomonitorv-model="monitorVis"v-if="monitorVis":playId="playId":playName="playName":projectId="projectId"/>
//projectId是自定義屬性，業務工程id
const monitorVis = ref<boolean>(false);
const playId = ref("");
const playName = ref("");
//獲取video信息
const videoData = ref<any[]>([]);
const getVideoData = () => {appAxios.get(`/cloud/camera/company/${companyId.value}/project/${props.projectId}/cameras?linkType=0`).then(({ data }: { data: any }) => {if (data.errorcode == 0) {let res = data.data;videoData.value = res;} else {ElMessage.error(data.message);}}).catch((err) => {console.error(err);});
};
//點擊每一個攝像頭拿到每一個信息
const monitorClick = (row: any) => {if (row.status == 2) {return notificationMessage("攝像頭狀態異常，無法播放", "提示", "warning");}if (row.status == 0) {return notificationMessage("攝像頭已被禁用，無法播放", "提示", "error");}monitorVis.value = true;playId.value = row.cameraId;playType.value = row.videoQuality;playName.value = row.alias;
};