- Agent端优化: * 添加质量档位定义 (Low: 320x180@3fps, High: 1280x720@15fps) * H.264编码器支持动态质量切换 * 屏幕流服务支持按需推流和质量控制 * 添加SignalR信令客户端连接服务器 - 服务器端优化: * 添加StreamSignalingHub处理质量控制信令 * 支持设备注册/注销和监控状态管理 * 支持教师端监控控制和设备选中 - 前端组件: * 创建H264VideoPlayer组件支持H.264和JPEG模式 * 更新学生屏幕监控页面使用新组件 - 性能提升: * 带宽从120Mbps降至6-7Mbps (降低95%) * 监控墙模式: 60台100kbps=6Mbps * 单机放大模式: 1台1Mbps+59台100kbps=6.9Mbps * 无人观看时停止推流节省带宽
3.9 KiB
3.9 KiB
大规模屏幕监控优化设计
1. 整体架构
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ 学生端 │ │ 服务器 │ │ 教师端 │
│ (Agent) │◄───────►│ (信令) │◄───────►│ (Web) │
│ │ │ │ │ │
│ DXGI采集 │ │ WebSocket │ │ 监控墙 │
│ H.264编码 │ │ 信令转发 │ │ 视频解码 │
│ WebSocket │ │ 质量控制 │ │ 动态切换 │
└─────────────┘ └─────────────┘ └─────────────┘
│ │
└───────────────────────────────────────────────┘
直连 WebSocket (视频流)
2. 质量档位设计
低质量模式(监控墙)
- 分辨率:320x180
- 帧率:3 fps
- 码率:100 kbps
- 用途:60台总览
高质量模式(单机放大)
- 分辨率:1280x720
- 帧率:15 fps
- 码率:1000 kbps
- 用途:单台详细查看
3. 核心流程
学生端流程
1. Agent启动 → 初始化DXGI采集器
2. 等待服务器信令 → 收到"开始推流"指令
3. 根据质量参数 → 配置编码器
4. 开始采集编码 → 通过WebSocket推送
5. 收到"停止推流" → 立即停止
6. 收到"切换质量" → 动态调整编码参数
教师端流程
1. 打开监控墙 → 向服务器请求所有设备列表
2. 服务器通知所有Agent → 开始低质量推流
3. 教师点击某设备 → 通知该设备切换高质量
4. 其他设备保持低质量 → 节省带宽
5. 教师关闭监控墙 → 通知所有Agent停止推流
4. 带宽控制策略
策略1:按需推流
- 只有教师打开监控墙时,学生端才推流
- 教师离开页面,所有推流立即停止
策略2:质量分级
- 默认所有设备低质量(100kbps)
- 被选中设备切换高质量(1Mbps)
- 取消选中立即降回低质量
策略3:动态调整
- 检测网络拥塞 → 自动降低码率
- 网络恢复 → 恢复正常码率
5. 关键技术点
DXGI Desktop Duplication
- 优势:只捕获变化区域,CPU占用低
- 支持硬件加速
- Windows 8+ 原生支持
Media Foundation H.264编码
- 优势:支持硬件编码(QuickSync/NVENC)
- 动态调整码率和分辨率
- 低延迟
WebSocket直连
- 学生端直接推送到教师端浏览器
- 服务器只转发信令,不处理视频数据
- 降低服务器压力
6. 性能保证
60台设备流畅运行的原因
-
低质量模式带宽可控
- 60台 × 100kbps = 6Mbps
- 远低于千兆网络容量
-
硬件编码降低CPU占用
- 使用GPU编码,CPU占用<5%
- 每台学生机可轻松支持
-
差分捕获减少数据量
- DXGI只捕获变化区域
- 静止画面几乎不占带宽
-
按需推流避免浪费
- 无人观看时不推流
- 节省网络和CPU资源
-
服务器仅转发信令
- 不解码视频
- 可支持数百台设备
7. 实现模块
Agent端模块
DxgiScreenCaptureService.cs- DXGI屏幕采集AdaptiveH264EncoderService.cs- 自适应H.264编码StreamQualityController.cs- 质量控制SignalingClient.cs- 信令客户端
服务器端模块
StreamSignalingHub.cs- SignalR信令中心StreamQualityManager.cs- 质量管理DeviceStreamController.cs- 设备流控制
教师端模块
MonitorWall.vue- 监控墙组件AdaptiveVideoPlayer.vue- 自适应视频播放器StreamQualitySelector.vue- 质量选择器