xiaozhang/guoyu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
10dd702526
guoyu/监控实现方法汇总.md
xiao12feng 10dd702526 修复bug
2025-12-03 18:58:36 +08:00

13 KiB
Raw Blame History

屏幕监控实现方法汇总

📋 概述

本项目支持多种屏幕监控实现方式，适用于不同的运行环境和需求场景。

🎯 方法一：WebSocket + 截图方式（当前使用）

实现位置

  • 学生端: fronted_uniapp/fronted_uniapp/utils/screenStream.js
  • 管理员端: Study-Vue-redis/ry-study-ui/src/views/study/screenStream/index.vue
  • 后端: Study-Vue-redis/ry-study-admin/src/main/java/com/ddnai/web/websocket/ScreenStreamWebSocketHandler.java

工作原理

  1. 学生端通过 WebSocket 连接到 /ws/screenStream/{userId}
  2. 学生端使用 plus.screen.capture 或 plus.nativeObj.Bitmap 进行屏幕截图
  3. 将截图转换为 Base64 格式，通过 WebSocket 发送给后端
  4. 后端转发给监控端（管理员界面）
  5. 监控端接收并显示截图画面

优点

  • ✅ 适用于 App 环境（HBuilder/UniApp）
  • ✅ 实现简单，兼容性好
  • ✅ 支持按需截图（request_screenshot 消息）
  • ✅ 支持持续截图（定时发送）

缺点

  • ❌ 延迟较高（取决于截图间隔）
  • ❌ 数据量大（Base64 编码的图片）
  • ❌ 需要 App 权限（屏幕录制权限）

截图方式

  1. plus.screen.capture（优先）
  2. plus.nativeObj.Bitmap + webview.draw（备选）
  3. Canvas API（H5 环境，功能有限）

使用场景

  • ✅ 手机 App 环境
  • ✅ 需要实时监控学生屏幕
  • ✅ 网络带宽充足

🎯 方法二：WebRTC 屏幕共享（H5环境）

实现位置

  • 学生端: fronted_uniapp/src/utils/webrtc.js
  • 管理员端: Study-Vue-redis/ry-study-ui/src/utils/webrtc.js
  • 后端: Study-Vue-redis/ry-study-admin/src/main/java/com/ddnai/web/websocket/WebRTCSignalingHandler.java

工作原理

  1. 学生端使用 navigator.mediaDevices.getDisplayMedia() 获取屏幕流
  2. 通过 WebRTC 信令服务器（/ws/webrtc/{userId}）建立 P2P 连接
  3. 学生端创建 RTCPeerConnection，发送 offer
  4. 监控端接收 offer，创建 answer
  5. 交换 ICE candidates，建立媒体流传输
  6. 监控端接收并显示实时视频流

优点

  • ✅ 延迟极低（实时视频流）
  • ✅ 数据量小（视频编码压缩）
  • ✅ 画质好（原生视频流）
  • ✅ 无需 App 权限（浏览器原生支持）

缺点

  • ❌ 仅支持 H5 环境（浏览器）
  • ❌ 需要 STUN/TURN 服务器（NAT 穿透）
  • ❌ 实现复杂（信令交换、ICE 协商）
  • ❌ 移动端浏览器支持有限

使用场景

  • ✅ 浏览器环境（PC/移动浏览器）
  • ✅ 需要低延迟实时监控
  • ✅ 网络环境良好（支持 P2P）

🎯 方法三：HTTP 上传截图（传统方式）

实现位置

  • 学生端: fronted_uniapp/src/utils/monitor.js / fronted_uniapp/fronted_uniapp/utils/monitor.js
  • 后端: Study-Vue-redis/ry-study-system/src/main/java/com/ddnai/system/service/impl/study/StudyScreenMonitorServiceImpl.java

工作原理

  1. 学生端定时截图（默认 30 秒）
  2. 将截图保存为文件
  3. 通过 HTTP POST 上传到 /study/monitor/screenshot
  4. 后端保存到数据库或文件系统
  5. 管理员通过历史记录查看

优点

  • ✅ 实现简单
  • ✅ 数据持久化（可查看历史）
  • ✅ 不依赖 WebSocket 连接
  • ✅ 适合离线场景（可延迟上传）

缺点

  • ❌ 非实时（定时上传）
  • ❌ 数据量大（文件上传）
  • ❌ 需要存储空间
  • ❌ 无法实时监控

使用场景

  • ✅ 需要历史记录
  • ✅ 离线学习场景
  • ✅ 不需要实时监控

🎯 方法四：WebSocket + 监控端点（旧版）

实现位置

  • 后端: Study-Vue-redis/ry-study-admin/src/main/java/com/ddnai/web/websocket/MonitorWebSocketHandler.java

工作原理

  1. 学生端和监控端分别连接到 /ws/monitor/{userId}
  2. 通过 WebSocket 发送消息
  3. 后端广播消息给所有连接

优点

  • ✅ 实现简单
  • ✅ 支持多端连接

缺点

  • ❌ 功能有限（仅消息传递）
  • ❌ 未实现屏幕流传输
  • ❌ 已废弃（被方法一替代）

使用场景

  • ❌ 不推荐使用（已废弃）

📊 方法对比表

特性 WebSocket截图 WebRTC HTTP上传 监控端点
实时性 ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐ ⭐⭐
延迟 高（1-2秒） 极低（<100ms） 高（30秒+） 中
数据量 大（Base64图片） 小（视频编码） 大（文件） 小
适用环境 App H5浏览器 所有 所有
实现复杂度 中 高 低 低
权限要求 屏幕录制 无 屏幕录制 无
网络要求 中 高（P2P） 低 中
历史记录 ❌ ❌ ✅ ❌

🔧 当前实现状态

✅ 已实现

  1. WebSocket + 截图方式（方法一）

    • 学生端：✅ 已实现
    • 管理员端：✅ 已实现
    • 后端：✅ 已实现
    • 状态：✅ 当前使用中

  2. WebRTC 屏幕共享（方法二）

    • 学生端：✅ 已实现（H5环境）
    • 管理员端：✅ 已实现
    • 后端：✅ 已实现
    • 状态：⚠️ 仅 H5 环境可用

  3. HTTP 上传截图（方法三）

    • 学生端：✅ 已实现
    • 后端：✅ 已实现
    • 状态：✅ 可用（历史记录）

⚠️ 部分实现

  • WebRTC 在 App 环境不可用（需要原生插件）

❌ 未实现

  • 无

🚀 推荐方案

场景一：手机 App 环境（当前场景）

推荐：方法一（WebSocket + 截图）

  • 已在登录时自动启动
  • 支持按需截图和持续截图
  • 适配 App 环境

场景二：浏览器环境

推荐：方法二（WebRTC）

  • 低延迟实时监控
  • 画质好
  • 无需额外权限

场景三：需要历史记录

推荐：方法三（HTTP上传）

  • 数据持久化
  • 可查看历史截图

场景四：生产环境（推荐）

推荐：方法五（第三方SDK）

  • 使用腾讯云TRTC或ZEGO即构科技
  • 低延迟、高质量、稳定可靠
  • 适合大规模部署
  • 费用：按使用量计费（通常有免费额度）

场景五：混合方案（最佳体验）

推荐：方法七（混合方案）

  • 浏览器优先使用 WebRTC
  • App 环境优先使用第三方SDK，降级到截图方式
  • 自动检测和切换
  • 最佳用户体验

场景六：完全自定义

推荐：方法六（原生插件）

  • 开发原生插件
  • 完全控制实现
  • 无第三方依赖
  • 适合有原生开发能力的团队

🔍 问题排查

问题：管理员界面看不到画面

可能原因

  1. 学生端未连接 WebSocket

    • 检查：学生端控制台是否有 ✅ WebSocket 连接已建立
    • 解决：确保登录后自动启动连接

  2. 截图功能不可用

    • 检查：学生端控制台是否有 ⚠️ 所有截图方式都不可用
    • 解决：检查 App 权限配置（manifest.json）

  3. 后端未转发截图请求

    • 检查：后端日志是否有 📸 监控端请求截图
    • 解决：确保后端已实现 handleRequestScreenshot 方法

  4. 网络连接问题

    • 检查：WebSocket 连接是否成功
    • 解决：检查 IP 地址和端口配置

调试步骤

  1. 检查学生端 WebSocket 连接状态
  2. 检查后端是否收到 request_screenshot 消息
  3. 检查学生端是否收到并响应截图请求
  4. 检查后端是否转发 screen_frame 消息
  5. 检查管理员端是否收到并显示画面

📝 代码位置索引

学生端

  • fronted_uniapp/fronted_uniapp/utils/screenStream.js - 截图方式（App）
  • fronted_uniapp/src/utils/webrtc.js - WebRTC方式（H5）
  • fronted_uniapp/fronted_uniapp/utils/monitor.js - HTTP上传方式

管理员端

  • Study-Vue-redis/ry-study-ui/src/views/study/screenStream/index.vue - 监控界面
  • Study-Vue-redis/ry-study-ui/src/utils/webrtc.js - WebRTC客户端

后端

  • ScreenStreamWebSocketHandler.java - WebSocket截图方式处理器
  • WebRTCSignalingHandler.java - WebRTC信令处理器
  • MonitorWebSocketHandler.java - 旧版监控处理器（已废弃）

🎯 方法五：第三方SDK（推荐用于生产环境）

可选SDK

  1. 腾讯云 TRTC（实时音视频）

  2. ZEGO即构科技（实时音视频）

    • 官网：https://www.zego.im/
    • 支持：Android、iOS、Web
    • 特点：低延迟、全球节点、SDK完善
    • 费用：按使用量计费

  3. 声网 Agora（实时音视频）

    • 官网：https://www.agora.io/
    • 支持：Android、iOS、Web
    • 特点：低延迟、高并发、全球覆盖
    • 费用：按使用量计费

工作原理

  1. 集成第三方SDK到App中
  2. 使用SDK提供的屏幕录制API
  3. 通过SDK的服务器进行实时传输
  4. 管理员端通过SDK接收视频流

优点

  • ✅ 低延迟（<100ms）
  • ✅ 高质量（视频编码）
  • ✅ 稳定可靠（专业服务）
  • ✅ 支持大规模并发
  • ✅ 完善的SDK和文档
  • ✅ 无需自己维护服务器

缺点

  • ❌ 需要付费（按使用量）
  • ❌ 依赖第三方服务
  • ❌ 需要集成SDK（增加包体积）
  • ❌ 需要申请账号和配置

使用场景

  • ✅ 生产环境
  • ✅ 需要高质量实时监控
  • ✅ 有预算支持
  • ✅ 需要大规模部署

🎯 方法六：原生插件（自定义开发）

实现方式

  1. Android原生插件

    • 使用 MediaProjection API（Android 5.0+）
    • 使用 ScreenCapture API（Android 10+）
    • 开发 UniApp 原生插件

  2. iOS原生插件

    • 使用 ReplayKit Framework
    • 开发 UniApp 原生插件

工作原理

  1. 开发原生插件封装系统API
  2. 在UniApp中调用插件
  3. 获取屏幕流并编码
  4. 通过WebSocket或WebRTC传输

优点

  • ✅ 完全控制（自定义实现）
  • ✅ 性能优化（原生代码）
  • ✅ 无第三方依赖
  • ✅ 可定制化

缺点

  • ❌ 开发成本高（需要原生开发）
  • ❌ 维护成本高
  • ❌ 需要处理平台差异
  • ❌ 需要审核（iOS）

使用场景

  • ✅ 有原生开发能力
  • ✅ 需要完全控制
  • ✅ 不想依赖第三方服务

🎯 方法七：混合方案（推荐）

实现策略

  1. 自动检测环境

    • App环境：优先使用第三方SDK，降级到截图方式
    • H5环境：优先使用WebRTC，降级到截图方式

  2. 智能降级

    • 检测网络质量
    • 检测设备性能
    • 自动选择最优方案

  3. 方案切换

    • 支持手动切换
    • 支持自动切换（根据条件）

优点

  • ✅ 兼容性好（多方案支持）
  • ✅ 性能最优（自动选择）
  • ✅ 用户体验好（无缝切换）

缺点

  • ❌ 实现复杂（多方案集成）
  • ❌ 测试工作量大

使用场景

  • ✅ 需要支持多种环境
  • ✅ 需要最佳用户体验
  • ✅ 有开发资源

📊 完整方法对比表

特性 WebSocket截图 WebRTC HTTP上传 第三方SDK 原生插件 混合方案
实时性 ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
延迟 高（1-2秒） 极低（<100ms） 高（30秒+） 极低（<100ms） 极低（<100ms） 极低（<100ms）
数据量 大（Base64图片） 小（视频编码） 大（文件） 小（视频编码） 小（视频编码） 小（视频编码）
适用环境 App H5浏览器 所有 所有 App 所有
实现复杂度 中 高 低 低 高 很高
权限要求 屏幕录制 无 屏幕录制 屏幕录制 屏幕录制 屏幕录制
网络要求 中 高（P2P） 低 中 中 中
成本 免费 免费 免费 付费 免费 付费/免费
稳定性 中 中 高 高 中 高
历史记录 ❌ ❌ ✅ ❌ ❌ ✅

🎯 下一步优化建议

  1. 优化截图性能

    • 降低截图频率（当前 1 秒/帧）
    • 优化图片压缩算法
    • 使用更高效的编码格式

  2. 增强 WebRTC 支持

    • 开发 App 环境的 WebRTC 原生插件
    • 配置 TURN 服务器（NAT 穿透）

  3. 集成第三方SDK

    • 评估并选择适合的SDK（TRTC/ZEGO/Agora）
    • 开发SDK集成方案
    • 实现自动降级机制

  4. 混合方案

    • 自动检测环境，选择最优方案
    • 支持方案切换和降级

  5. 历史记录

    • 集成 HTTP 上传方式
    • 提供历史截图查看功能

📚 相关文档