vue接入萤石云监控视频流video-ezuikit

安装依赖

npm install ezuikit-js

使用

<div id="video-ezuikit"></div>

import EZUIKit from 'ezuikit-js';

const player = ref(null)
//设备编号
const deviceSerial = ref(null)
//设备通道，有些设备会有多个信号通道
const videoChannel = ref(null)

const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;



const token = ref('')
onMounted(() => {
    //获取token
    token.value = await getToken()
})

if(player.vlue){
    player.value.destroy() // 销毁
}
player = new EZUIKit.EZUIKitPlayer({
  id: 'video-ezuikit', // 视频容器ID
  template: "pcLive",
  width: width * 0.5,
  height: height * 0.7,
  accessToken: token.value, //accessToken 的值为你在莹石云平台监控地址的token
  url: `ezopen://open.ys7.com/${deviceSerial}/${videoChannel}.live` //url 为你莹石云监控的url地址信息
});

通常业务场景都会涉及到较多的监控设备，所以，正常的业务逻辑是，首先我们获取设备列表，默认将第一个设备进行实例化展示，切换设备时，需要先将已经存在的播放器实例进行销毁，然后重新实例化,否则会出现两个视频画面闪烁的情况，在关闭当前页面或销毁当前组件时，也需要将已经存在的播放器实例进行销毁。

补充一下，播放器实例化后会默认打开声音，官方提供了audio参数 0：关闭 1：打开，但是，当视频流拉取完毕后，还是会执行一次打开声音的指令，所以并不生效，我们需要在视频流完全加载好后，手动调用closeSound()关闭声音。

player.value.closeSound()