@pose-tracker/pose-estimation-web-react 0.1.0 → 0.3.0

package/README.md

@@ -17,6 +17,8 @@ import {
 function Screen() {
   usePoseTracker({ onKeypoints: (e) => console.log(e.keypoints.length) });
   return <PoseCamera style={{ height: 480 }} />;
+  // Video / image: <PoseCamera source="image" sourceFile={file} />
+  // or sourceUrl — see docs/MEDIA_SOURCES.md · https://docs.posetracker.com/media-sources
 }
 
 export function App() {

package/dist/index.cjs

@@ -8,16 +8,23 @@ var jsxRuntime = require('react/jsx-runtime');
 var PoseTrackerContext = react.createContext(null);
 function PoseTrackerProvider({
   apiToken,
+  engine,
   options,
   autoStart = true,
   autoPreload = false,
   children
 }) {
   const merged = react.useMemo(
-    () => ({ ...options, apiToken: apiToken ?? options?.apiToken }),
+    () => ({
+      ...options,
+      apiToken: apiToken ?? options?.apiToken,
+      engine: engine ?? options?.engine
+    }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       apiToken,
+      engine,
+      options?.engine,
       options?.model,
       options?.modelUrl,
       options?.facingMode,
@@ -76,6 +83,12 @@ function PoseTrackerProvider({
     (model, modelUrl) => client.setModel(model, modelUrl),
     [client]
   );
+  const setSource = react.useCallback(
+    (...args) => client.setSource(...args),
+    [client]
+  );
+  const analyze = react.useCallback(() => client.analyze(), [client]);
+  const getSource = react.useCallback(() => client.getSource(), [client]);
   const getAvailableExercises = react.useCallback(() => client.getAvailableExercises(), [client]);
   const getAvailableCustomExercises = react.useCallback(
     () => client.getAvailableCustomExercises(),
@@ -106,6 +119,9 @@ function PoseTrackerProvider({
       startExercise,
       stopExercise,
       setModel,
+      setSource,
+      analyze,
+      getSource,
       getAvailableExercises,
       getAvailableCustomExercises,
       addEventListener,
@@ -127,6 +143,9 @@ function PoseTrackerProvider({
       startExercise,
       stopExercise,
       setModel,
+      setSource,
+      analyze,
+      getSource,
       getAvailableExercises,
       getAvailableCustomExercises,
       addEventListener,
@@ -150,6 +169,9 @@ function PoseCamera({
   style,
   className,
   position,
+  source,
+  sourceUrl,
+  sourceFile,
   drawSkeleton,
   drawPlacementBox,
   placementPaddingPercent,
@@ -170,6 +192,9 @@ function PoseCamera({
     if (!el) return;
     client.updateOptions({
       ...position ? { position } : {},
+      ...source !== void 0 ? { source } : {},
+      ...sourceUrl !== void 0 ? { sourceUrl } : {},
+      ...sourceFile !== void 0 ? { sourceFile } : {},
       ...typeof drawSkeleton === "boolean" ? { drawSkeleton } : {},
       ...typeof drawPlacementBox === "boolean" ? { drawPlacementBox } : {},
       ...typeof placementPaddingPercent === "number" ? { placementPaddingPercent } : {},
@@ -184,7 +209,13 @@ function PoseCamera({
     const shouldStart = autoStartProp ?? providerAutoStart;
     if (shouldStart && !startedRef.current) {
       startedRef.current = true;
-      client.start().catch(() => {
+      const boot = async () => {
+        if (source !== void 0) {
+          await client.setSource(source, { sourceUrl, sourceFile });
+        }
+        await client.start();
+      };
+      boot().catch(() => {
       });
     }
     return () => {
@@ -193,6 +224,11 @@ function PoseCamera({
       _registerMountHost(null);
     };
   }, [client]);
+  react.useEffect(() => {
+    if (!startedRef.current || source === void 0) return;
+    void client.setSource(source, { sourceUrl, sourceFile }).catch(() => {
+    });
+  }, [client, source, sourceUrl, sourceFile]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -316,10 +352,26 @@ Object.defineProperty(exports, "SDK_VERSION", {
   enumerable: true,
   get: function () { return poseEstimationWeb.SDK_VERSION; }
 });
+Object.defineProperty(exports, "V4_ONLY_EXERCISE_IDS", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.V4_ONLY_EXERCISE_IDS; }
+});
 Object.defineProperty(exports, "createPoseTracker", {
   enumerable: true,
   get: function () { return poseEstimationWeb.createPoseTracker; }
 });
+Object.defineProperty(exports, "normalizeEngineChannel", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.normalizeEngineChannel; }
+});
+Object.defineProperty(exports, "normalizePoseSource", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.normalizePoseSource; }
+});
+Object.defineProperty(exports, "requiresEngineV4", {
+  enumerable: true,
+  get: function () { return poseEstimationWeb.requiresEngineV4; }
+});
 Object.defineProperty(exports, "resolvePoseModel", {
   enumerable: true,
   get: function () { return poseEstimationWeb.resolvePoseModel; }

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { PoseTrackerClient, PoseTrackerStatus, PoseTrackerMode, ErrorEvent, SdkManifest, ExerciseConfig, PreloadOptions, StartExerciseOptions, PoseTrackerClientOptions, PoseTrackerEventListener, ClassicNativeMessage, SkeletonDefinition, PoseTrackerCallbacks } from '@pose-tracker/pose-estimation-web';
-export { COCO_KEYPOINT_NAMES, ColdStartMode, CounterEvent, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, ErrorEvent, ExerciseConfig, InitializationEvent, Keypoint, KeypointsEvent, Pose, PoseModelAlias, PoseTracker, PoseTrackerCallbacks, PoseTrackerClient, PoseTrackerClientOptions, PoseTrackerOptions, PostureEvent, PreloadOptions, SDK_NAME, SDK_VERSION, SdkManifest, StartExerciseOptions, createPoseTracker, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
+import { PoseTrackerClient, PoseTrackerStatus, PoseTrackerMode, ErrorEvent, SdkManifest, ExerciseConfig, PreloadOptions, StartExerciseOptions, PoseTrackerClientOptions, PoseTrackerEventListener, ClassicNativeMessage, PoseSource, PoseSourceType, SkeletonDefinition, PoseTrackerCallbacks } from '@pose-tracker/pose-estimation-web';
+export { COCO_KEYPOINT_NAMES, ColdStartMode, CounterEvent, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, EngineChannel, ErrorEvent, ExerciseConfig, InitializationEvent, Keypoint, KeypointsEvent, Pose, PoseModelAlias, PoseSource, PoseSourceType, PoseTracker, PoseTrackerCallbacks, PoseTrackerClient, PoseTrackerClientOptions, PoseTrackerOptions, PostureEvent, PreloadOptions, SDK_NAME, SDK_VERSION, SdkManifest, StartExerciseOptions, V4_ONLY_EXERCISE_IDS, createPoseTracker, normalizeEngineChannel, normalizePoseSource, requiresEngineV4, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
 import React from 'react';
 
 /**
@@ -20,6 +20,9 @@ interface PoseTrackerContextValue {
     startExercise: (exerciseId: string, options?: StartExerciseOptions) => void;
     stopExercise: () => void;
     setModel: (model?: PoseTrackerClientOptions['model'], modelUrl?: string) => Promise<void>;
+    setSource: PoseTrackerClient['setSource'];
+    analyze: PoseTrackerClient['analyze'];
+    getSource: PoseTrackerClient['getSource'];
     getAvailableExercises: () => ExerciseConfig[];
     getAvailableCustomExercises: () => ReturnType<PoseTrackerClient['getAvailableCustomExercises']>;
     addEventListener: (listener: PoseTrackerEventListener) => () => void;
@@ -32,6 +35,10 @@ interface PoseTrackerContextValue {
 }
 interface PoseTrackerProviderProps {
     apiToken?: string;
+    /**
+     * Opt-in V4 engine (`'v4'`). Default `'v3'` — production FSM, unchanged.
+     */
+    engine?: 'v3' | 'v4';
     options?: PoseTrackerClientOptions;
     /**
      * When true, PoseCamera calls `start()` after mount (full cold start).
@@ -42,7 +49,7 @@ interface PoseTrackerProviderProps {
     autoPreload?: boolean;
     children: React.ReactNode;
 }
-declare function PoseTrackerProvider({ apiToken, options, autoStart, autoPreload, children, }: PoseTrackerProviderProps): React.JSX.Element;
+declare function PoseTrackerProvider({ apiToken, engine, options, autoStart, autoPreload, children, }: PoseTrackerProviderProps): React.JSX.Element;
 declare function usePoseTrackerContext(): PoseTrackerContextValue;
 
 interface PoseCameraProps {
@@ -51,6 +58,16 @@ interface PoseCameraProps {
     className?: string;
     /** 'front' | 'back' — mapped to getUserMedia facingMode. Default front. */
     position?: 'front' | 'back';
+    /**
+     * Input mode. Default `camera`.
+     * Pass a full {@link PoseSource} or `'camera' | 'video' | 'image'` with
+     * `sourceUrl` / `sourceFile`.
+     */
+    source?: PoseSource | PoseSourceType;
+    /** URL / object URL for `source: 'video' | 'image'`. */
+    sourceUrl?: string;
+    /** File/Blob for `source: 'video' | 'image'`. */
+    sourceFile?: File | Blob;
     /** Draw navy/gold skeleton overlay. Default true. */
     drawSkeleton?: boolean;
     /** Placement guide while posture.ready === false. Default true. */
@@ -78,7 +95,7 @@ interface PoseCameraProps {
  * Browser camera + canvas overlay (web equivalent of RN `WebViewPoseView`).
  * Must be rendered under {@link PoseTrackerProvider}.
  */
-declare function PoseCamera({ style, className, position, drawSkeleton, drawPlacementBox, placementPaddingPercent, coldStart, loadingText, showWatermark, skeletonDef, skeletonUuid, debugHud, autoStart: autoStartProp, }: PoseCameraProps): React.JSX.Element;
+declare function PoseCamera({ style, className, position, source, sourceUrl, sourceFile, drawSkeleton, drawPlacementBox, placementPaddingPercent, coldStart, loadingText, showWatermark, skeletonDef, skeletonUuid, debugHud, autoStart: autoStartProp, }: PoseCameraProps): React.JSX.Element;
 
 /**
  * Access the PoseTracker pipeline and subscribe to typed events (RN light parity).

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { PoseTrackerClient, PoseTrackerStatus, PoseTrackerMode, ErrorEvent, SdkManifest, ExerciseConfig, PreloadOptions, StartExerciseOptions, PoseTrackerClientOptions, PoseTrackerEventListener, ClassicNativeMessage, SkeletonDefinition, PoseTrackerCallbacks } from '@pose-tracker/pose-estimation-web';
-export { COCO_KEYPOINT_NAMES, ColdStartMode, CounterEvent, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, ErrorEvent, ExerciseConfig, InitializationEvent, Keypoint, KeypointsEvent, Pose, PoseModelAlias, PoseTracker, PoseTrackerCallbacks, PoseTrackerClient, PoseTrackerClientOptions, PoseTrackerOptions, PostureEvent, PreloadOptions, SDK_NAME, SDK_VERSION, SdkManifest, StartExerciseOptions, createPoseTracker, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
+import { PoseTrackerClient, PoseTrackerStatus, PoseTrackerMode, ErrorEvent, SdkManifest, ExerciseConfig, PreloadOptions, StartExerciseOptions, PoseTrackerClientOptions, PoseTrackerEventListener, ClassicNativeMessage, PoseSource, PoseSourceType, SkeletonDefinition, PoseTrackerCallbacks } from '@pose-tracker/pose-estimation-web';
+export { COCO_KEYPOINT_NAMES, ColdStartMode, CounterEvent, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, EngineChannel, ErrorEvent, ExerciseConfig, InitializationEvent, Keypoint, KeypointsEvent, Pose, PoseModelAlias, PoseSource, PoseSourceType, PoseTracker, PoseTrackerCallbacks, PoseTrackerClient, PoseTrackerClientOptions, PoseTrackerOptions, PostureEvent, PreloadOptions, SDK_NAME, SDK_VERSION, SdkManifest, StartExerciseOptions, V4_ONLY_EXERCISE_IDS, createPoseTracker, normalizeEngineChannel, normalizePoseSource, requiresEngineV4, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
 import React from 'react';
 
 /**
@@ -20,6 +20,9 @@ interface PoseTrackerContextValue {
     startExercise: (exerciseId: string, options?: StartExerciseOptions) => void;
     stopExercise: () => void;
     setModel: (model?: PoseTrackerClientOptions['model'], modelUrl?: string) => Promise<void>;
+    setSource: PoseTrackerClient['setSource'];
+    analyze: PoseTrackerClient['analyze'];
+    getSource: PoseTrackerClient['getSource'];
     getAvailableExercises: () => ExerciseConfig[];
     getAvailableCustomExercises: () => ReturnType<PoseTrackerClient['getAvailableCustomExercises']>;
     addEventListener: (listener: PoseTrackerEventListener) => () => void;
@@ -32,6 +35,10 @@ interface PoseTrackerContextValue {
 }
 interface PoseTrackerProviderProps {
     apiToken?: string;
+    /**
+     * Opt-in V4 engine (`'v4'`). Default `'v3'` — production FSM, unchanged.
+     */
+    engine?: 'v3' | 'v4';
     options?: PoseTrackerClientOptions;
     /**
      * When true, PoseCamera calls `start()` after mount (full cold start).
@@ -42,7 +49,7 @@ interface PoseTrackerProviderProps {
     autoPreload?: boolean;
     children: React.ReactNode;
 }
-declare function PoseTrackerProvider({ apiToken, options, autoStart, autoPreload, children, }: PoseTrackerProviderProps): React.JSX.Element;
+declare function PoseTrackerProvider({ apiToken, engine, options, autoStart, autoPreload, children, }: PoseTrackerProviderProps): React.JSX.Element;
 declare function usePoseTrackerContext(): PoseTrackerContextValue;
 
 interface PoseCameraProps {
@@ -51,6 +58,16 @@ interface PoseCameraProps {
     className?: string;
     /** 'front' | 'back' — mapped to getUserMedia facingMode. Default front. */
     position?: 'front' | 'back';
+    /**
+     * Input mode. Default `camera`.
+     * Pass a full {@link PoseSource} or `'camera' | 'video' | 'image'` with
+     * `sourceUrl` / `sourceFile`.
+     */
+    source?: PoseSource | PoseSourceType;
+    /** URL / object URL for `source: 'video' | 'image'`. */
+    sourceUrl?: string;
+    /** File/Blob for `source: 'video' | 'image'`. */
+    sourceFile?: File | Blob;
     /** Draw navy/gold skeleton overlay. Default true. */
     drawSkeleton?: boolean;
     /** Placement guide while posture.ready === false. Default true. */
@@ -78,7 +95,7 @@ interface PoseCameraProps {
  * Browser camera + canvas overlay (web equivalent of RN `WebViewPoseView`).
  * Must be rendered under {@link PoseTrackerProvider}.
  */
-declare function PoseCamera({ style, className, position, drawSkeleton, drawPlacementBox, placementPaddingPercent, coldStart, loadingText, showWatermark, skeletonDef, skeletonUuid, debugHud, autoStart: autoStartProp, }: PoseCameraProps): React.JSX.Element;
+declare function PoseCamera({ style, className, position, source, sourceUrl, sourceFile, drawSkeleton, drawPlacementBox, placementPaddingPercent, coldStart, loadingText, showWatermark, skeletonDef, skeletonUuid, debugHud, autoStart: autoStartProp, }: PoseCameraProps): React.JSX.Element;
 
 /**
  * Access the PoseTracker pipeline and subscribe to typed events (RN light parity).

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createPoseTracker } from '@pose-tracker/pose-estimation-web';
-export { COCO_KEYPOINT_NAMES, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, PoseTrackerClient, SDK_NAME, SDK_VERSION, createPoseTracker, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
+export { COCO_KEYPOINT_NAMES, DEFAULT_LOADING_TEXT, DEFAULT_MOVENET_LIGHTNING_URL, PoseTrackerClient, SDK_NAME, SDK_VERSION, V4_ONLY_EXERCISE_IDS, createPoseTracker, normalizeEngineChannel, normalizePoseSource, requiresEngineV4, resolvePoseModel, shouldShowWatermark } from '@pose-tracker/pose-estimation-web';
 import { createContext, useMemo, useRef, useState, useEffect, useCallback, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -7,16 +7,23 @@ import { jsx } from 'react/jsx-runtime';
 var PoseTrackerContext = createContext(null);
 function PoseTrackerProvider({
   apiToken,
+  engine,
   options,
   autoStart = true,
   autoPreload = false,
   children
 }) {
   const merged = useMemo(
-    () => ({ ...options, apiToken: apiToken ?? options?.apiToken }),
+    () => ({
+      ...options,
+      apiToken: apiToken ?? options?.apiToken,
+      engine: engine ?? options?.engine
+    }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       apiToken,
+      engine,
+      options?.engine,
       options?.model,
       options?.modelUrl,
       options?.facingMode,
@@ -75,6 +82,12 @@ function PoseTrackerProvider({
     (model, modelUrl) => client.setModel(model, modelUrl),
     [client]
   );
+  const setSource = useCallback(
+    (...args) => client.setSource(...args),
+    [client]
+  );
+  const analyze = useCallback(() => client.analyze(), [client]);
+  const getSource = useCallback(() => client.getSource(), [client]);
   const getAvailableExercises = useCallback(() => client.getAvailableExercises(), [client]);
   const getAvailableCustomExercises = useCallback(
     () => client.getAvailableCustomExercises(),
@@ -105,6 +118,9 @@ function PoseTrackerProvider({
       startExercise,
       stopExercise,
       setModel,
+      setSource,
+      analyze,
+      getSource,
       getAvailableExercises,
       getAvailableCustomExercises,
       addEventListener,
@@ -126,6 +142,9 @@ function PoseTrackerProvider({
       startExercise,
       stopExercise,
       setModel,
+      setSource,
+      analyze,
+      getSource,
       getAvailableExercises,
       getAvailableCustomExercises,
       addEventListener,
@@ -149,6 +168,9 @@ function PoseCamera({
   style,
   className,
   position,
+  source,
+  sourceUrl,
+  sourceFile,
   drawSkeleton,
   drawPlacementBox,
   placementPaddingPercent,
@@ -169,6 +191,9 @@ function PoseCamera({
     if (!el) return;
     client.updateOptions({
       ...position ? { position } : {},
+      ...source !== void 0 ? { source } : {},
+      ...sourceUrl !== void 0 ? { sourceUrl } : {},
+      ...sourceFile !== void 0 ? { sourceFile } : {},
       ...typeof drawSkeleton === "boolean" ? { drawSkeleton } : {},
       ...typeof drawPlacementBox === "boolean" ? { drawPlacementBox } : {},
       ...typeof placementPaddingPercent === "number" ? { placementPaddingPercent } : {},
@@ -183,7 +208,13 @@ function PoseCamera({
     const shouldStart = autoStartProp ?? providerAutoStart;
     if (shouldStart && !startedRef.current) {
       startedRef.current = true;
-      client.start().catch(() => {
+      const boot = async () => {
+        if (source !== void 0) {
+          await client.setSource(source, { sourceUrl, sourceFile });
+        }
+        await client.start();
+      };
+      boot().catch(() => {
       });
     }
     return () => {
@@ -192,6 +223,11 @@ function PoseCamera({
       _registerMountHost(null);
     };
   }, [client]);
+  useEffect(() => {
+    if (!startedRef.current || source === void 0) return;
+    void client.setSource(source, { sourceUrl, sourceFile }).catch(() => {
+    });
+  }, [client, source, sourceUrl, sourceFile]);
   return /* @__PURE__ */ jsx(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pose-tracker/pose-estimation-web-react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": false,
   "description": "PoseTracker React (web) pose estimation — thin wrapper over @pose-tracker/pose-estimation-web. Browser camera + canvas, not React Native.",
   "type": "module",
@@ -54,7 +54,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@pose-tracker/pose-estimation-web": "0.1.0"
+    "@pose-tracker/pose-estimation-web": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",