# 监控系统

**Repository Path**: luckye520/monitor-system

## Basic Information

- **Project Name**: 监控系统
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-15
- **Last Updated**: 2025-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 校园监控信息管理系统

## 项目概述
校园监控信息管理系统是一个用于管理校园监控设备和调用申请的综合平台，帮助学校有效管理监控设备资源，规范监控录像调取流程，保障校园安全与隐私。

## 技术栈

### 前端
- **框架**: Vue.js 2.6.x
- **UI组件库**: Element UI 2.15.x
- **状态管理**: Vuex 3.6.x
- **路由管理**: Vue Router 3.5.x
- **HTTP请求**: Axios 0.21.x
- **CSS预处理器**: SCSS
- **视频处理**: MediaRecorder API, IndexedDB
- **WebRTC**: 用于摄像头实时流处理

### 后端
- **框架**: Spring Boot 2.5.15
- **权限控制**: Spring Security 5.7.12 + JWT 0.9.1
- **ORM框架**: MyBatis Plus 3.5.x
- **数据库**: MySQL 8.0.x
- **项目构建**: Maven 3.6.x
- **日志框架**: Logback 1.2.13
- **接口文档**: Swagger 3.0.0
- **缓存**: Spring Cache

## 主要功能模块

### 用户管理
- 用户角色划分：管理员、教师、学生
- 权限控制和身份验证
- 用户信息维护

### 监控设备管理
- 设备信息录入与维护
- 设备状态监控
- 设备地点关联管理
- RTSP流接入与管理

### 监控调取申请
- 在线申请流程
- 多级审批机制
- 申请状态跟踪
- 权限时效管理

### 监控查看
- 实时监控画面查看
- 历史录像回放
- 视频截图和录制
- 本地存储与下载

### 公告管理
- 系统公告发布
- 公告类型管理

## 详细项目结构

### 后端结构 (`lihaosystem/`)
```
lihaosystem/
├── ruoyi-admin/            # 启动模块，系统入口
│   ├── src/main/java/      # Java源代码
│   ├── src/main/resources/ # 配置文件
│   └── pom.xml             # Maven配置
├── ruoyi-common/           # 通用工具模块
│   ├── src/main/java/      # 工具类、通用异常、常量等
│   └── pom.xml             # Maven配置
├── ruoyi-framework/        # 核心框架模块
│   ├── src/main/java/      # 安全配置、拦截器、过滤器等
│   └── pom.xml             # Maven配置
├── ruoyi-system/           # 系统功能模块
│   ├── src/main/java/      # 用户、角色、菜单等系统管理功能
│   ├── src/main/resources/ # MyBatis映射文件
│   └── pom.xml             # Maven配置
├── ruoyi-monitor/          # 监控调取系统核心功能模块
│   ├── src/main/java/      # 监控设备、调取申请、权限管理等
│   ├── src/main/resources/ # MyBatis映射文件
│   └── pom.xml             # Maven配置
└── pom.xml                 # 父项目Maven配置
```

### 前端结构 (`lhsystemui/`)
```
lhsystemui/
├── public/                 # 静态资源
├── src/
│   ├── api/                # 接口定义
│   │   ├── system/         # 系统管理接口
│   │   └── newMonitor/     # 监控系统接口
│   ├── assets/             # 图片等资源
│   ├── components/         # 通用组件
│   ├── layout/             # 布局组件
│   ├── router/             # 路由配置
│   ├── store/              # Vuex状态管理
│   ├── utils/              # 工具函数
│   ├── views/              # 页面组件
│   │   ├── system/         # 系统管理页面
│   │   └── newMonitor/     # 监控系统页面
│   │       ├── device/     # 设备管理
│   │       ├── location/   # 地点管理
│   │       ├── monitor/    # 监控查看
│   │       └── request/    # 申请管理
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── .env.development        # 开发环境配置
├── .env.production         # 生产环境配置
├── package.json            # 项目依赖
└── vue.config.js           # Vue配置
```

## 浏览器调用摄像头实现

本系统使用WebRTC技术实现浏览器调用摄像头功能，主要在`/newMonitor/monitor/index.vue`组件中实现：

### 关键技术点
1. **获取媒体流**：使用`navigator.mediaDevices.getUserMedia()`API获取摄像头视频流
2. **视频处理**：使用`MediaRecorder`API进行视频录制
3. **数据存储**：使用`IndexedDB`进行视频数据的本地存储
4. **RTSP流接入**：通过后端代理将RTSP流转换为浏览器可识别的格式

### 实现流程
1. 用户选择设备后，系统会请求摄像头权限
2. 获取到视频流后，显示在`<video>`元素中
3. 用户可以进行以下操作：
   - 实时查看：直接展示视频流
   - 录制视频：使用`MediaRecorder`录制视频片段
   - 截取图片：通过`Canvas`截取当前画面
   - 保存数据：将录制的视频或截图保存到本地

### 使用示例
```javascript
// 获取摄像头流
async function getVideoStream() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { width: 1280, height: 720 },
      audio: true
    });
    videoElement.srcObject = stream;
    return stream;
  } catch (error) {
    console.error('获取摄像头失败:', error);
  }
}

// 录制视频
function startRecording(stream) {
  const mediaRecorder = new MediaRecorder(stream);
  const chunks = [];
  
  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) {
      chunks.push(e.data);
    }
  };
  
  mediaRecorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/webm' });
    saveToIndexedDB(blob);
  };
  
  mediaRecorder.start();
}
```

### 注意事项
- 浏览器需要支持WebRTC技术（Chrome, Firefox, Edge等现代浏览器）
- 首次使用时需要用户授予摄像头和麦克风权限
- 在HTTPS环境下运行以确保安全性
- 本地存储的视频数据会占用用户浏览器存储空间

## 部署要求
- JDK 1.8+
- Node.js 12+
- MySQL 8.0+
- Maven 3.6+
- 现代浏览器（Chrome, Firefox, Edge等）