190 lines
5.2 KiB
Markdown
190 lines
5.2 KiB
Markdown
|
# App 环境监控功能说明
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
在 HBuilder 打包的 App 环境中，由于不支持 WebRTC 的 `getDisplayMedia` API，系统会自动回退到**截图方式**进行监控。
|
|||
|
|
|
|||
|
|
## 技术实现
|
|||
|
|
|
|||
|
|
### 1. 平台检测
|
|||
|
|
- **H5 环境**：使用 WebRTC 屏幕共享（高质量、低延迟）
|
|||
|
|
- **App 环境**：自动使用截图方式（通过 `plus.screen.capture` API）
|
|||
|
|
|
|||
|
|
### 2. App 环境截图流程
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
用户进入课程页面
|
|||
|
|
↓
|
|||
|
|
检测到 App 环境（#ifndef H5）
|
|||
|
|
↓
|
|||
|
|
启动 monitor.start()（截图方式）
|
|||
|
|
↓
|
|||
|
|
连接 WebSocket 到后端
|
|||
|
|
↓
|
|||
|
|
等待后端发送 start_capture 指令
|
|||
|
|
↓
|
|||
|
|
开始定时截图（默认 500ms 间隔）
|
|||
|
|
↓
|
|||
|
|
使用 plus.screen.capture 截图
|
|||
|
|
↓
|
|||
|
|
转换为 Base64 格式
|
|||
|
|
↓
|
|||
|
|
通过 WebSocket 实时传输给监控端
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 关键代码位置
|
|||
|
|
|
|||
|
|
#### 学生端（App）
|
|||
|
|
- **文件**: `fronted_uniapp/src/pages/course/detail.vue`
|
|||
|
|
- **逻辑**: 在 `onShow()` 中检测平台，App 环境直接使用截图方式
|
|||
|
|
- **截图实现**: `fronted_uniapp/src/utils/monitor.js`
|
|||
|
|
- `captureScreenshotApp()`: 使用 `plus.screen.capture` 截图
|
|||
|
|
- `imageToBase64()`: 将截图转换为 Base64
|
|||
|
|
- `startScreenCapture()`: 定时截图并传输
|
|||
|
|
|
|||
|
|
#### 监控端
|
|||
|
|
- **文件**: `Study-Vue-redis/study-ui/src/views/study/screenStream/index.vue`
|
|||
|
|
- **逻辑**: 自动检测并显示截图方式的画面（Base64 图片）
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
### ✅ 已实现功能
|
|||
|
|
1. **自动平台检测**：根据运行环境自动选择 WebRTC 或截图方式
|
|||
|
|
2. **App 截图**：使用 `plus.screen.capture` 捕获整个屏幕
|
|||
|
|
3. **实时传输**：通过 WebSocket 实时传输截图（Base64 格式）
|
|||
|
|
4. **自动重连**：WebSocket 断开后自动重连
|
|||
|
|
5. **性能优化**：限制截图大小，避免消息过大
|
|||
|
|
|
|||
|
|
### ⚠️ 注意事项
|
|||
|
|
|
|||
|
|
1. **权限要求**：
|
|||
|
|
- App 需要屏幕录制/截图权限
|
|||
|
|
- 需要在 `manifest.json` 中配置相应权限
|
|||
|
|
|
|||
|
|
2. **性能考虑**：
|
|||
|
|
- 截图频率：默认 500ms（2帧/秒）
|
|||
|
|
- 截图大小：限制在 200KB 以内
|
|||
|
|
- 建议在真机上测试，模拟器可能性能较差
|
|||
|
|
|
|||
|
|
3. **兼容性**：
|
|||
|
|
- Android：支持 `plus.screen.capture`
|
|||
|
|
- iOS：需要检查是否支持（可能需要额外配置）
|
|||
|
|
|
|||
|
|
## 配置说明
|
|||
|
|
|
|||
|
|
### 1. manifest.json 配置
|
|||
|
|
|
|||
|
|
在 HBuilder 项目的 `manifest.json` 中，需要确保：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"app-plus": {
|
|||
|
|
"distribute": {
|
|||
|
|
"android": {
|
|||
|
|
"permissions": [
|
|||
|
|
"<uses-permission android:name=\"android.permission.CAPTURE_SCREEN\"/>",
|
|||
|
|
"<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>",
|
|||
|
|
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>"
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"ios": {
|
|||
|
|
// iOS 可能需要额外的配置
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 截图间隔调整
|
|||
|
|
|
|||
|
|
在 `fronted_uniapp/src/utils/monitor.js` 中：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
this.captureInterval = 500 // 默认 500ms（2帧/秒）
|
|||
|
|
// 可以根据需要调整，建议范围：300-1000ms
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 截图大小限制
|
|||
|
|
|
|||
|
|
在 `fronted_uniapp/src/utils/monitor.js` 中：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
const maxSize = 200 * 1024 // 200KB
|
|||
|
|
// 如果截图过大，会自动跳过，避免 WebSocket 断开
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 测试步骤
|
|||
|
|
|
|||
|
|
### 1. 打包 App
|
|||
|
|
```bash
|
|||
|
|
# 在 HBuilder 中
|
|||
|
|
1. 选择"发行" -> "原生App-云打包"
|
|||
|
|
2. 选择 Android 或 iOS
|
|||
|
|
3. 配置权限（见上方配置说明）
|
|||
|
|
4. 打包并安装到设备
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 测试监控功能
|
|||
|
|
1. **学生端（App）**：
|
|||
|
|
- 登录并进入课程页面
|
|||
|
|
- 查看控制台日志，应该看到 "🚀 开始启动监控（截图方式）..."
|
|||
|
|
- 应该看到 WebSocket 连接成功
|
|||
|
|
|
|||
|
|
2. **监控端（浏览器）**：
|
|||
|
|
- 打开监控页面
|
|||
|
|
- 选择该学生
|
|||
|
|
- 应该能看到实时截图画面
|
|||
|
|
|
|||
|
|
### 3. 调试日志
|
|||
|
|
|
|||
|
|
**学生端（App）关键日志**：
|
|||
|
|
- `🚀 开始启动监控（截图方式）...`
|
|||
|
|
- `✅ WebSocket连接成功`
|
|||
|
|
- `📹 启动实时屏幕捕获`
|
|||
|
|
- `📹 已发送 X 帧`
|
|||
|
|
|
|||
|
|
**监控端关键日志**：
|
|||
|
|
- `开始接收实时视频流`（截图方式）
|
|||
|
|
- 应该能看到 Base64 图片数据
|
|||
|
|
|
|||
|
|
## 常见问题
|
|||
|
|
|
|||
|
|
### Q1: App 中截图失败
|
|||
|
|
**A**: 检查：
|
|||
|
|
1. 是否配置了截图权限
|
|||
|
|
2. `plus.screen` 是否可用（在 `onReady` 后使用）
|
|||
|
|
3. 真机测试（模拟器可能不支持）
|
|||
|
|
|
|||
|
|
### Q2: 截图传输慢或不流畅
|
|||
|
|
**A**: 可以：
|
|||
|
|
1. 调整截图间隔（增大间隔降低频率）
|
|||
|
|
2. 降低截图质量（在 `plus.screen.capture` 中配置）
|
|||
|
|
3. 检查网络连接
|
|||
|
|
|
|||
|
|
### Q3: WebSocket 连接失败
|
|||
|
|
**A**: 检查：
|
|||
|
|
1. App 中的网络配置（是否允许 HTTP/WebSocket）
|
|||
|
|
2. 后端地址是否正确
|
|||
|
|
3. 防火墙/代理设置
|
|||
|
|
|
|||
|
|
## 性能优化建议
|
|||
|
|
|
|||
|
|
1. **截图频率**：
|
|||
|
|
- 监控场景：500ms（2帧/秒）已足够
|
|||
|
|
- 如需更流畅：可降至 300ms（3帧/秒），但会增加性能负担
|
|||
|
|
|
|||
|
|
2. **截图质量**：
|
|||
|
|
- 默认质量已优化
|
|||
|
|
- 如需降低带宽：可以在截图时降低分辨率
|
|||
|
|
|
|||
|
|
3. **网络优化**：
|
|||
|
|
- 使用 WebSocket 压缩（如果后端支持）
|
|||
|
|
- 限制截图大小，避免消息过大
|
|||
|
|
|
|||
|
|
## 未来改进方向
|
|||
|
|
|
|||
|
|
1. **原生插件**：开发原生屏幕录制插件，实现类似 WebRTC 的效果
|
|||
|
|
2. **自适应质量**：根据网络状况自动调整截图频率和质量
|
|||
|
|
3. **离线缓存**：网络断开时缓存截图，连接恢复后批量上传
|
|||
|
|
|