跪拜 Guibai
← All articles
Frontend · Backend · JavaScript

Google's 5.5MB Pose Model Runs at 60fps in the Browser, No Backend

By 半刻维度 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Client-side pose estimation that runs at 60fps on a budget CPU eliminates the cost and latency of server-side inference. Any web app can now add real-time body tracking with a 5.5MB download and no backend infrastructure.

Summary

A 5.5MB model from Google's MediaPipe library performs full-body pose estimation entirely in the browser, tracking 33 keypoints across images, video files, and live webcam streams. The lite model achieves roughly 95% accuracy and runs at 60fps even on an entry-level AMD 5500 CPU, with inference taking about 25ms per frame. GPU acceleration is available through WebGL, and a toggle lets developers switch between GPU and CPU delegates to find the faster path for their hardware.

The implementation uses MediaPipe's Tasks Vision API loaded from a CDN, requiring only 10 lines of JavaScript to initialize. A requestAnimationFrame loop throttled to 50ms intervals keeps video and camera feeds smooth without saturating the main thread. The skeleton is drawn in four color-coded groups — head, spine, arms, and legs — with line widths that adapt to canvas size.

A simple heuristic using the y-coordinate gap between shoulders and hips classifies poses as standing, sitting, or lying down. The normalized coordinate output (x, y, z, and confidence score) makes the data immediately usable for downstream applications. Serving the app requires COOP and COEP headers for WASM support, shown here with a minimal Bun server.

Takeaways
MediaPipe's pose_landmarker_lite.task model is 5.5MB and delivers roughly 95% accuracy on 33 body keypoints.
On an AMD 5500 CPU, video pose detection reaches about 60fps with inference times around 25ms per frame.
A single VIDEO-mode model handles images, video files, and webcam streams without switching configurations.
A 50ms throttle on requestAnimationFrame keeps video and camera feeds smooth at roughly 20fps detection rate.
GPU and CPU delegates can be toggled at runtime; the smaller model sometimes runs faster on CPU.
Four color-coded connection groups — head, spine, arms, legs — make the skeleton immediately readable.
A y-coordinate gap between shoulders and hips classifies standing (>0.12), sitting (>0.04), or lying down.
Serving WASM-based models requires Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy headers.
Conclusions

Running pose estimation at 60fps on a budget CPU without a GPU suggests the lite model's architecture is aggressively optimized for inference speed over marginal accuracy gains.

The ability to hot-switch between GPU and CPU delegates at runtime is unusual and lets developers benchmark on actual hardware rather than guessing which path is faster.

Using a single VIDEO running mode for both still images and video simplifies the API surface considerably compared to earlier MediaPipe versions that required separate pipelines.

The standing/sitting/lying heuristic is crude but effective — a reminder that many practical pose classification tasks don't need a second model when simple geometry works.

Concepts & terms
MediaPipe Tasks Vision
Google's JavaScript library for running vision ML models in the browser via WebAssembly. Provides high-level APIs for pose detection, face detection, and other tasks without requiring Python or server infrastructure.
Pose Landmarker Lite
A compressed 5.5MB model that detects 33 body keypoints (x, y, z coordinates plus confidence scores) optimized for real-time performance on consumer hardware.
COOP / COEP Headers
Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy are HTTP headers required to enable SharedArrayBuffer and WebAssembly threading in the browser. Without them, WASM-based ML models cannot load.
WebGL Delegate
A MediaPipe configuration option that routes model inference through the browser's WebGL API for GPU acceleration, as opposed to CPU-only execution.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗