Building a Real-Time Posture Monitoring System in the Browser (MediaPipe + PiP)

Manan Verma — Tue, 10 Mar 2026 16:00:10 +0000

Browsers Kill Background Tabs. Here’s How I Kept My Computer Vision Engine Alive.

Most browser-based computer vision apps quietly die the moment you minimize Chrome.

I needed mine to keep running.

I’ve been building Posture+, a browser-based posture monitoring system using computer vision.

The system analyzes pose keypoints from the webcam and computes a Posture Stability Index (PSI) — a metric that tracks posture drift over time.

The underlying temporal stability framework behind PSI has also been accepted for presentation at IEEE CSPA 2026.

You can try the live demo here:

posture-plus.vercel.app

The system runs entirely in the browser — no installation required.

It even keeps running when Chrome is minimized.

But while building it, I ran into a big problem.

Modern browsers aggressively suspend background tabs.

That means the moment the user switches tabs or minimizes Chrome, the entire posture monitoring engine stops.

Which defeats the purpose of a posture monitoring tool.

People don’t sit staring at a monitoring tab all day.

The Problem

Most browsers throttle background tabs.

JavaScript execution slows down.

Rendering pauses.

Real-time processing pipelines stall.

For applications that rely on continuous camera processing, this becomes a major issue.

The Workaround

The solution I implemented uses Picture-in-Picture (PiP).

Instead of streaming the webcam directly, the system renders posture analysis to a canvas.

That canvas is then converted into a video stream using:

canvas.captureStream()

This converts the rendered canvas into a real video stream that the browser treats like active media playback.
This stream feeds a hidden video element.

When the tab becomes hidden or the browser is minimized, the system automatically switches the stream into PiP mode.

Since PiP video must remain active, the browser keeps the pipeline alive.

This allows the posture engine to continue running even when the main tab is not visible.

Result

Now posture monitoring continues while the user works normally.

The floating PiP window shows:

pose keypoints
posture overlay
PSI score

Even if Chrome is minimized, the posture engine keeps running.
The system only stops when the browser itself is closed.

Tech Stack

Posture+ is built using:

React
TypeScript
MediaPipe
Canvas API
Picture-in-Picture API

GitHub

You can explore the project here:

DarkBytezz / PosturePlus

First in the market, A full fledged real time temporal posture monitoring system

Posture+

Real-Time AI Posture Monitoring — No Wearables Required

🌐 posture-plus.vercel.app

Posture+ is a real-time posture monitoring system that runs entirely in your browser using your webcam. It detects posture instability through temporal analysis — identifying sustained slouch patterns rather than momentary dips.

No wearables. No sensors. No recordings. Just your laptop camera and five seconds to calibrate.

Why Posture+

Most posture tools work like this:

if shoulder_angle > threshold:
    alert()

This misses the point. A single bad frame doesn't mean bad posture. Posture+ instead evaluates how posture behaves over time, detecting:

Sustained forward head posture
Lateral head tilt
Shoulder imbalance
Posture fatigue during long sessions

Alerts only fire when instability is genuinely sustained — not on random dips.

Research Context

Posture+ is built on a research framework developed for real-time posture stability analysis. The work has been accepted for presentation at IEEE CSPA 2026, modeling…

View on GitHub

If you're building real-time applications in the browser, I'm curious how others deal with background throttling.

DEV Community: Manan Verma