# 海康摄像头监控系统

## 项目概述

本项目是一个基于Web的海康威视摄像头监控系统，实现了摄像头列表展示、实时视频预览、视频回放等功能。系统采用前后端分离架构，前端通过海康威视Web SDK与摄像头设备进行通信。

## 项目结构

```
camera/
├── webs/                          # Web前端资源目录
│   ├── camera.html               # 主页面文件
│   ├── demo1.css                 # 主样式文件
│   ├── demo.css                  # 辅助样式文件
│   ├── vue.js                    # Vue.js框架
│   ├── jquery-1.7.1.min.js      # jQuery库
│   ├── codebase/                 # 海康SDK核心文件
│   │   ├── webVideoCtrl.js       # 海康Web视频控制SDK
│   │   ├── jsVideoPlugin-1.0.0.min.js  # 视频插件
│   │   └── HCWebSDKPlugin.exe   # 插件安装程序
│   ├── cn/                       # 中文示例代码
│   │   └── demo.js               # 海康SDK功能实现
│   ├── en/                       # 英文示例代码
│   └── [图片资源]                # 界面图片资源
└── README.md                     # 项目说明文档
```

## 核心功能

### 1. 摄像头列表管理
- **数据来源**：通过AJAX从后端API获取摄像头数据
- **API地址**：`http://172.16.0.63:28080/dmp-res-api/restservice/20241028113645823630`
- **数据结构**：按教学楼（`jxlmc`）分组，每个教学楼下包含多个摄像头
- **显示字段**：
  - 教学楼名称（`buildname`）
  - 摄像头名称（`classname`）
  - 摄像头IP地址（`ip`）

### 2. 视频播放功能
- **实时预览**：点击摄像头名称即可自动登录并开始实时预览
- **窗口分割**：支持1x1、2x2、3x3、4x4、1x2、2x1等多种窗口布局
- **码流选择**：支持主码流、子码流、第三码流、转码码流
- **视频控制**：
  - 全屏播放
  - 电子放大/3D放大
  - 抓图功能
  - 录像功能

### 3. 云台控制
- **方向控制**：上下左右、左上、右上、左下、右下
- **自动巡航**：支持云台自动旋转
- **预置点**：设置和调用预置点
- **变焦控制**：变倍、变焦、光圈调节

### 4. 视频回放
- **录像搜索**：按时间范围搜索录像文件
- **回放控制**：播放、暂停、快放、慢放、单帧
- **倒放功能**：支持反向播放
- **录像下载**：支持录像文件下载

### 5. 音频功能
- **声音控制**：打开/关闭声音
- **音量调节**：0-100范围音量设置
- **语音对讲**：支持双向语音对讲

### 6. 系统维护
- **设备信息**：获取设备基本信息
- **配置管理**：导入/导出设备配置
- **固件升级**：支持设备固件升级
- **参数恢复**：恢复默认参数

## 技术架构

### 前端技术栈
- **Vue.js**：用于数据绑定和视图渲染
- **jQuery**：DOM操作和AJAX请求
- **海康威视 WebVideoCtrl SDK**：视频播放和控制核心

### 核心依赖
1. **webVideoCtrl.js**：海康威视Web视频控制SDK主文件
2. **jsVideoPlugin-1.0.0.min.js**：视频播放插件
3. **HCWebSDKPlugin.exe**：浏览器插件安装程序（需要用户安装）

### 界面布局
- **左侧区域**（468px宽）：
  - 摄像头列表容器
  - 按教学楼分组的树形结构
  - 每个摄像头可点击触发播放
  
- **右侧区域**（1406px宽）：
  - 视频播放窗口
  - 窗口分割控制
  - 功能操作面板（隐藏状态）

- **顶部导航栏**（105px高）：
  - 数据大屏导航菜单
  - 包含：首页、教育教学、招生信息、就业信息、总务后勤、教师信息、学生信息、社会服务、教学现场

## 核心代码说明

### 1. Vue应用初始化
```javascript
var app = new Vue({
    el: '#menu-container',
    data: {
        message: [],  // 摄像头数据列表
    },
    created: function() {
        // 从后端API获取摄像头数据
        // 数据格式：{buildname: "教学楼名", classes: [{classname: "摄像头名", ip: "IP地址"}]}
    },
    methods: {
        handleClick(ip) {
            // 点击摄像头时，自动登录并开始预览
            clickLogout();
            setTimeout(function() {
                $('#loginip').val(ip);
                clickLogin(ip);
            }, 200);
        }
    }
})
```

### 2. 海康SDK初始化
```javascript
WebVideoCtrl.I_InitPlugin({
    bWndFull: true,        // 支持单窗口双击全屏
    iWndowType: 1,        // 窗口类型
    cbSelWnd: function(xmlDoc) {
        // 窗口选择回调
    },
    cbInitPluginComplete: function() {
        // 插件初始化完成回调
        WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
    }
});
```

### 3. 设备登录和预览
```javascript
// 登录设备
WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
    success: function(xmlDoc) {
        // 登录成功后自动开始预览
        clickStartRealPlay();
    }
});

// 开始实时预览
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
    iStreamType: iStreamType,  // 码流类型
    iChannelID: iChannelID,     // 通道ID
    success: function() {
        // 预览成功
    }
});
```

## 数据接口

### 获取摄像头列表
- **请求方式**：POST
- **请求地址**：`http://172.16.0.63:28080/dmp-res-api/restservice/20241028113645823630`
- **请求参数**：
  ```javascript
  {
      requestBody: '{"condition":{},"requiredItems":"jxlmc,sxtmc,ipdz"}'
  }
  ```
- **返回数据格式**：
  ```javascript
  {
      resultData: [
          {
              jxlmc: "教学楼名称",
              sxtmc: "摄像头名称",
              ipdz: "IP地址"
          }
      ]
  }
  ```

## 配置说明

### 默认登录参数
- **IP地址**：从摄像头列表获取
- **端口号**：80
- **用户名**：admin
- **密码**：12345abcde

### 窗口分割配置
支持的分割模式：
- 1x1：单窗口
- 2x2：四窗口
- 3x3：九窗口
- 4x4：十六窗口
- 1x2：上下两窗口
- 2x1：左右两窗口

## 使用说明

### 1. 环境要求
- 现代浏览器（Chrome、Firefox、Edge等）
- 需要安装海康威视Web插件（HCWebSDKPlugin.exe）

### 2. 部署步骤
1. 将项目文件部署到Web服务器
2. 确保后端API服务正常运行
3. 用户首次访问需要安装浏览器插件
4. 打开 `camera.html` 即可使用

### 3. 操作流程
1. 页面加载后自动从后端获取摄像头列表
2. 左侧显示按教学楼分组的摄像头列表
3. 点击摄像头名称，系统自动：
   - 退出当前设备（如果已登录）
   - 登录新设备
   - 获取通道信息
   - 开始实时预览
4. 右侧视频区域显示实时画面

## 功能特性

### 已实现功能
✅ 摄像头列表展示  
✅ 实时视频预览  
✅ 窗口分割控制  
✅ 设备登录/退出  
✅ 视频抓图  
✅ 视频录像  
✅ 云台控制  
✅ 视频回放  
✅ 语音对讲  
✅ 设备信息查询  
✅ 配置导入/导出  
✅ 固件升级  

### 界面特点
- 大屏显示适配（1920x1080分辨率）
- 左侧列表可滚动
- 右侧视频区域支持多窗口分割
- 顶部导航栏集成数据大屏系统

## 注意事项

1. **插件安装**：首次使用需要安装海康威视浏览器插件
2. **网络要求**：需要能够访问摄像头设备的网络
3. **浏览器兼容**：建议使用Chrome浏览器以获得最佳体验
4. **API地址**：后端API地址为硬编码，如需修改请更新 `camera.html` 中的AJAX请求地址
5. **登录凭据**：默认用户名密码为硬编码，生产环境建议改为从配置读取

## 版本信息

- **SDK版本**：V3.3.0 build20230322
- **插件版本**：1.0.0
- **项目状态**：生产环境版本

## 相关资源

- 海康威视官方文档：https://www.hikvision.com/
- Web SDK开发文档：参考 `codebase` 目录下的SDK文件

## 维护说明

### 常见问题
1. **视频无法播放**：检查插件是否已安装，网络是否连通
2. **登录失败**：检查IP地址、端口、用户名密码是否正确
3. **列表为空**：检查后端API是否正常，网络是否连通

### 扩展开发
如需添加新功能，可参考 `cn/demo.js` 中的实现方式，使用海康SDK提供的API接口。

---

**最后更新**：2024年  
**维护人员**：开发团队