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 服务器：
```javascript
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 服务器：
```javascript
{
    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. 优化移动端支持