dc-web-components

德昌前端组件库

组件开发计划

[√] 监控播放组件（支持海康大华的实时、回放）

[ ] 文件预览组件 (常见图片、视频格式、 office 相关格式、常见模型格式)

使用指南

安装

pnpm add dc-web-components@latest --registry http://192.168.0.189:4873/

视频播放

参数说明

import { MonitorType, PlayType } from 'dc-web-components';
/**
* 监控类型
*/
export enum MonitorType {

  /**
   * 海康
   */
  HIK,
  /**
   * 海康录像机
   */
  HIK_NVR,
  /**
   * 大华
   */
  DaHua,
}

export enum PlayType {

  /**
   * 实时
   */
  LIVE,
  /**
   * 回放
   */
  PLAYBACK,
}

export type RTSPPlayerProps = {
  /**
   * 监控类型
   */
  monitorType?: MonitorType,
  
  /**
   * easyMonitor 路径
   */
  easyMonitor: String,
  /**
   * 启用 ffmpeg 默认启用
   */
  ffmpeg?: boolean,
  username: string,
  password: string,

  ip: string,
  
  /**
   * rtsp 端口 默认 554
   */
  rtspPort?: number,

  /**
   * 码流类型 1. 主 2. 子
   */
  // stream?: number,

  /**
   * 设备通道 默认 1
   */
  channel?: number,
  
  /**
   * 播放类型, 默认实时
   */
  playType?: PlayType,

  /**
   * 回放开始时间
   */
  startDate?: Date,
  /**
   * 回放结束时间
   */
  endDate?: Date,
}

大华海康通用：

import { RTSPPlayer } from 'dc-web-components'; 
<RTSPPlayer
  easy-monitor="ws://192.168.0.189:8866"   
  ip="192.168.0.121"
  username="admin"
  password="dahua123@dc"
  :channel="1"
  :play-type="playType"
  :monitor-type="MonitorType.DaHua"
  :start-date="new Date('2023-10-01')"
  :end-date="new Date('2023-10-11')"
/>

大华监控（效率更高，需要设备支持）：

import { MonitorPlayer } from 'dc-web-components';

<MonitorPlayer
  v-if="loading"
  :monitor-type="MonitorType.DaHua"
  ip="192.168.0.121"
  username="admin"
  password="dahua123@dc"
  :play-type="playType"
  :start-date="new Date('2023-10-01')"
  :end-date="new Date('2023-10-11')"
/>