zlwu 9d949b0f7b 提交		il y a 10 mois
..
.idea	1d5a54b9cb first commit	il y a 10 mois
webs	9d949b0f7b 提交	il y a 10 mois
.DS_Store	9d949b0f7b 提交	il y a 10 mois
README.md	1d5a54b9cb first commit	il y a 10 mois

海康摄像头监控系统

项目概述

本项目是一个基于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：视频播放和控制核心

核心依赖

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

界面布局

左侧区域（468px宽）：
- 摄像头列表容器
- 按教学楼分组的树形结构
- 每个摄像头可点击触发播放
右侧区域（1406px宽）：
- 视频播放窗口
- 窗口分割控制
- 功能操作面板（隐藏状态）
顶部导航栏（105px高）：
- 数据大屏导航菜单
- 包含：首页、教育教学、招生信息、就业信息、总务后勤、教师信息、学生信息、社会服务、教学现场

核心代码说明

1. Vue应用初始化

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初始化

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

3. 设备登录和预览

// 登录设备
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
请求参数：
```
{
  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. 部署步骤

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

3. 操作流程

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

功能特性

已实现功能

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

界面特点

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

注意事项

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

版本信息

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

维护说明

常见问题

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

扩展开发

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

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

README.md