README.md 8.2 KB
海康摄像头监控系统
项目概述
本项目是一个基于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
- 项目状态：生产环境版本
相关资源
- 海康威视官方文档：https://www.hikvision.com/
- Web SDK开发文档：参考
codebase目录下的SDK文件
维护说明
常见问题
- 视频无法播放：检查插件是否已安装，网络是否连通
- 登录失败：检查IP地址、端口、用户名密码是否正确
- 列表为空：检查后端API是否正常，网络是否连通
扩展开发
如需添加新功能，可参考 cn/demo.js 中的实现方式，使用海康SDK提供的API接口。
最后更新：2024年
维护人员：开发团队