> ## Documentation Index
> Fetch the complete documentation index at: https://docs.posetracker.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web SDKs

> Browser pose estimation — vanilla JS + React (online TF.js, no bundled weights).

# Web SDKs

PoseTracker ships **browser** packages alongside the React Native offline/light
SDKs. Web packages always use the **light** delivery model: TensorFlow\.js + a
remote `modelUrl` (no MoveNet weights in npm). Product line: **pose-estimation-web**.

| Package                                                                                                            | Role                                                                       |
| ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
| [`@pose-tracker/pose-estimation-web`](https://www.npmjs.com/package/@pose-tracker/pose-estimation-web)             | Vanilla core (ESM / CJS / script tag)                                      |
| [`@pose-tracker/pose-estimation-web-react`](https://www.npmjs.com/package/@pose-tracker/pose-estimation-web-react) | Thin React wrapper (`PoseTrackerProvider`, `PoseCamera`, `usePoseTracker`) |

> **Status:** published on npm as **v0.2.0**.
> Source: [pose-estimation-web](https://github.com/Movelytics/pose-estimation-web) ·
> [pose-estimation-web-react](https://github.com/Movelytics/pose-estimation-web-react).
> Parity target: RN package `@pose-tracker/react-native-pose-estimation-light`.

## Install (npm)

```bash theme={null}
npm install @pose-tracker/pose-estimation-web @tensorflow/tfjs
# Optional BlazePose (bundlers / React):
npm install @tensorflow-models/pose-detection
# React:
npm install @pose-tracker/pose-estimation-web-react react react-dom
```

## Script tag (CDN)

Load **TensorFlow\.js first**, then the PoseTracker IIFE. Global: `window.PoseTracker`.

```html theme={null}
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pose-tracker/pose-estimation-web@0.2.0/dist/pose-tracker.global.js"></script>
<script>
  const pt = PoseTracker.createPoseTracker({ model: 'movenet', drawSkeleton: true });
  pt.mount('#root');
  pt.start(); // webcam (default)
  // Video / image:
  // await pt.setSource({ type: 'video', src: file }); await pt.start();
  // await pt.setSource({ type: 'image', src: file }); await pt.start();
  // await pt.analyze(); // re-run still image
</script>
```

Default MoveNet URL:
`https://app.posetracker.com/scripts/tmp_model_to_remove.json`

## Input sources (v0.2)

Default is **camera**. Full tables, RN parity, CORS, and copy-paste samples:
[Media sources](/media-sources).

| Source               | API                                                                              | Events                            |
| -------------------- | -------------------------------------------------------------------------------- | --------------------------------- |
| **Camera** (default) | `{ type: 'camera', facingMode? }` or omit                                        | Continuous `keypoints`            |
| **Video**            | `{ type: 'video', src: File \| Blob \| URL \| HTMLVideoElement }`                | Stream while playing              |
| **Image**            | `{ type: 'image', src: File \| Blob \| URL \| HTMLImageElement \| ImageBitmap }` | One shot; re-run with `analyze()` |

React: `<PoseCamera source="video" sourceFile={file} />` (or `sourceUrl`).

## What works (V1 / V0.2)

* MoveNet Lightning keypoints (`getUserMedia` + canvas overlay)
* Uploaded video / still image pose estimation
* BlazePose via optional peer **or** CDN (`window.poseDetection` / dynamic jsDelivr inject for IIFE)
* Custom `modelUrl` (TF.js graph)
* Free keypoints without API key; plan-gated watermark
* `preload` / `warmup` with `coldStart: 'basic' | 'full'`
* `configure(apiToken)` handshake + remote engine download + sealed cache
* `startExercise` / `stopExercise` + counter / posture / angles / jumps events
* Features gating (`angles`, `recommendations`, `progression`, `keypoints`, `minGrade`)
* Skeleton overlay via `skeletonDef` / `skeletonUuid`
* Placement box during posture guidance

## Try the examples

```bash theme={null}
cd posetracker-web-sdk && npm install && npm run build
npm run example:vanilla   # http://localhost:5174
npm run example:react     # http://localhost:5173
# Exercises: append ?apiToken=YOUR_KEY
```

## Quick links

* [Media sources](/media-sources) — camera / video / image (RN + web)
* GitHub: [pose-estimation-web](https://github.com/Movelytics/pose-estimation-web) · [pose-estimation-web-react](https://github.com/Movelytics/pose-estimation-web-react)
* npm: [`@pose-tracker/pose-estimation-web`](https://www.npmjs.com/package/@pose-tracker/pose-estimation-web) · [`@pose-tracker/pose-estimation-web-react`](https://www.npmjs.com/package/@pose-tracker/pose-estimation-web-react)
* Source (local): workspace `posetracker-web-sdk/`
* Agent sync rules: `posetracker-web-sdk/docs/DUAL_WEB_SDK_CHANGES.md`
* RN packages: [Choose a package](/choose-package)

## Browser deltas vs RN light

* No WebView / Vision backends — native DOM video + canvas
* AdaptiveChoice quality ladder is simplified (host `idealWidth` / `idealHeight`)
* Engine cache uses `localStorage` (size limits) instead of native FS
* Remote video/image URLs need CORS; prefer local File / blob URLs