xiaozhang/guoyu

Fork 0

xiao12feng 10dd702526 修复bug

2025-12-03 18:58:36 +08:00

5.2 KiB

Raw Blame History

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 图片）

功能特性

✅ 已实现功能

自动平台检测：根据运行环境自动选择 WebRTC 或截图方式
App 截图：使用 plus.screen.capture 捕获整个屏幕
实时传输：通过 WebSocket 实时传输截图（Base64 格式）
自动重连：WebSocket 断开后自动重连
性能优化：限制截图大小，避免消息过大

⚠️ 注意事项

权限要求：
- App 需要屏幕录制/截图权限
- 需要在 manifest.json 中配置相应权限
性能考虑：
- 截图频率：默认 500ms（2帧/秒）
- 截图大小：限制在 200KB 以内
- 建议在真机上测试，模拟器可能性能较差
兼容性：
- Android：支持 plus.screen.capture
- iOS：需要检查是否支持（可能需要额外配置）

配置说明

1. manifest.json 配置

在 HBuilder 项目的 manifest.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 中：

this.captureInterval = 500 // 默认 500ms（2帧/秒）
// 可以根据需要调整，建议范围：300-1000ms

3. 截图大小限制

在 fronted_uniapp/src/utils/monitor.js 中：

const maxSize = 200 * 1024 // 200KB
// 如果截图过大，会自动跳过，避免 WebSocket 断开

测试步骤

1. 打包 App

# 在 HBuilder 中
1. 选择"发行" -> "原生App-云打包"
2. 选择 Android 或 iOS
3. 配置权限（见上方配置说明）
4. 打包并安装到设备

2. 测试监控功能

学生端（App）：
- 登录并进入课程页面
- 查看控制台日志，应该看到 "🚀 开始启动监控（截图方式）..."
- 应该看到 WebSocket 连接成功
监控端（浏览器）：
- 打开监控页面
- 选择该学生
- 应该能看到实时截图画面

3. 调试日志

学生端（App）关键日志：

🚀 开始启动监控（截图方式）...
✅ WebSocket连接成功
📹 启动实时屏幕捕获
📹 已发送 X 帧

监控端关键日志：

开始接收实时视频流（截图方式）
应该能看到 Base64 图片数据

常见问题

Q1: App 中截图失败

A: 检查：

是否配置了截图权限
plus.screen 是否可用（在 onReady 后使用）
真机测试（模拟器可能不支持）

Q2: 截图传输慢或不流畅

A: 可以：

调整截图间隔（增大间隔降低频率）
降低截图质量（在 plus.screen.capture 中配置）
检查网络连接

Q3: WebSocket 连接失败