# dpmes

**Repository Path**: zhangxb2015/dpmes

## Basic Information

- **Project Name**: dpmes
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-05-08
- **Last Updated**: 2025-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 双重预防管理演示大屏

## 简介

vite5 + vue3 + ts + datav-vue3 + echarts  双重预防管理演示大屏

预览地址 http://119.3.144.20:8000/#/

![image](src/assets/preview_20240716.png)

**本项目数据重属虚构，请勿商用**

## 运行

安装依赖
```shell
npm i
```

运行
```shell
npm run dev
```

打包
```shell
npm run build
```

## 文档
### 1. vite预览海康rtsp视频流，在线播放海康摄像头视频
1、在[海康官方网站](https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20)下载
![image](src/assets/preview_001.png)
2、在public文件夹下面创建js文件夹，将海康web插件放入js文件夹中

3、在html文件中增加js库引用
```shell
<script type="text/javascript" src="js/adapter.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/webrtcstreamer.js"></script>
 ```
 4、在当前服务器启动webrtc-streamer.exe服务，用来视频流转码

 5、创建video播放组件
 ```shell
 <video ref="videoRef" id="video" style="object-fit: fill" controls autoplay
      autobuffer muted preload="auto" width="95%"></video>
<script>
  initWebRtcServer() {
    this.webRtcServer = new WebRtcStreamer(this.$refs.videoRef, 'http://' + this.fromIp + ':8000')
    this.webRtcServer.connect('rtsp://admin:Aa123456@' + this.rtspIp + ':554/Streaming/Channels/' + this.rtspChannel)
  },
</script>
```