Vue3在PC端接入萤石云监控

参考文档：文档概述 · 萤石开放平台API文档

1.安装依赖

npm i ezuikit-js

2.封装组件

src/components/PlayerVideo/index.vue

<template><div id="video-container" style="width: 100%;"></div>
</template>
<script lang="ts">
import { reactive, getCurrentInstance, toRefs, onMounted, nextTick, defineComponent } from 'vue';
import EZUIKit from 'ezuikit-js';var player = null as any;
export default defineComponent({name: 'PlayerVideo',props: {accessToken: String,play_url: String,},setup(props: any, { emit }: any) {var themeData = {"header": {"color": "#1890ff","activeColor": "#FFFFFF","backgroundColor": "#000000","btnList": [{"iconId": "deviceID","part": "left","defaultActive": 0,"memo": "顶部设备序列号","isrender": 1},{"iconId": "deviceName","part": "left","defaultActive": 0,"memo": "顶部设备名称","isrender": 1},{"iconId": "cloudRec","part": "right","defaultActive": 0,"memo": "云存储","isrender": 0},{"iconId": "rec","part": "right","defaultActive": 0,"memo": "SD卡回放","isrender": 0}]},"footer": {"color": "#FFFFFF","activeColor": "#1890FF","backgroundColor": "#00000021","btnList": [{"iconId": "play","part": "left","defaultActive": 1,"memo": "播放","isrender": 1},{"iconId": "capturePicture","part": "left","defaultActive": 0,"memo": "截屏按钮","isrender": 1},{"iconId": "sound","part": "left","defaultActive": 0,"memo": "声音按钮","isrender": 1},{"iconId": "pantile","part": "left","defaultActive": 0,"memo": "云台控制按钮","isrender": 1},{"iconId": "recordvideo","part": "left","defaultActive": 0,"memo": "录制按钮","isrender": 1},{"iconId": "talk","part": "left","defaultActive": 0,"memo": "对讲按钮","isrender": 1},{"iconId": "zoom","part": "left","defaultActive": 0,"memo": "电子放大","isrender": 1},{"iconId": "hd","part": "right","defaultActive": 0,"memo": "清晰度切换按钮","isrender": 1},{"iconId": "webExpend","part": "right","defaultActive": 0,"memo": "网页全屏按钮","isrender": 1},{"iconId": "expend","part": "right","defaultActive": 0,"memo": "全局全屏按钮","isrender": 1}]}};onMounted(() => {nextTick(() => {initPlayer()});});const { proxy } = getCurrentInstance() as any;const data = reactive({});const initPlayer = async () => {player = new EZUIKit.EZUIKitPlayer({id: 'video-container', // 视频容器ID// accessToken: "at.67jjm3xg1nqavrv3ch6wuhgl3hjzwvly-6t6ynn896j-0ronkpk-ci0ef9om3",// url: "ezopen://open.ys7.com/FA6803244/1.hd.live",accessToken: props.accessToken,url: props.play_url,// simple - 极简版; pcLive-pc直播；pcRec-pc回放；	mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;themeData: themeData,})}const destroyPlayer = () => {if (player) {player.stop();player.destroy();player = null;}}return { ...toRefs(data), destroyPlayer }}
})
</script>
<style scoped lang="scss"></style>

3.页面调用

<template><div class="layout-padding"><div class="layout-padding-view layout-padding-auto"><div class="surveillanceVideo"><PlayerVideo v-if="play_url && accessToken" :play_url="play_url" :accessToken="accessToken"ref="playerVideoRef"></PlayerVideo></div></div></div>
</template><script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, getCurrentInstance, onDeactivated, onActivated, onBeforeUnmount, } from 'vue';
import PlayerVideo from '/@/components/PlayerVideo/index.vue';
export default defineComponent({components: {PlayerVideo},setup() {const data = reactive({play_url: "",accessToken: "",});// 页面加载时onMounted(async () => {console.log("onMounted");initPlayer()});onBeforeUnmount(() => {console.log("onBeforeUnmount");destroyPlayer()})onActivated(() => {console.log("onActivated");initPlayer()})onDeactivated(() => {console.log("onDeactivated");destroyPlayer()})const { proxy }: any = getCurrentInstance();const initPlayer = async () => {let res = await proxy.apis.v2DevicesGetdetail({deviceid: "FA6803244",});if (res.code === 200) {data.play_url = res.data.play_urldata.accessToken = res.data.accessToken} else {proxy.$message({message: res.message,type: 'error',});}};const destroyPlayer = () => {proxy.$refs?.playerVideoRef?.destroyPlayer()}return {...toRefs(data),};},
});
</script><style  lang="scss" scoped>
.surveillanceVideo {width: 600px;height: 400px;
}
</style>