使用ezuikit-js封装一个对接摄像头的组件

ezuikit-js 是一个基于 JavaScript 的视频播放库，主要用于在网页中嵌入实时视频流播放功能。它通常用于与支持 RTSP、RTMP、HLS 等协议的摄像头或视频流服务器进行交互，提供流畅的视频播放体验。

主要功能
多协议支持：支持 RTSP、RTMP、HLS 等主流视频流协议。

实时播放：低延迟播放实时视频流。

多平台兼容：支持 PC 端和移动端浏览器。

丰富的 API：提供 JavaScript API，方便开发者自定义控制和集成。

轻量级：库文件体积小，加载速度快。

使用场景
安防监控：实时查看摄像头视频流。

直播应用：嵌入直播视频流到网页中。

视频会议：播放远程会议视频流。

PlayVideomonitor.vue组件

父组件使用

//projectId是自定义属性，业务工程id
const monitorVis = ref(false);
const playId = ref("");
const playName = ref("");
//获取video信息
const videoData = ref([]);
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;
};