@pose-tracker/react-native-pose-estimation-light 0.1.0

package/src/backends/webview/onlineRuntime.ts

@@ -0,0 +1,94 @@
+/**
+ * Online (light) pose-runtime loader.
+ *
+ * The npm package ships only the thin page runtime (`pose-runtime.js`).
+ * TF.js + WASM backends load from a CDN; MoveNet (or a custom graph model)
+ * loads from a URL on every WebView boot — same idea as the historical
+ * PoseTracker Front tracking page.
+ */
+
+import { POSE_RUNTIME_JS, POSE_RUNTIME_VERSION } from './poseRuntimeSource';
+import {
+  resolvePoseModel,
+  type PoseModelAlias,
+  type ResolvedPoseModel,
+} from '../../models/poseModels';
+
+/** TF.js version pinned for CDN scripts (matches offline SDK build). */
+export const ONLINE_TFJS_VERSION = '4.22.0';
+
+const JSDELIVR = 'https://cdn.jsdelivr.net/npm';
+
+export interface OnlineRuntimeUrls {
+  /** Ordered <script src> list (core → converter → webgl → wasm). */
+  tfjsScriptUrls: string[];
+  /** Directory passed to `tf.wasm.setWasmPaths`. */
+  tfjsWasmPath: string;
+}
+
+export interface OnlineRuntimeParts {
+  version: string;
+  delivery: 'online';
+  modelId: string;
+  modelUrl: string;
+  tfjsScriptUrls: string[];
+  tfjsWasmPath: string;
+  /** Thin page runtime shipped in the package (~50 KB). */
+  runtimeJs: string;
+}
+
+export interface GetOnlineRuntimeOptions {
+  model?: PoseModelAlias;
+  modelUrl?: string;
+  /**
+   * Override jsDelivr package root, e.g.
+   * `https://cdn.jsdelivr.net/npm` (default) or a mirrored host.
+   */
+  tfjsCdnBase?: string;
+  /** Override TF.js version segment in CDN URLs. */
+  tfjsVersion?: string;
+}
+
+export function defaultOnlineRuntimeUrls(
+  cdnBase: string = JSDELIVR,
+  tfjsVersion: string = ONLINE_TFJS_VERSION,
+): OnlineRuntimeUrls {
+  const base = cdnBase.replace(/\/$/, '');
+  return {
+    tfjsScriptUrls: [
+      `${base}/@tensorflow/tfjs-core@${tfjsVersion}/dist/tf-core.min.js`,
+      `${base}/@tensorflow/tfjs-converter@${tfjsVersion}/dist/tf-converter.min.js`,
+      `${base}/@tensorflow/tfjs-backend-webgl@${tfjsVersion}/dist/tf-backend-webgl.min.js`,
+      `${base}/@tensorflow/tfjs-backend-wasm@${tfjsVersion}/dist/tf-backend-wasm.min.js`,
+    ],
+    tfjsWasmPath: `${base}/@tensorflow/tfjs-backend-wasm@${tfjsVersion}/dist/`,
+  };
+}
+
+/**
+ * Build the online runtime descriptor used by {@link buildPoseHtml}.
+ * Throws when the selected model cannot be loaded (e.g. blazepose without URL).
+ */
+export function getOnlineRuntimeParts(options: GetOnlineRuntimeOptions = {}): OnlineRuntimeParts {
+  const resolved: ResolvedPoseModel = resolvePoseModel({
+    model: options.model,
+    modelUrl: options.modelUrl,
+  });
+  if (!resolved.modelUrl) {
+    throw new Error(resolved.unsupportedReason ?? `Model "${resolved.modelId}" is unavailable.`);
+  }
+  const urls = defaultOnlineRuntimeUrls(options.tfjsCdnBase, options.tfjsVersion);
+  return {
+    version: POSE_RUNTIME_VERSION,
+    delivery: 'online',
+    modelId: resolved.modelId,
+    modelUrl: resolved.modelUrl,
+    tfjsScriptUrls: urls.tfjsScriptUrls,
+    tfjsWasmPath: urls.tfjsWasmPath,
+    runtimeJs: POSE_RUNTIME_JS,
+  };
+}
+
+export function getOnlineRuntimeVersion(): string {
+  return POSE_RUNTIME_VERSION;
+}

package/src/backends/webview/poseHtml.ts

@@ -0,0 +1,259 @@
+/**
+ * WebView HTML assembler (light / online).
+ *
+ * Loads TF.js from CDN script tags and MoveNet (or a custom graph model)
+ * from {@link OnlineRuntimeParts.modelUrl}. The thin page runtime is still
+ * inlined from the package. Same camera / adaptive quality / postMessage
+ * events as the offline SDK.
+ */
+
+import { Platform } from 'react-native';
+import {
+  ANDROID_INFER_FRAME_SKIP,
+  ANDROID_PERF_DEBUG,
+  ANDROID_PREPROCESS_PATH,
+  ANDROID_SOFT_CAP_PROFILE,
+  CAPTURE_CONSTRAINT_MODE,
+} from '../../quality/captureMode';
+import type { CapturePriority } from '../../quality/profiles';
+import type { SkeletonDefinition } from '../../types/skeleton';
+import { POSETRACKER_LOGO_DATA_URL } from './brandAssets';
+import type { OnlineRuntimeParts } from './onlineRuntime';
+
+/** Bumped on every assembler-path change — appears in WebView diag logs. */
+export const POSE_HTML_BUILD = '20260811-onlineLight-localhostBase';
+
+/** Default boot overlay copy (WebView `loading_message` parity). */
+export const DEFAULT_LOADING_TEXT = 'AI Loading';
+
+export interface PoseHtmlOptions {
+  facingMode?: 'user' | 'environment';
+  /** Min keypoint score for the in-page skeleton. Default 0.25. */
+  minScore?: number;
+  /**
+   * getUserMedia resolution hint. Defaults follow the adaptive quality
+   * profile (often UltraLite on Android, Pro/Prime on iOS). Inference always
+   * letterboxes down to 192×192 regardless.
+   */
+  idealWidth?: number;
+  idealHeight?: number;
+  idealFrameRate?: number;
+  /** Active adaptive quality profile id (ceiling for warm-up downgrades). */
+  profileId?: string;
+  /**
+   * Platform minimum target FPS (floor). iOS ≈ 30, Android ≈ 10 (experiment).
+   * Passed from RN so the HTML page shares the same AdaptiveChoice policy.
+   */
+  minTargetFps?: number;
+  /** Draw the skeleton overlay inside the page. Default true. */
+  drawSkeleton?: boolean;
+  /**
+   * `performance` (default) applies Android soft-cap / warm-up floor mapping.
+   * `quality` disables soft-cap and opens at prime / device-native HD.
+   */
+  capturePriority?: CapturePriority;
+  /**
+   * `basic` (default for warmers): model + WebGL zeros only — no getUserMedia.
+   * `full`: open the camera after warm-up (camera screens / explicit full preload).
+   */
+  coldStart?: 'basic' | 'full';
+  /**
+   * Custom skeleton overlay (Strapi skeleton document). When omitted, the
+   * page uses PoseTrackerFront `DEFAULT_SKELETON` (navy + gold).
+   */
+  skeletonDef?: SkeletonDefinition | null;
+  /**
+   * Boot overlay label (WebView `loading_message` query param parity).
+   * Default {@link DEFAULT_LOADING_TEXT}. Technical progress stays on
+   * `initialization` / `diag` events — never on this UI.
+   */
+  loadingText?: string;
+  /**
+   * Bottom-right “powered by” + join-logo watermark on the live camera
+   * surface. Hosts typically derive this from plan (`!isPaidPlan`).
+   * Ignored / forced off for `coldStart: 'basic'` warmers.
+   */
+  showWatermark?: boolean;
+  /** Show the technical `#hud` overlay (FPS / backend). Default false. */
+  debugHud?: boolean;
+}
+
+const PAGE_CSS = `
+    html, body { margin:0; padding:0; width:100%; height:100%; background:#000; overflow:hidden; }
+    #wrap { position:relative; width:100%; height:100%; background:#000; }
+    video, canvas {
+      position:absolute; inset:0; width:100%; height:100%;
+      object-fit:cover; opacity:0; transition:opacity 180ms ease-out;
+    }
+    video { z-index:1; background:#000; }
+    canvas { z-index:2; pointer-events:none; }
+    #boot {
+      position:absolute; inset:0; z-index:4;
+      display:flex; flex-direction:column; align-items:center; justify-content:center;
+      background:#0a0a0a; color:#fff;
+      font:15px/1.4 -apple-system,system-ui,sans-serif;
+      transition:opacity 180ms ease-out;
+      gap:0;
+      padding:24px;
+      box-sizing:border-box;
+    }
+    #boot.hide { opacity:0; pointer-events:none; }
+    #boot .boot-powered {
+      color:rgba(255,255,255,0.55);
+      font-size:11px;
+      font-weight:600;
+      letter-spacing:0.14em;
+      text-transform:uppercase;
+      margin-bottom:10px;
+    }
+    #boot .boot-logo {
+      width:min(220px, 62vw);
+      height:auto;
+      margin-bottom:22px;
+      display:block;
+      box-sizing:border-box;
+      background:#3a3a3a;
+      padding:14px 16px;
+      border-radius:10px;
+    }
+    #boot .boot-spinner {
+      width:28px; height:28px; margin-bottom:16px;
+      border:2px solid #333; border-top-color:#ffc300; border-radius:50%;
+      animation:ptspin 0.8s linear infinite;
+    }
+    #boot .boot-msg {
+      color:#e8e8e8; font-size:14px; font-weight:500;
+      text-align:center; padding:0 12px; min-height:1.2em;
+    }
+    #boot .boot-msg.is-error { color:#FE8370; font-size:13px; }
+    @keyframes ptspin { to { transform:rotate(360deg); } }
+    #wm {
+      position:absolute; right:10px; bottom:10px; z-index:3;
+      display:none; flex-direction:column; align-items:flex-end;
+      pointer-events:none;
+      text-shadow:0 1px 2px rgba(0,0,0,0.55);
+    }
+    #wm.show { display:flex; }
+    #wm .wm-powered {
+      color:rgba(255,255,255,0.7);
+      font:600 11px/1.2 -apple-system,system-ui,sans-serif;
+      letter-spacing:0.12em;
+      text-transform:uppercase;
+      margin-bottom:4px;
+    }
+    #wm .wm-logo {
+      width:130px; height:auto; display:block;
+      opacity:0.92;
+      filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45));
+    }
+    #hud {
+      position:absolute; left:8px; right:8px; bottom:8px; z-index:3;
+      color:#ffc300; font:12px/1.3 -apple-system,system-ui,sans-serif;
+      text-shadow:0 1px 2px #000; pointer-events:none;
+      display:none;
+    }
+    #hud.debug { display:block; }
+`;
+
+/** Escape text for safe HTML text-node content. */
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/** `</script` inside injected JS text would terminate the inline script tag. */
+function escapeScript(js: string): string {
+  return js.replace(/<\/script/gi, '<\\/script');
+}
+
+function escapeAttr(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}
+
+/**
+ * Assemble the pose page for online delivery: CDN TF.js + remote model URL
+ * + inlined thin page runtime.
+ */
+export function buildPoseHtml(parts: OnlineRuntimeParts, options?: PoseHtmlOptions): string {
+  const isAndroid = Platform.OS === 'android';
+  const capturePriority: CapturePriority =
+    options?.capturePriority === 'quality' ? 'quality' : 'performance';
+  const preferQuality = capturePriority === 'quality';
+  const coldStart = options?.coldStart === 'full' ? 'full' : 'basic';
+  const loadingText =
+    typeof options?.loadingText === 'string' && options.loadingText.trim().length > 0
+      ? options.loadingText.trim()
+      : DEFAULT_LOADING_TEXT;
+  const watermarkOn = coldStart === 'full' && (options?.showWatermark ?? true);
+  const debugHud = !!options?.debugHud;
+  const config = JSON.stringify({
+    facingMode: options?.facingMode ?? 'user',
+    minScore: options?.minScore ?? 0.25,
+    idealWidth: options?.idealWidth ?? 480,
+    idealHeight: options?.idealHeight ?? 360,
+    idealFrameRate: options?.idealFrameRate ?? 24,
+    profileId: options?.profileId ?? 'ultralite',
+    minTargetFps: options?.minTargetFps ?? 15,
+    drawSkeleton: options?.drawSkeleton ?? true,
+    coldStart,
+    skeletonDef: options?.skeletonDef ?? null,
+    loadingText,
+    showWatermark: watermarkOn,
+    debugHud,
+    captureConstraintMode: CAPTURE_CONSTRAINT_MODE,
+    capturePriority,
+    platform: Platform.OS,
+    modelUrl: parts.modelUrl,
+    modelId: parts.modelId,
+    tfjsWasmPath: parts.tfjsWasmPath,
+    inferFrameSkip:
+      isAndroid && ANDROID_INFER_FRAME_SKIP > 0 ? ANDROID_INFER_FRAME_SKIP : 0,
+    preprocessPath: isAndroid ? ANDROID_PREPROCESS_PATH : 'imagebitmap',
+    softCapProfile:
+      isAndroid && !preferQuality ? ANDROID_SOFT_CAP_PROFILE : null,
+    perfDebug: isAndroid && ANDROID_PERF_DEBUG,
+  });
+
+  const cdnScripts = parts.tfjsScriptUrls
+    .map((url) => `<script src="${escapeAttr(url)}"></script>`)
+    .join('');
+
+  return [
+    '<!DOCTYPE html><html><head><meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />',
+    '<style>', PAGE_CSS, '</style></head><body>',
+    '<div id="wrap">',
+    '<video id="video" playsinline muted autoplay></video>',
+    '<canvas id="overlay"></canvas>',
+    '<div id="wm">',
+    '<div class="wm-powered">powered by</div>',
+    '<img class="wm-logo" alt="PoseTracker" src="', POSETRACKER_LOGO_DATA_URL, '" />',
+    '</div>',
+    '<div id="boot">',
+    '<div class="boot-powered">powered by</div>',
+    '<img class="boot-logo" alt="PoseTracker" src="', POSETRACKER_LOGO_DATA_URL, '" />',
+    '<div class="boot-spinner"></div>',
+    '<div class="boot-msg">', escapeHtml(loadingText), '</div>',
+    '</div>',
+    '<div id="hud"', debugHud || (isAndroid && ANDROID_PERF_DEBUG) ? ' class="debug"' : '', '>',
+    'booting…',
+    '</div>',
+    '</div>',
+    cdnScripts,
+    '<script>window.__PT_BUILD=', JSON.stringify(`${POSE_HTML_BUILD}/${parts.version}`),
+    ';window.__PT_CONFIG=', config,
+    ';window.__PT_MODEL_URL=', JSON.stringify(parts.modelUrl),
+    ';window.__PT_WASM_PATH=', JSON.stringify(parts.tfjsWasmPath),
+    ';window.__PT_MODEL_JSON=null',
+    ';window.__PT_WEIGHTS_B64=null',
+    ';window.__PT_WASM_B64=null',
+    ';window.__PT_PIPELINE_WASM_B64=null',
+    ';</script>',
+    '<script>', escapeScript(parts.runtimeJs), '</script>',
+    '</body></html>',
+  ].join('');
+}

package/src/backends/webview/poseRuntimeSource.d.ts

@@ -0,0 +1,3 @@
+/** AUTO-GENERATED by scripts/embed-pose-runtime.mjs — do not edit. */
+export declare const POSE_RUNTIME_VERSION: string;
+export declare const POSE_RUNTIME_JS: string;

package/src/cache/obfuscate.ts

@@ -0,0 +1,94 @@
+/**
+ * Obfuscation of the local session cache (manifest + engine bundle).
+ *
+ * Purpose: the cached business logic and exercise configs must not be
+ * readable without the API key that earned them (commercial boundary). The
+ * scheme is an SHA-256-based XOR keystream keyed by the API token — this is
+ * deliberate *obfuscation*, not cryptographic security against an attacker
+ * who owns both the device and a valid token (such an attacker can already
+ * read the downloaded engine at runtime). What it guarantees:
+ * - a device with no API token cannot exploit a cache left by another app
+ *   or a previous integration;
+ * - the cache written for token A is unreadable after switching to token B.
+ */
+
+import { sha256 } from 'js-sha256';
+
+const MAGIC = 'ptc1:';
+
+/** Derives the cache secret from the API token (never stored on disk). */
+export function deriveCacheSecret(apiToken: string): string {
+  return sha256(`posetracker-sdk-cache:${apiToken}`);
+}
+
+function utf8Encode(text: string): Uint8Array {
+  // encodeURIComponent-based UTF-8, avoids relying on TextEncoder (Hermes).
+  const escaped = unescape(encodeURIComponent(text));
+  const bytes = new Uint8Array(escaped.length);
+  for (let i = 0; i < escaped.length; i++) {
+    bytes[i] = escaped.charCodeAt(i);
+  }
+  return bytes;
+}
+
+function utf8Decode(bytes: Uint8Array): string {
+  let escaped = '';
+  for (let i = 0; i < bytes.length; i++) {
+    escaped += String.fromCharCode(bytes[i]!);
+  }
+  return decodeURIComponent(escape(escaped));
+}
+
+function toHex(bytes: Uint8Array): string {
+  let hex = '';
+  for (let i = 0; i < bytes.length; i++) {
+    hex += bytes[i]!.toString(16).padStart(2, '0');
+  }
+  return hex;
+}
+
+function fromHex(hex: string): Uint8Array | null {
+  if (hex.length % 2 !== 0 || /[^0-9a-f]/.test(hex)) {
+    return null;
+  }
+  const bytes = new Uint8Array(hex.length / 2);
+  for (let i = 0; i < bytes.length; i++) {
+    bytes[i] = parseInt(hex.slice(i * 2, i * 2 + 2), 16);
+  }
+  return bytes;
+}
+
+/** SHA-256 counter-mode keystream. */
+function xorWithKeystream(bytes: Uint8Array, secret: string): Uint8Array {
+  const out = new Uint8Array(bytes.length);
+  let counter = 0;
+  let offset = 0;
+  while (offset < bytes.length) {
+    const block = sha256.array(`${secret}:${counter++}`);
+    for (let i = 0; i < block.length && offset < bytes.length; i++, offset++) {
+      out[offset] = bytes[offset]! ^ block[i]!;
+    }
+  }
+  return out;
+}
+
+export function sealString(plain: string, secret: string): string {
+  return MAGIC + toHex(xorWithKeystream(utf8Encode(plain), secret));
+}
+
+/** Returns null when the payload is not a sealed blob or cannot be decoded. */
+export function openString(sealed: string, secret: string): string | null {
+  if (!sealed.startsWith(MAGIC)) {
+    return null;
+  }
+  const bytes = fromHex(sealed.slice(MAGIC.length));
+  if (!bytes) {
+    return null;
+  }
+  try {
+    return utf8Decode(xorWithKeystream(bytes, secret));
+  } catch {
+    // Wrong secret produces invalid UTF-8 → decodeURIComponent throws.
+    return null;
+  }
+}

package/src/camera/PoseCameraView.tsx

@@ -0,0 +1,223 @@
+/**
+ * Camera component for the Apple Vision backend (iOS native builds only):
+ *
+ *   vision-camera frame ──detectBodyPose plugin──▶ VNDetectHumanBodyPoseRequest
+ *     ──19 joints (Y-flipped)──▶ Pose
+ *
+ * Everything up to the throttled `runOnJS` happens on the frame-processor
+ * thread. Requires a native build (NOT Expo Go) and the Vision backend
+ * active (`preferredBackend: 'vision'`). For every other case use
+ * {@link WebViewPoseView} — the SDK's default runtime.
+ */
+
+import React, { useRef } from 'react';
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { usePoseTracker } from '../PoseTrackerProvider';
+import {
+  getVisionCamera,
+  getWorkletsCore,
+  type VisionCameraFrame,
+  type VisionCameraModule,
+  type WorkletsCoreModule,
+} from '../support/optionalModules';
+import { VisionPoseBackend } from '../backends/vision/VisionPoseBackend';
+import {
+  getVisionBodyPosePlugin,
+  isVisionPoseCameraAvailable,
+  type VisionFrameProcessorPlugin,
+} from '../backends/vision/optionalVision';
+import {
+  poseFromVisionPluginResult,
+  type VisionPluginResult,
+} from '../backends/vision/mapVisionJoints';
+import type { Pose } from '../types/pose';
+
+export type PoseCameraUnavailableReason =
+  /** Optional native modules not installed (Expo Go or missing deps). */
+  | 'modules-missing'
+  /** Active backend is not Apple Vision (use WebViewPoseView instead). */
+  | 'native-backend-inactive'
+  /** Backend not initialized yet — preload()/warmup() has not completed. */
+  | 'backend-not-ready'
+  /** vision-camera found no camera device for the requested position. */
+  | 'no-camera-device';
+
+export interface PoseCameraStats {
+  /** Synchronous inference duration for this frame, in ms. */
+  inferenceTimeMs: number;
+  /** Wall-clock timestamp of the processed frame (host clock, ms). */
+  timestampMs: number;
+}
+
+export interface PoseCameraViewProps {
+  style?: StyleProp<ViewStyle>;
+  /** Camera to use. Default: 'front'. */
+  position?: 'front' | 'back';
+  /** Stream frames when true (and the SDK is ready). Default: true. */
+  isActive?: boolean;
+  /** Camera fps hint passed to vision-camera (inference runs per frame). */
+  targetFps?: number;
+  /**
+   * Throttle for the worklet → JS pose callbacks (`runOnJS`). Inference
+   * still runs on every camera frame; only the JS notifications (keypoints
+   * events, overlays) are capped. Default: 30.
+   */
+  maxPoseCallbacksPerSecond?: number;
+  /** Per-pose callback (after the pose was ingested into the SDK pipeline). */
+  onPose?: (pose: Pose, stats: PoseCameraStats) => void;
+  /** Rendered when the native camera path cannot run. */
+  renderFallback?: (reason: PoseCameraUnavailableReason) => React.ReactElement | null;
+  /** Overlay content (skeleton, HUD…), rendered above the camera preview. */
+  children?: React.ReactNode;
+}
+
+export function PoseCameraView(props: PoseCameraViewProps): React.ReactElement | null {
+  const { client } = usePoseTracker();
+  const backend = client.getBackend();
+
+  if (!(backend instanceof VisionPoseBackend)) {
+    return fallback(props, 'native-backend-inactive');
+  }
+  if (!isVisionPoseCameraAvailable()) {
+    return fallback(props, 'modules-missing');
+  }
+  const plugin = backend.getFrameProcessorPlugin() ?? getVisionBodyPosePlugin();
+  if (!plugin) {
+    return fallback(props, 'backend-not-ready');
+  }
+  return (
+    <VisionPoseCameraInner
+      {...props}
+      backend={backend}
+      plugin={plugin}
+      visionCamera={getVisionCamera() as VisionCameraModule}
+      workletsCore={getWorkletsCore() as WorkletsCoreModule}
+    />
+  );
+}
+
+function fallback(
+  props: PoseCameraViewProps,
+  reason: PoseCameraUnavailableReason,
+): React.ReactElement | null {
+  if (props.renderFallback) {
+    return props.renderFallback(reason);
+  }
+  return (
+    <View style={[styles.fallback, props.style]}>
+      <Text style={styles.fallbackText}>{FALLBACK_MESSAGES[reason]}</Text>
+    </View>
+  );
+}
+
+const FALLBACK_MESSAGES: Record<PoseCameraUnavailableReason, string> = {
+  'modules-missing':
+    'PoseCameraView requires an iOS native build with react-native-vision-camera + ' +
+    'react-native-worklets-core. Not available in Expo Go — use WebViewPoseView.',
+  'native-backend-inactive':
+    "PoseCameraView requires the Apple Vision backend (preferredBackend: 'vision') — " +
+    'the client is on the WebView runtime (use WebViewPoseView instead).',
+  'backend-not-ready': 'PoseTracker is not ready yet — call preload() and wait for status "ready".',
+  'no-camera-device': 'No camera device available for the requested position.',
+};
+
+// ---------------------------------------------------------------------------
+// Apple Vision path (iOS)
+// ---------------------------------------------------------------------------
+
+interface VisionPoseCameraInnerProps extends PoseCameraViewProps {
+  backend: VisionPoseBackend;
+  plugin: VisionFrameProcessorPlugin;
+  visionCamera: VisionCameraModule;
+  workletsCore: WorkletsCoreModule;
+}
+
+function VisionPoseCameraInner(props: VisionPoseCameraInnerProps): React.ReactElement {
+  const {
+    backend,
+    plugin,
+    visionCamera,
+    workletsCore,
+    position = 'front',
+    isActive = true,
+    targetFps,
+    maxPoseCallbacksPerSecond = 30,
+    onPose,
+    style,
+    children,
+  } = props;
+
+  const { client, status } = usePoseTracker();
+
+  const onPoseRef = useRef(onPose);
+  onPoseRef.current = onPose;
+
+  const device = visionCamera.useCameraDevice(position);
+  const lastEmitMs = workletsCore.useSharedValue(0);
+
+  const emitPose = workletsCore.useRunOnJS(
+    (pose: Pose, inferenceTimeMs: number) => {
+      client.ingestPose(pose);
+      backend.recordInferenceTime(inferenceTimeMs);
+      onPoseRef.current?.(pose, { inferenceTimeMs, timestampMs: pose.timestampMs });
+    },
+    [client, backend],
+  );
+
+  const minEmitIntervalMs = Math.max(0, Math.floor(1000 / Math.max(1, maxPoseCallbacksPerSecond)));
+
+  const frameProcessor = visionCamera.useFrameProcessor(
+    (frame: VisionCameraFrame) => {
+      'worklet';
+      const raw = plugin.call(frame) as VisionPluginResult | null;
+      if (!raw || !raw.joints || raw.joints.length === 0) {
+        return;
+      }
+      const inferenceTimeMs =
+        typeof raw.inferenceTimeMs === 'number' ? raw.inferenceTimeMs : 0;
+      const pose = poseFromVisionPluginResult(raw, Date.now());
+      if (!pose) {
+        return;
+      }
+
+      const now = Date.now();
+      if (now - lastEmitMs.value >= minEmitIntervalMs) {
+        lastEmitMs.value = now;
+        emitPose(pose, inferenceTimeMs);
+      }
+    },
+    [plugin, minEmitIntervalMs, emitPose, lastEmitMs],
+  );
+
+  if (!device) {
+    return fallback(props, 'no-camera-device') ?? <View style={style} />;
+  }
+
+  const Camera = visionCamera.Camera;
+  return (
+    <View style={[styles.container, style]}>
+      <Camera
+        style={StyleSheet.absoluteFill}
+        device={device}
+        isActive={isActive && status === 'ready'}
+        frameProcessor={frameProcessor}
+        // Vision reads CMSampleBuffer / CVPixelBuffer directly — yuv is fine.
+        pixelFormat="yuv"
+        {...(targetFps !== undefined ? { fps: targetFps } : {})}
+      />
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { overflow: 'hidden' },
+  fallback: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: '#111',
+  },
+  fallbackText: { color: '#ccc', fontSize: 13, textAlign: 'center', lineHeight: 18 },
+});