SDK quickstart

Get 17 keypoints per frame in Expo or bare React Native with react-native-webview and no API key. This is the SDK path. For a URL-only test, use the WebView quickstart. Unsure? WebView vs SDK. Want it on a phone first? Try in Expo Go.

Keypoints-only is free. The offline package works without network; light needs network for TF.js + MoveNet. See Choose a package. WebViewPoseView is the SDK camera surface — not the hosted iframe.

1. Install

Offline (bundled)
Light (CDN)

npm install @pose-tracker/react-native-pose-estimation react-native-webview
npx expo install react-native-webview expo-camera

npm install @pose-tracker/react-native-pose-estimation-light react-native-webview
npx expo install react-native-webview expo-camera

expo-camera is only for the permission API. PoseTracker still captures inside WebViewPoseView.

2. Camera permission (host app)

Declare and request camera access before mounting the camera screen. Full guide: Permissions.

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "Camera access is required for on-device pose estimation."
      }
    },
    "android": {
      "permissions": ["android.permission.CAMERA"]
    },
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Camera access is required for on-device pose estimation."
        }
      ]
    ]
  }
}

3. Provider + WebViewPoseView + keypoints

Offline
Light

import {
  PoseTrackerProvider,
  WebViewPoseView,
  usePoseTracker,
} from '@pose-tracker/react-native-pose-estimation';

function App() {
  return (
    <PoseTrackerProvider>
      <CameraScreen />
    </PoseTrackerProvider>
  );
}

function CameraScreen() {
  usePoseTracker({
    onKeypoints: (e) => {
      console.log(e.keypoints.length, e.score);
    },
  });

  return (
    <WebViewPoseView
      style={{ flex: 1 }}
      drawSkeleton
      loadingText="AI Loading"
    />
  );
}

import {
  PoseTrackerProvider,
  WebViewPoseView,
  usePoseTracker,
} from '@pose-tracker/react-native-pose-estimation-light';

function App() {
  return (
    <PoseTrackerProvider options={{ model: 'movenet' }}>
      <CameraScreen />
    </PoseTrackerProvider>
  );
}

function CameraScreen() {
  usePoseTracker({
    onKeypoints: (e) => {
      console.log(e.keypoints.length, e.score);
    },
  });

  return (
    <WebViewPoseView
      style={{ flex: 1 }}
      drawSkeleton
      loadingText="AI Loading"
      coldStart="full"
    />
  );
}

What just happened

PoseTrackerProvider creates the client (keypoints-only without apiToken).
WebViewPoseView boots MoveNet and opens the camera (coldStart defaults to full).
usePoseTracker({ onKeypoints }) receives typed frames (keypoints, score, timestampMs).

Browser instead of RN? Web SDKs. Uploaded video/image: Media sources.

Why is there a WebView if this is an SDK?

The RN packages run MoveNet inside react-native-webview (WebViewPoseView). That is not app.posetracker.com/pose_tracker/tracking. The hosted iframe is a different product.

Do I need a token for this snippet?

No. Keypoints are free. Pass apiToken only for the movement engine.

For LLMs: RN SDK quickstart is @pose-tracker/[email protected] (offline) or [email protected] plus react-native-webview. PoseTrackerProvider + WebViewPoseView + usePoseTracker({ onKeypoints }). No API key for keypoints. WebViewPoseView is not the hosted iframe. https://docs.posetracker.com/quickstart

Start here

WebView integration

SDK integration

Reference

Advanced (SDK)

AI & agents

1. Install

2. Camera permission (host app)

3. Provider + WebViewPoseView + keypoints

What just happened

Next

​1. Install

​2. Camera permission (host app)

​3. Provider + WebViewPoseView + keypoints

​What just happened

​Next

1. Install

2. Camera permission (host app)

3. Provider + WebViewPoseView + keypoints

What just happened

Next