163 lines
4.6 KiB
Markdown
163 lines
4.6 KiB
Markdown
# 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. 优化移动端支持
|
||
|