{"slug": "fix-your-developer-slouch-building-a-real-time-ai-posture-monitor-with-mediapipe", "title": "Fix Your \"Developer Slouch\": Building a Real-time AI Posture Monitor with MediaPipe and Electron", "summary": "A developer built a real-time AI posture monitor using MediaPipe, WebRTC, and Electron that detects forward head posture and sends desktop notifications when the user slouches. The application calculates the neck angle from webcam video frames using MediaPipe Pose landmarks and triggers a system notification if the angle exceeds 30 degrees.", "body_md": "We’ve all been there. You start your morning feeling like a Productivity God, sitting straight and typing at 120 WPM. Fast forward four hours, and you've morphed into a literal shrimp, face inches away from the monitor, hunting for a missing semicolon. 🦐\n\nIn this era of remote work, **real-time posture correction** and **computer vision for health** have become more than just \"cool projects\"—they are spinal lifesavers. Today, we’re going to build a desktop application using **MediaPipe**, **WebRTC**, and **Electron** that monitors your neck angle and sends a desktop notification the moment you start slouching.\n\nBy leveraging **MediaPipe Pose** and **TensorFlow.js**, we can calculate the **Forward Head Posture (FHP)** ratio with surgical precision directly in the browser environment.\n\nBefore we dive into the code, let’s look at how the data flows from your webcam to that \"Sit up straight!\" notification.\n\n``` php\ngraph TD\n    A[Webcam Feed] -->|MediaStream| B(WebRTC API)\n    B -->|Video Frames| C[MediaPipe Pose Model]\n    C -->|Landmarks| D{Geometry Engine}\n    D -->|Calculate Ear-Shoulder Angle| E{Threshold Check}\n    E -->|Angle > 30°| F[Electron Main Process]\n    F -->|Trigger| G[System Desktop Notification]\n    E -->|Healthy| H[Continue Monitoring]\n    style G fill:#f96,stroke:#333,stroke-width:2px\n```\n\nTo follow along, you'll need the following tech stack:\n\nFirst, we need to grab the camera feed. In a modern browser environment (or Electron's Chromium), we use `navigator.mediaDevices.getUserMedia`\n\n.\n\n``` js\nasync function setupCamera() {\n  const videoElement = document.getElementById('input_video');\n  const stream = await navigator.mediaDevices.getUserMedia({\n    video: { width: 640, height: 480 },\n    audio: false\n  });\n  videoElement.srcObject = stream;\n  return new Promise((resolve) => {\n    videoElement.onloadedmetadata = () => resolve(videoElement);\n  });\n}\n```\n\nMediaPipe provides a pre-trained model called `BlazePose`\n\nthat gives us 33 key points. For posture, we specifically care about the **Ears (Landmarks 7, 8)** and **Shoulders (Landmarks 11, 12)**.\n\n``` js\nconst pose = new Pose({\n  locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`,\n});\n\npose.setOptions({\n  modelComplexity: 1,\n  smoothLandmarks: true,\n  minDetectionConfidence: 0.5,\n  minTrackingConfidence: 0.5\n});\n\npose.onResults(onResults);\n```\n\nThe \"Forward Head Posture\" (FHP) is often measured by the angle between the **Tragus (ear)** and the **C7 vertebrae (shoulder level)**.\n\nIn our code, we calculate the angle of the line connecting the ear and the shoulder relative to a vertical line. If that angle exceeds a certain threshold (usually 25-30 degrees), you're officially slouching.\n\n``` js\nfunction calculateNeckAngle(ear, shoulder) {\n    const radians = Math.atan2(shoulder.y - ear.y, shoulder.x - ear.x);\n    let angle = Math.abs(radians * 180.0 / Math.PI);\n\n    // We want the angle relative to the vertical axis\n    return 90 - angle; \n}\n\nfunction onResults(results) {\n  if (!results.poseLandmarks) return;\n\n  const leftEar = results.poseLandmarks[7];\n  const leftShoulder = results.poseLandmarks[11];\n\n  const neckAngle = calculateNeckAngle(leftEar, leftShoulder);\n\n  if (neckAngle > 30) {\n     triggerWarning();\n  }\n}\n```\n\nSince this is an Electron app, we don't just want a browser alert. We want a native system notification that works even if the app is minimized.\n\n```\n// Inside Electron's Renderer Process\nfunction triggerWarning() {\n  new Notification('Posture Alert! 🚨', {\n    body: 'You are leaning too far forward. Sit back and relax your shoulders.',\n    silent: false,\n  });\n}\n```\n\nWhile this \"shrimp-detector\" is a fantastic weekend project, building production-ready AI applications requires a deeper dive into model optimization and state management.\n\nFor more **advanced patterns**, **production-ready vision pipelines**, and deep dives into the latest AI architectural shifts, I highly recommend checking out the official resource: ** WellAlly Tech Blog**. They cover everything from edge deployment to optimizing TensorFlow models for lower-end hardware, which was a huge source of inspiration for the performance tweaks in this build.\n\nCongratulations! You've just built a computer vision-powered health monitor. By combining **MediaPipe's** lightweight inference with **Electron's** system access, we've created a tool that provides real value to anyone spending 8+ hours at a desk.\n\n**Next Steps for you:**\n\nAre you going to try this out, or are you currently reading this while slouching? (I caught you!) Let me know in the comments below! 👇", "url": "https://wpnews.pro/news/fix-your-developer-slouch-building-a-real-time-ai-posture-monitor-with-mediapipe", "canonical_source": "https://dev.to/beck_moulton/fix-your-developer-slouch-building-a-real-time-ai-posture-monitor-with-mediapipe-and-electron-1moc", "published_at": "2026-07-04 00:17:00+00:00", "updated_at": "2026-07-04 00:48:52.728332+00:00", "lang": "en", "topics": ["computer-vision", "machine-learning", "developer-tools", "ai-products"], "entities": ["MediaPipe", "Electron", "WebRTC", "TensorFlow.js", "BlazePose"], "alternates": {"html": "https://wpnews.pro/news/fix-your-developer-slouch-building-a-real-time-ai-posture-monitor-with-mediapipe", "markdown": "https://wpnews.pro/news/fix-your-developer-slouch-building-a-real-time-ai-posture-monitor-with-mediapipe.md", "text": "https://wpnews.pro/news/fix-your-developer-slouch-building-a-real-time-ai-posture-monitor-with-mediapipe.txt", "jsonld": "https://wpnews.pro/news/fix-your-developer-slouch-building-a-real-time-ai-posture-monitor-with-mediapipe.jsonld"}}