# 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. **离线缓存**：网络断开时缓存截图，连接恢复后批量上传