guoyu/Study-Vue-redis/WebRTC迁移说明.md

WebRTC 迁移说明

概述

已将实时监控功能从 WebSocket + 截图 方案迁移到 WebRTC 技术，实现更低延迟和更高效率的屏幕流传输。

技术架构

1. 信令服务器（后端）

• 文件: WebRTCSignalingHandler.java
• 路径: /ws/webrtc/{userId}
• 功能: 处理 WebRTC 信令交换（offer/answer/ICE candidate）

2. 学生端（前端 UniApp）

• 文件: fronted_uniapp/src/utils/webrtc.js
• 功能:
  • 使用 getDisplayMedia() 获取屏幕流
  • 创建 RTCPeerConnection
  • 发送屏幕流给监控端

3. 监控端（后端管理界面）

• 文件: Study-Vue-redis/study-ui/src/utils/webrtc.js
• 功能:
  • 接收学生的屏幕流
  • 在 <video> 元素中显示实时视频

工作流程

1. 学生端：
   - 连接信令服务器 (/ws/webrtc/{userId})
   - 获取屏幕流 (getDisplayMedia)
   - 创建 PeerConnection
   - 发送 offer

2. 信令服务器：
   - 接收学生端的 offer
   - 转发给所有监控该学生的监控端

3. 监控端：
   - 连接信令服务器 (/ws/webrtc/{studentId})
   - 接收学生端的 offer
   - 创建 answer
   - 发送 answer 给学生端

4. 双方交换 ICE candidates，建立 P2P 连接

5. 学生端屏幕流通过 WebRTC 传输到监控端

文件变更

新增文件

1. Study-Vue-redis/ry-study-admin/src/main/java/com/ddnai/web/websocket/WebRTCSignalingHandler.java

   • WebRTC 信令服务器

2. fronted_uniapp/src/utils/webrtc.js

   • 学生端 WebRTC 客户端

3. Study-Vue-redis/study-ui/src/utils/webrtc.js

   • 监控端 WebRTC 客户端

修改文件

1. fronted_uniapp/src/pages/course/detail.vue

   • 添加 WebRTC 支持（H5 环境优先使用 WebRTC）

2. Study-Vue-redis/study-ui/src/views/study/screenStream/index.vue

   • 添加 WebRTC 视频显示
   • 优先使用 WebRTC，失败时回退到截图方式

3. Study-Vue-redis/ry-study-admin/src/main/java/com/ddnai/web/controller/study/ScreenStreamController.java

   • 合并 WebRTC 和 WebSocket 的在线状态查询

兼容性

自动回退机制

• H5 环境: 优先使用 WebRTC，失败时自动回退到截图方式
• App 环境: 使用截图方式（WebRTC 在 App 中需要额外配置）

浏览器支持

• Chrome/Edge: ✅ 完全支持
• Firefox: ✅ 完全支持
• Safari: ⚠️ 部分支持（需要用户手动授权）
• 移动浏览器: ⚠️ 支持有限

STUN/TURN 服务器配置

当前使用 Google 的公共 STUN 服务器：

iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun1.l.google.com:19302' }
]

如果需要配置 TURN 服务器（用于 NAT 穿透）

在以下文件中修改 iceServers 配置：

• fronted_uniapp/src/utils/webrtc.js
• Study-Vue-redis/study-ui/src/utils/webrtc.js

添加 TURN 服务器：

{
    urls: 'turn:your-turn-server.com:3478',
    username: 'your-username',
    credential: 'your-password'
}

使用说明

学生端

1. 登录并进入课程详情页面
2. 系统自动启动 WebRTC 屏幕共享（H5 环境）
3. 浏览器会弹出权限请求，选择要共享的屏幕/窗口

监控端

1. 进入实时监控页面 (/study/screenStream)
2. 选择在线学生
3. 系统自动连接 WebRTC 并显示实时视频流

优势对比

特性	WebSocket + 截图	WebRTC
延迟	500ms+	<100ms
带宽效率	低（每帧完整图片）	高（视频编码压缩）
帧率	2 FPS	30 FPS
画质	静态图片	流畅视频
实现复杂度	简单	中等

注意事项

1. HTTPS 要求: WebRTC 的 getDisplayMedia() API 在大多数浏览器中需要 HTTPS 环境
2. 权限请求: 用户需要授权屏幕共享权限
3. NAT 穿透: 如果双方都在 NAT 后面，可能需要 TURN 服务器
4. 浏览器兼容性: 确保使用现代浏览器（Chrome 72+, Firefox 66+, Safari 13+）

故障排查

学生端无法启动 WebRTC

• 检查浏览器是否支持 getDisplayMedia
• 检查是否在 HTTPS 环境（或 localhost）
• 查看控制台错误信息

监控端无法接收视频流

• 检查信令服务器连接是否正常
• 检查 ICE 连接状态
• 查看浏览器控制台和网络标签页

连接建立但无画面

• 检查 STUN/TURN 服务器配置
• 检查防火墙设置
• 尝试配置 TURN 服务器

后续优化建议

1. 添加 TURN 服务器支持（提高 NAT 穿透成功率）
2. 实现自适应码率（根据网络状况调整画质）
3. 添加音频支持（如果需要）
4. 优化移动端支持