> ## 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 with npm — vanilla JS or React. Online TF.js, free keypoints, same exercise engine as React Native.

PoseTracker’s **web SDKs** are first-class npm packages for the browser — not an iframe. They use the **light** delivery model (TensorFlow\.js + remote `modelUrl`). For a URL embed instead, use the [WebView quickstart](/webview/quickstart). Path choice: [WebView vs SDK](/choose-integration).

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

Parity target: RN **light**. Source: [pose-estimation-web](https://github.com/Movelytics/pose-estimation-web) · [pose-estimation-web-react](https://github.com/Movelytics/pose-estimation-web-react).

There is **no WebView backend** on web — native DOM video + canvas.

## Install

```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** (4.22.0 when these docs were written), then the PoseTracker IIFE. Global: `window.PoseTracker`.

```html theme={null}
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pose-tracker/pose-estimation-web/dist/pose-tracker.global.js"></script>
<script>
  const pt = PoseTracker.createPoseTracker({ model: 'movenet', drawSkeleton: true });
  pt.mount('#root');
  pt.start(); // webcam
</script>
```

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

## Input sources

Default is **camera**. Tables and CORS: [Media sources](/media-sources).

| Source | API | Events |
| - | - | - |
| **Camera** | `{ 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()` |
| **Your camera** | `warmupExternal()` then `processFrame({ image, width, height, timestampMs })` | Live pump, nothing drawn — [External frames](/external-frames) |

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

## What works

* MoveNet Lightning keypoints (`getUserMedia` + canvas overlay)
* Uploaded video / still image
* BlazePose via `model: 'blazepose'` (not `features.blazepose`)
* Free keypoints without API key; plan-gated watermark
* `preload` / `warmup` with `coldStart: 'basic' | 'full'`
* `configure(apiToken)` + remote exercise engine — [API key](/api-key)
* `startExercise` / `stopExercise` + counter / posture / jumps
* Feature flags (`angles`, `recommendations`, `progression`, `keypoints`, `minGrade`)

## Browser deltas vs RN light

* No WebView / Vision backends
* Simplified quality ladder (`idealWidth` / `idealHeight`)
* Engine cache uses `localStorage` (size limits)
* Remote video/image URLs need CORS; prefer local File / blob URLs

## Next

* [Media sources](/media-sources)
* [Provider & client](/reference/provider-client)
* RN packages: [Choose a package](/choose-package)

<Note>
  **For LLMs:** Web SDK is `@pose-tracker/pose-estimation-web` 0.3.0 or `-web-react` 0.3.0, not the iframe. No WebView backend. [https://docs.posetracker.com/web-sdks](https://docs.posetracker.com/web-sdks)
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.