一、项目背景
本项目旨在实现一个基于移动端的实时人体姿态检测系统，用于检测用户的不良姿势（低头、歪头、高低肩等），并提供实时反馈。
整体架构采用：
边缘计算（前端推理） + 云端校验（后端分析）
二、核心技术原理
1️⃣ MoveNet 是什么？
MoveNet 是一个轻量级人体姿态识别模型，可以检测人体 17 个关键点：
(x, y, score)
x, y：关键点坐标score：置信度（是否检测到）
👉 当 score 过低时，说明该关键点未被识别，需要做容错处理
2️⃣ AI 推理本质
AI 的核心是：
矩阵运算（大量浮点计算）
而：
- JavaScript ❌ 不擅长高性能计算
- 需要借助加速方案
3️⃣ 性能加速方案
| 技术 | 作用 | 类比 |
|---|---|---|
| TensorFlow.js | AI 引擎 | 类似 Unity 游戏引擎 |
| MoveNet | 模型算法 | 专门做人骨识别 |
| WebGL | GPU 加速 | 用显卡算 |
| WASM | CPU 加速 | 接近原生性能 |
👉 结论：
WASM ≈ 接近原生速度的 JS 执行方案
4️⃣ 模型加载机制
当用户点击“开始检测”时：
浏览器 → CDN → 下载模型文件（约 20MB .bin）
👉 这个 .bin 文件可以理解为：
AI 的“记忆”（训练好的权重数据）
三、姿态检测算法设计
本项目并非简单判断，而是设计了一套多维度姿态分析模型👇
1️⃣ 检测指标
| 姿态问题 | 判定方式 | 目的 |
|---|---|---|
| 前倾（低头） | 鼻子 vs 肩膀距离 | 防“手机脖” |
| 高低肩 | 左右肩 y 差值 | 检测脊柱问题 |
| 歪头 | 耳朵/眼睛连线斜率 | 矫正姿势 |
| 距离过近 | 肩膀宽度（像素） | 保护视力 |
2️⃣ 多模态判定算法
引入多个参考轴：
- 肩轴线（Shoulder Axis）
- 耳轴线（Ear Axis）
👉 不再单点判断，而是：
多关键点联合分析
3️⃣ 加权评分模型
采用权重计算：
总评分 = 0.6 × 低头 + 0.2 × 歪头 + 0.2 × 高低肩
👉 可描述为：
多约束姿态评价算法
4️⃣ 动态状态机反馈
系统不再只输出：
异常 ❌
而是：
⚠️ 低头
⚠️ 歪头
⚠️ 距离过近
👉 提供可解释性反馈
四、架构设计
整体流程：
前端（WebView）
↓
TensorFlow.js 实时推理
↓
关键点分析
↓
Base64截图 + 状态
↓
uni.postMessage
↓
App（uniapp）
↓
uni.request
↓
后端（SpringBoot）
↓
AI复核 / 存储
五、踩坑与问题分析（重点）
🚨 1️⃣ WebView 摄像头权限问题
问题：
WebView 不允许直接调用摄像头（非安全上下文）
限制条件：
必须满足：
- https
- 或 localhost
✅ 解决方案
👉 使用：
内网穿透（让本地服务变成 https）
从而实现：
WebView → 加载远程 AI 页面 → 调用摄像头 ✔
🚨 2️⃣ 模型加载问题
最初方案：
模型放前端 ❌
问题：
- WebView 限制
- 资源加载复杂
✅ 优化方案
模型 + HTML → 放后端
运行流程：
App加载页面 → 页面从CDN下载模型 → 本地推理
六、性能瓶颈分析（后置摄像头卡顿）
🚨 问题表现
- 前置摄像头 ✔ 流畅
- 后置摄像头 ❌ 卡顿严重
🔍 原因一：自动对焦（Auto-Focus）
| 摄像头 | 特性 |
|---|---|
| 前置 | 定焦（轻量） |
| 后置 | 实时对焦（高开销） |
👉 问题本质：
对焦系统 与 AI 推理 抢占 GPU / ISP 资源
🔍 原因二：高码率视频流
| 摄像头 | 数据特点 |
|---|---|
| 前置 | 压缩视频流 |
| 后置 | 高分辨率原始数据 |
👉 即使设置：
320x240
👉 实际：
可能仍然先采集 1080P → 再压缩
🔍 原因三：Canvas 重绘开销
drawImage(video, ...)
👉 每一帧：
- 拷贝像素数据
- GPU → CPU
👉 带宽爆炸 💥
七、最终优化方向
✅ 已采取措施
- 降低分辨率
- 控制帧率
- 限制检测频率
🚀 可优化方向
- 使用 TensorFlow Lite（原生推理）
- 降低视频流质量
- ROI裁剪（只检测上半身）
- WebGL 优先于 WASM
八、总结（面试可用）
👉 本项目的核心亮点：
- ✅ 边缘计算 + 云端复核架构
- ✅ 多关键点融合姿态分析算法
- ✅ 加权评分模型
- ✅ WebView + AI 推理落地实践
- ✅ 解决移动端性能瓶颈问题
💡 一句话总结
在移动端受限环境下，通过 TensorFlow.js + MoveNet 实现实时姿态检测，并结合多维度算法与系统优化，完成从“能跑”到“可用”的工程落地。
Comments NOTHING