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. **自适应**：根据网络条件自动调整画质和帧率
|
||
|