调用海康威视AI开放平台接口实现人体关键点检测
🎯 应用概述
这是一个基于Web的海康威视AI图像检测平台，支持通过浏览器上传图片并实时获取AI检测结果。用户可以直接在网页上上传图片，系统会自动调用海康威视AI接口进行人体检测和关键点识别，并生成可视化结果。
接口文档：人员关键点识别
✨ 核心特性
- 🔑 完整的Token管理：自动获取和缓存访问令牌
- 📷 双模式检测：支持本地文件上传和网络图片URL检测
- 🎨 高级可视化：人体边界框、关键点、骨骼连接线
- 🌐 现代Web界面：响应式设计，支持拖拽上传
- 📊 详细统计：检测结果、性能指标、目标分析
- 💾 结果导出：HTML可视化页面和JSON数据文件
🚀 快速开始
1. 启动Web服务器
npm run web
2. 访问Web应用
在浏览器中打开：http://localhost:3000
3. 选择检测模式
模式A：本地文件上传
- 选择"📁 上传本地图片"
- 点击选择或拖拽图片文件
- 支持JPG、JPEG、PNG、BMP格式，最大20MB
模式B：网络图片URL
- 选择"🌐 使用网络图片URL"
- 输入公网可访问的图片URL
- 点击"加载图片"预览
4. 开始AI检测
- 确认图片预览正确
- 点击"🚀 开始AI检测"按钮
- 等待检测完成（通常1-3秒）
5. 查看检测结果
- 📊 统计概览：目标数量、图像尺寸、处理耗时
- 🎯 目标详情：每个检测目标的置信度和关键点信息
- 🎨 可视化结果：点击查看完整的可视化页面
- 💾 数据下载：下载完整的检测数据（JSON格式）
🎨 可视化功能详解
检测元素说明
- 🟢 绿色边界框：标识检测到的人体区域
- 🔴 红色关键点：16个人体关键点位置
- 🔵 蓝色连接线：人体骨骼结构连接
- ⚪ 白色标签：置信度和关键点名称
16个人体关键点
| 编号 | 关键点名称 | 编号 | 关键点名称 |
|---|---|---|---|
| 0 | 头顶 | 8 | 左腕 |
| 1 | 左耳 | 9 | 右腕 |
| 2 | 右耳 | 10 | 左髋 |
| 3 | 上颈部 | 11 | 右髋 |
| 4 | 左肩 | 12 | 左膝 |
| 5 | 右肩 | 13 | 右膝 |
| 6 | 左肘 | 14 | 左踝 |
| 7 | 右肘 | 15 | 右踝 |
交互式控制
可视化页面提供以下控制按钮：
- 切换边界框：显示/隐藏人体检测框
- 切换关键点：显示/隐藏关键点标记
- 切换连接线：显示/隐藏骨骼连接线
- 切换标签：显示/隐藏文字标签
- 下载结果：保存可视化图像
🎨 界面介绍
1、上传本地图片
2、选择网络URL图片
3、检测结果页面
4、可视化结果
📁 文件结构
Web应用相关的文件结构：
项目根目录/
├── server.js # Express服务器主文件
├── hikvisionApi.js # 用于调用视觉算法接口进行图片校验
├── visualizer.js # 用于在图片上绘制人体检测框和关键点
├── public/ # 静态文件目录
│ └── index.html # 主页面
├── uploads/ # 上传文件存储目录
├── web_results/ # 检测结果存储目录
│ └── [resultId]/ # 每个检测结果的独立目录
│ ├── result.html # 可视化HTML文件
│ └── data.json # 检测数据JSON文件
└── package.json # 项目配置（包含web启动脚本）
⚠️ 注意事项
系统要求
- Node.js版本：建议16.0+（当前支持16.15.1）
- 浏览器支持：Chrome、Firefox、Safari、Edge等现代浏览器
- 网络要求：需要能够访问海康威视AI开放平台
配置要求
- API密钥：必须在
.env文件中配置正确的APP_KEY和APP_SECRET - 网络连接：确保服务器能够访问
ai.hikvision.com - 端口占用：默认使用3000端口，确保端口未被占用
使用限制
- 文件格式：仅支持JPG、JPEG、PNG、BMP格式
- 文件大小：单个文件最大20MB
- 并发处理：建议避免同时上传多个大文件
- 存储空间：上传的文件和结果会占用本地存储空间
安全考虑
- 文件清理：建议定期清理uploads和web_results目录
- 访问控制：生产环境建议添加身份验证
- HTTPS：生产环境建议使用HTTPS协议
- 文件验证：系统已包含基本的文件类型和大小验证
🛠️ 故障排除
常见问题
-
服务器启动失败
# 检查端口是否被占用 netstat -ano | findstr :3000# 使用其他端口启动 set PORT=3001 && npm run web -
图片上传失败
- 检查文件格式是否支持
- 确认文件大小不超过20MB
- 检查网络连接是否正常
-
AI检测失败
- 确认API密钥配置正确
- 检查网络是否能访问海康威视服务器
- 查看服务器控制台的错误日志
-
可视化结果无法显示
- 确认结果文件已生成
- 检查浏览器是否阻止弹窗
- 尝试直接访问结果URL
调试方法
-
查看服务器日志
- 服务器控制台会显示详细的处理日志
- 包括文件上传、API调用、结果生成等步骤
-
检查API状态
# 健康检查 curl http://localhost:3000/api/health# 配置检查 curl http://localhost:3000/api/config -
浏览器开发者工具
- 打开F12开发者工具
- 查看Network标签页的请求响应
- 查看Console标签页的错误信息