64 lines
2.2 KiB
Markdown
64 lines
2.2 KiB
Markdown
|
# WebRTC 平台支持说明
|
|||
|
|
|
|||
|
|
## 支持的平台
|
|||
|
|
|
|||
|
|
### ✅ H5 浏览器（完全支持）
|
|||
|
|
- **桌面浏览器**：Chrome、Firefox、Edge、Safari 等主流浏览器
|
|||
|
|
- **移动浏览器**：iOS Safari、Android Chrome 等
|
|||
|
|
- **功能**：完整的 WebRTC 屏幕共享功能
|
|||
|
|
- **实现方式**：使用 `getDisplayMedia()` API
|
|||
|
|
|
|||
|
|
### ⚠️ uni-app App 环境（部分支持）
|
|||
|
|
- **Android App**：不支持 WebRTC 屏幕共享，自动回退到截图方式
|
|||
|
|
- **iOS App**：不支持 WebRTC 屏幕共享，自动回退到截图方式
|
|||
|
|
- **原因**：uni-app 的 App 环境不支持 `getDisplayMedia()` API
|
|||
|
|
- **解决方案**：
|
|||
|
|
1. **自动回退**：系统会自动回退到截图方式（WebSocket + Base64 图片）
|
|||
|
|
2. **原生插件**：如需在 App 中使用 WebRTC，需要开发原生插件（Android MediaProjection API / iOS ReplayKit）
|
|||
|
|
|
|||
|
|
### ❌ 小程序环境（不支持）
|
|||
|
|
- **微信小程序**：不支持 WebRTC
|
|||
|
|
- **其他小程序**：不支持 WebRTC
|
|||
|
|
- **解决方案**：使用截图方式
|
|||
|
|
|
|||
|
|
## 技术实现
|
|||
|
|
|
|||
|
|
### H5 环境
|
|||
|
|
```javascript
|
|||
|
|
// 使用 getDisplayMedia API
|
|||
|
|
const stream = await navigator.mediaDevices.getDisplayMedia({
|
|||
|
|
video: { width: { ideal: 1920 }, height: { ideal: 1080 }, frameRate: { ideal: 30 } },
|
|||
|
|
audio: false
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### App 环境（自动回退）
|
|||
|
|
```javascript
|
|||
|
|
// 系统会自动检测平台并回退到截图方式
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
// 自动回退到 monitor.js（截图方式）
|
|||
|
|
// #endif
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 性能对比
|
|||
|
|
|
|||
|
|
| 特性 | WebRTC (H5) | 截图方式 (App/回退) |
|
|||
|
|
|------|------------|-------------------|
|
|||
|
|
| 延迟 | 低（<100ms） | 较高（500ms-3s） |
|
|||
|
|
| 画质 | 高（可配置） | 中等（压缩后） |
|
|||
|
|
| 带宽 | 中等 | 较高（Base64 编码） |
|
|||
|
|
| 流畅度 | 流畅（30fps） | 一般（取决于间隔） |
|
|||
|
|
|
|||
|
|
## 使用建议
|
|||
|
|
|
|||
|
|
1. **H5 环境**：优先使用 WebRTC，提供最佳体验
|
|||
|
|
2. **App 环境**：自动使用截图方式，无需额外配置
|
|||
|
|
3. **混合部署**：系统会自动检测平台并选择最佳方案
|
|||
|
|
|
|||
|
|
## 未来改进方向
|
|||
|
|
|
|||
|
|
1. **原生插件开发**：为 Android/iOS 开发原生屏幕录制插件
|
|||
|
|
2. **性能优化**：优化截图方式的压缩和传输效率
|
|||
|
|
3. **自适应**：根据网络条件自动调整画质和帧率
|
|||
|
|
|