从像素到物理治疗：使用 MediaPipe 和 React 构建实时姿势校正系统

Source: Dev.to

架构：从帧到反馈

为了在浏览器中实现“实时”（30+ FPS）性能，我们需要一个最小化延迟的流水线。通过使用 WebAssembly (WASM)，MediaPipe 能以接近本地速度处理视频帧。

graph TD
    A[Webcam Stream] --> B[React Camera Component]
    B --> C[MediaPipe Pose Engine]
    C --> D{Keypoint Detection}
    D --> E[Angle Calculation Logic]
    E --> F[Visual Overlay / Canvas]
    E --> G[Speech Synthesis Feedback]
    G --> H[User: "Straighten your back!"]

前置条件

• MediaPipe Pose – 高保真人体追踪。
• React – UI 层。
• WebAssembly – 在浏览器中高效运行机器学习模型。

步骤 1：初始化姿态引擎

设置 MediaPipe Pose 监听器，它会检测人体上的 33 个 3D 关键点。

import { Pose } from "@mediapipe/pose";
import * as cam from "@mediapipe/camera_utils";

const pose = new Pose({
  locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`,
});

pose.setOptions({
  modelComplexity: 1,
  smoothLandmarks: true,
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5,
});

步骤 2：数学——计算关节角度

在物理治疗中我们需要关节 角度。以深蹲为例，计算髋、膝、踝之间的角度。

/**
 * Calculates the angle between three points (A, B, C)
 * B is the vertex (e.g., the knee)
 */
function calculateAngle(a, b, c) {
  const radians =
    Math.atan2(c.y - b.y, c.x - b.x) - Math.atan2(a.y - b.y, a.x - b.x);
  let angle = Math.abs((radians * 180.0) / Math.PI);
  if (angle > 180.0) angle = 360 - angle;
  return angle;
}

// Example usage in the MediaPipe results callback:
const kneeAngle = calculateAngle(
  results.poseLandmarks[24], // Hip
  results.poseLandmarks[26], // Knee
  results.poseLandmarks[28]  // Ankle
);

步骤 3：实时反馈逻辑

将角度值转化为可操作的语音反馈。

const provideFeedback = (angle) => {
  const synth = window.speechSynthesis;

  if (angle > 160) {
    // Standing up too early
    return "Lower your hips more.";
  } else if (angle < 90) {
    // Too deep for some patients
    const utter = new SpeechSynthesisUtterance(
      "Great depth, keep your back straight!"
    );
    synth.speak(utter);
  }
};

向生产环境扩展

周末原型是个很好的起点，但生产级的远程理疗平台需要：

• 数据持久化与分析。
• 符合 HIPAA 的存储和传输。
• 针对嘈杂环境的高级过滤。
• 多人追踪或与 HL7/FHIR 标准的集成。

欲获取更深入的指导，请访问 wellally.tech/blog。

结论：你的浏览器就是运动学家

通过将 MediaPipe 的骨骼追踪与简单的三角函数相结合，我们可以构建一个在浏览器中直接“观察”并“纠正”人体动作的系统。这展示了现代 Vision AI 的力量——将专业知识带给任何拥有摄像头的人。

接下来该做什么？

• 使用状态机添加计数器。
• 集成 Chart.js 仪表盘，以跟踪膝关节活动范围随时间的变化。
• 与社区分享你的进展！