别弯腰！使用 MediaPipe 与 Electron 构建 AI 驱动的姿势监测器 🚀
Source: Dev.to
你是不是正趴在键盘前，像个石像鬼一样阅读这篇文章？ 🧙♂️ 别担心，我们都经历过。Tech Neck 是21世纪无声的生产力杀手。但作为开发者，我们不仅仅是抱怨背痛——我们会为它写代码。
在本教程中，我们将构建一个 实时姿势纠正系统。通过利用 实时姿态估计、MediaPipe 和 WebRTC，我们将创建一个桌面应用程序，实时监控你的背部（真的），并在姿势开始走形时发送系统级通知。我们将使用 JavaScript 计算机视觉 将你的摄像头变成高科技的人体工学顾问。
如果你想了解更高级、可投入生产的 AI 模式以及对视觉模型的深入探讨，请访问官方 WellAlly Tech 博客 获取更多灵感！
🏗 架构
在深入代码之前，让我们看看数据如何从你的摄像头流向你的神经系统（通过通知）。
graph TD
A[Webcam / WebRTC] -->|Raw Video Stream| B(MediaPipe Pose Engine)
B -->|Landmark Coordinates| C{Geometry Logic}
C -->|Angle > Threshold| D[Slouch Detected]
C -->|Angle |IPC Communication| F[Electron Main Process]
F -->|System Notification| G[User's Desktop]
G -->|User Sits Up Straight| A🛠 先决条件
要跟随本教程，你需要具备基本的 JavaScript 知识。以下是我们的 “Anti‑Slouch” 技术栈：
- MediaPipe – Google 的跨平台机器学习解决方案强大引擎。
- TensorFlow.js – 在浏览器/Electron 中直接运行模型。
- WebRTC – 处理摄像头流。
- Electron – 将我们的应用包装成桌面工具，可发送系统通知。
👨💻 第一步：设置摄像头流（WebRTC）
首先，我们需要获取视频流。使用 getUserMedia API 是将视频输送到我们的机器学习模型的标准方式。
// renderer.js
async function setupCamera() {
const video = document.getElementById('webcam');
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: 640, height: 480 },
audio: false,
});
video.srcObject = stream;
return new Promise((resolve) => {
video.onloadedmetadata = () => resolve(video);
});
}🧠 第 2步：使用 MediaPipe 检测骨架
MediaPipe 的 Pose 模型提供 33 个 3D 关键点。对于姿势，我们特别关注 鼻子 (0) 和 肩膀 (11, 12)。
import { Pose } from "@mediapipe/pose";
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,
});
pose.onResults(onResults); // We'll define the logic here📐 第3步：“驼背逻辑”（几何计算）
我们如何定义“驼背”？通常是指鼻子与肩膀之间的垂直距离过小，表明头部向前倾斜。
function calculateSlouch(results) {
const landmarks = results.poseLandmarks;
if (!landmarks) return;
// Grab the nose and the average shoulder position
const nose = landmarks[0];
const leftShoulder = landmarks[11];
const rightShoulder = landmarks[12];
const shoulderY = (leftShoulder.y + rightShoulder.y) / 2;
const neckDistance = shoulderY - nose.y;
// If the vertical distance drops below a threshold,
// the user is likely slouching.
const THRESHOLD = 0.15;
if (neckDistance 60_000) {
window.electronAPI.sendAlert(); // IPC to main process
lastAlertTime = Date.now();
}
}🌟 官方的扩展方式
虽然这个面向初学者的版本可以在本地运行，但生产级别的视觉应用需要更强大的处理能力——例如，应对不同的光照条件、摄像头角度，以及为提升性能而进行模型量化。
如果想深入了解在生产环境中优化 MediaPipe 的架构模式，或将大型多模态模型（如 GPT‑4o）集成进高级视觉推理，请访问 wellally.tech/blog。该站点涵盖了从边缘部署到超越简单坐标运算的复杂视觉流水线的全部内容。 🥑
🎯 结论
您刚刚构建了一个能够保护脊柱的实用 AI 助手！🦴 本文涵盖了以下内容：
- 使用 WebRTC 捕获视频。
- 使用 MediaPipe 提取人体关键点。
- 使用简单几何计算驼背指标。
- 通过 Electron 发送操作系统级通知。
保持挺直，保持高效！🚀
使用 MediaPipe
- 应用 Geometry Logic 来检测不良姿势。
- 触发 Electron Notifications 以提醒用户。
下一步
- 添加一个“calibration”按钮，让用户可以将他们的“perfect”姿势设为基准。
- 添加一个仪表盘，以随时间跟踪“Slouch Frequency”。
你怎么看？你会信任 AI 来评判你的姿势吗，还是觉得这有点像“Big Brother”？在评论里告诉我吧！ 👇