Skip to content

About

Browser pose estimation SDK (vanilla JS) — TF.js + remote MoveNet/BlazePose. Script-tag IIFE + ESM. Free keypoints; optional API-key exercise engine.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

PoseTracker is a real-time pose estimation SDK and API for fitness and rehab apps. It runs MoveNet on-device on React Native, iOS, Android and the web. Keypoints are free. An optional API key adds rep counting, joint angles and a form score.

npm

Guide: https://www.posetracker.com/news/javascript-react-pose-estimation-sdk

Docs: https://docs.posetracker.com/web-sdks

React Native: https://www.posetracker.com/news/react-native-pose-estimation-expo

@pose-tracker/pose-estimation-web

Vanilla browser pose estimation (MoveNet / BlazePose / custom modelUrl) + remote exercise engine after configure(apiToken).

Default model: https://app.posetracker.com/scripts/tmp_model_to_remove.json

Install (npm)

npm install @pose-tracker/pose-estimation-web @tensorflow/tfjs
# Optional — BlazePose in bundlers (React / Vite). Vanilla IIFE can use CDN.
npm install @tensorflow-models/pose-detection
import { createPoseTracker } from '@pose-tracker/pose-estimation-web';

const pt = createPoseTracker({ model: 'movenet' });
pt.mount('#root');
await pt.start(); // default source = camera (webcam)
pt.on('keypoints', (e) => console.log(e.keypoints));

// BlazePose (peer or CDN window.poseDetection / auto-inject):
await pt.setModel('blazepose');

// Uploaded video / still image:
await pt.setSource({ type: 'video', src: videoFile }); // File | Blob | URL | HTMLVideoElement
await pt.start();
await pt.setSource({ type: 'image', src: imageFile });
await pt.start();       // single-shot keypoints
await pt.analyze();     // re-run on the same image

Input sources

PoseSource Behavior
{ type: 'camera', facingMode? } Live getUserMedia (default)
{ type: 'video', src } File / blob URL / <video> — stream while playing
{ type: 'image', src } File / blob URL / <img> / ImageBitmap — one shot (+ analyze())

Full tables (RN parity, CORS, React): monorepo docs/MEDIA_SOURCES.md · public https://docs.posetracker.com/media-sources

External frames (your camera, our data)

Full guide (getUserMedia, React, native cameras): https://docs.posetracker.com/external-frames

Optional. Use it when your page already owns the camera or the frames (your own <video>, WebRTC, a canvas pipeline) and you only need the data. No mount(), no getUserMedia, and nothing is drawn. Pose estimation and the exercise engine run on every frame, and every event you would get from the camera flow is emitted: keypoints, posture/placement, counter, form score.

const pt = createPoseTracker({ model: 'movenet' });
await pt.configure('YOUR_API_KEY'); // only needed for exercises
await pt.warmupExternal();
pt.startExercise('squat');
pt.on('counter', (e) => console.log(e.count)); // listeners still fire

// For each frame (ImageBitmap / <img> / <canvas> / <video>, or base64 / uri):
const { dropped, pose, events } = await pt.processFrame({
  image: bitmap,
  width: bitmap.width,
  height: bitmap.height,
  timestampMs: performance.now(),
  mirrored: true, // front camera (default)
});
  • One frame in flight at a time: an overlapping call resolves at once with { dropped: true, pose: lastPose, events: [] }.
  • Prefer image over base64, and keep frames small (longest side about 256 px).
  • The engine is temporal: push frames in order and keep the same session.
  • Don't mix the two flows. processFrame throws while start() is running.

Script tag (CDN)

The IIFE build exposes a PoseTracker global (PoseTracker.createPoseTracker, …).

Load TensorFlow.js first, then the SDK. Order matters.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PoseTracker</title>
    <!-- 1) TensorFlow.js (peer — required before PoseTracker) -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
    <!-- 2) PoseTracker IIFE (jsDelivr / unpkg both work) -->
    <script src="https://cdn.jsdelivr.net/npm/@pose-tracker/pose-estimation-web@0.3.0/dist/pose-tracker.global.js"></script>
  </head>
  <body>
    <div id="root" style="width: 100%; height: 100vh; background: #111"></div>
    <script>
      const pt = PoseTracker.createPoseTracker({
        model: 'movenet',
        drawSkeleton: true,
        // source defaults to camera; also: { type:'video'|'image', src }
      });
      pt.mount('#root');
      pt.start().catch(console.error); // webcam
      // pt.setSource({ type: 'image', src: file }).then(() => pt.start());
      pt.on('keypoints', (e) => console.log(e.keypoints.length));
    </script>
  </body>
</html>

Equivalent unpkg URL:

https://unpkg.com/@pose-tracker/pose-estimation-web@0.3.0/dist/pose-tracker.global.js

Omitting /dist/... also works — package.json jsdelivr / unpkg fields point at the IIFE.

Optional BlazePose (CDN)

Preload pose-detection after TF.js (or omit — the SDK can inject the same CDN URL):

<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection@2.1.3/dist/pose-detection.min.js"></script>

Global API (IIFE)

Global Notes
PoseTracker.createPoseTracker(options?) Main factory
PoseTracker.PoseCamera / mount helpers Camera helper
PoseTracker.configure Standalone configure helper
PoseTracker.DEFAULT_MOVENET_LIGHTNING_URL Default model URL
PoseTracker.SDK_VERSION / SDK_NAME Package identity

BlazePose maps to the same COCO-17 keypoints event shape as MoveNet (extra face/hand/foot landmarks dropped). It is heavier than MoveNet Lightning.

Watermark

Freemium watermark now links to posetracker.com. On a free or keyless session the live view shows “Powered by PoseTracker”, opening https://www.posetracker.com/?utm_source=watermark&utm_medium=web-sdk. Developer and Business plans hide it. Pass showWatermark: false to remove it on a session that would otherwise show it.

See monorepo root README for exercises + examples.

About

Browser pose estimation SDK (vanilla JS) — TF.js + remote MoveNet/BlazePose. Script-tag IIFE + ESM. Free keypoints; optional API-key exercise engine.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages