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

package/lib/camera/PoseCameraView.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+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 declare function PoseCameraView(props: PoseCameraViewProps): React.ReactElement | null;

package/lib/camera/PoseCameraView.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PoseCameraView = PoseCameraView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const PoseTrackerProvider_1 = require("../PoseTrackerProvider");
+const optionalModules_1 = require("../support/optionalModules");
+const VisionPoseBackend_1 = require("../backends/vision/VisionPoseBackend");
+const optionalVision_1 = require("../backends/vision/optionalVision");
+const mapVisionJoints_1 = require("../backends/vision/mapVisionJoints");
+function PoseCameraView(props) {
+    const { client } = (0, PoseTrackerProvider_1.usePoseTracker)();
+    const backend = client.getBackend();
+    if (!(backend instanceof VisionPoseBackend_1.VisionPoseBackend)) {
+        return fallback(props, 'native-backend-inactive');
+    }
+    if (!(0, optionalVision_1.isVisionPoseCameraAvailable)()) {
+        return fallback(props, 'modules-missing');
+    }
+    const plugin = backend.getFrameProcessorPlugin() ?? (0, optionalVision_1.getVisionBodyPosePlugin)();
+    if (!plugin) {
+        return fallback(props, 'backend-not-ready');
+    }
+    return ((0, jsx_runtime_1.jsx)(VisionPoseCameraInner, { ...props, backend: backend, plugin: plugin, visionCamera: (0, optionalModules_1.getVisionCamera)(), workletsCore: (0, optionalModules_1.getWorkletsCore)() }));
+}
+function fallback(props, reason) {
+    if (props.renderFallback) {
+        return props.renderFallback(reason);
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.fallback, props.style], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.fallbackText, children: FALLBACK_MESSAGES[reason] }) }));
+}
+const FALLBACK_MESSAGES = {
+    '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.',
+};
+function VisionPoseCameraInner(props) {
+    const { backend, plugin, visionCamera, workletsCore, position = 'front', isActive = true, targetFps, maxPoseCallbacksPerSecond = 30, onPose, style, children, } = props;
+    const { client, status } = (0, PoseTrackerProvider_1.usePoseTracker)();
+    const onPoseRef = (0, react_1.useRef)(onPose);
+    onPoseRef.current = onPose;
+    const device = visionCamera.useCameraDevice(position);
+    const lastEmitMs = workletsCore.useSharedValue(0);
+    const emitPose = workletsCore.useRunOnJS((pose, inferenceTimeMs) => {
+        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) => {
+        'worklet';
+        const raw = plugin.call(frame);
+        if (!raw || !raw.joints || raw.joints.length === 0) {
+            return;
+        }
+        const inferenceTimeMs = typeof raw.inferenceTimeMs === 'number' ? raw.inferenceTimeMs : 0;
+        const pose = (0, mapVisionJoints_1.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') ?? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: style });
+    }
+    const Camera = visionCamera.Camera;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.container, style], children: [(0, jsx_runtime_1.jsx)(Camera, { style: react_native_1.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] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    container: { overflow: 'hidden' },
+    fallback: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+        backgroundColor: '#111',
+    },
+    fallbackText: { color: '#ccc', fontSize: 13, textAlign: 'center', lineHeight: 18 },
+});

package/lib/camera/WebViewPoseView.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Camera + inference surface for {@link WebViewPoseBackend} — the SDK's
+ * default runtime on BOTH platforms (light / online variant).
+ *
+ * Renders a Chromium/WKWebView that owns getUserMedia + MoveNet Lightning
+ * (TF.js WebGL). TF.js loads from CDN; the model loads from a URL each boot
+ * (default: PoseTracker Front MoveNet Lightning).
+ *
+ * Camera capture resolution is driven by {@link AdaptiveQualityController}
+ * (AdaptiveChoice + crash-loop guard + live FPS downgrades).
+ *
+ * Requires peer `react-native-webview` (included in Expo Go) and network
+ * access for the first model / TF.js fetch.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Pose } from '../types/pose';
+import type { SkeletonDefinition } from '../types/skeleton';
+export interface WebViewPoseViewProps {
+    style?: StyleProp<ViewStyle>;
+    /** 'front' | 'back' — mapped to getUserMedia facingMode. Default front. */
+    position?: 'front' | 'back';
+    /**
+     * Draw the skeleton overlay inside the page. Default `true` — same as the
+     * PoseTracker WebView `skeleton="true"` query param. Pass `false` for a
+     * clean camera preview (e.g. when rendering your own overlay from
+     * `keypoints` events).
+     */
+    drawSkeleton?: boolean;
+    /**
+     * Show a placement guide box (WebView `postureBox` parity) while the
+     * active exercise reports `posture.ready === false`. Default `true`.
+     * Drawn as an RN sibling overlay (reliable on iOS; Android WebView may
+     * composite above it — hosts can also render from `onPosture`).
+     */
+    drawPlacementBox?: boolean;
+    /**
+     * Placement box inset as a percentage of each edge (default `10`, same
+     * as the WebView / engine posture padding).
+     */
+    placementPaddingPercent?: number;
+    /**
+     * Cold-start depth for this WebView page:
+     * - `full` (default): open the camera after MoveNet warm-up — use on the
+     *   visible camera screen (user expects the permission prompt).
+     * - `basic`: model + WebGL only — use on hidden warmers / lobby screens so
+     *   preload never triggers getUserMedia unexpectedly.
+     */
+    coldStart?: 'basic' | 'full';
+    /**
+     * Boot overlay label (WebView `loading_message` query param parity).
+     * Default `"AI Loading"`. Technical progress (`accessing webcam`, backend,
+     * medianMs, …) is emitted as `initialization` / `diag` events — not shown
+     * on the branded loading UI.
+     */
+    loadingText?: string;
+    /**
+     * Force the bottom-right PoseTracker watermark on/off. When omitted, the
+     * SDK derives it from the configure manifest plan: shown for keyless /
+     * `free` / non-paid; hidden for paid plans (`developer`, `enterprise`, …).
+     * Always off for `coldStart: 'basic'` warmers.
+     */
+    showWatermark?: boolean;
+    /**
+     * Custom skeleton overlay (Strapi document shape). When omitted, the page
+     * uses the PoseTracker API default (navy `#010A73` + gold `#FFC300`).
+     * Takes precedence over {@link skeletonUuid}.
+     */
+    skeletonDef?: SkeletonDefinition | null;
+    /**
+     * Load a custom skeleton by Strapi `api_uuid` (WebView `?skeleton=<uuid>`).
+     * Fetched via `GET /api/sdk/skeleton`. Ignored if `skeletonDef` is set.
+     */
+    skeletonUuid?: string | null;
+    onPose?: (pose: Pose, stats: {
+        inferenceTimeMs: number;
+        timestampMs: number;
+    }) => void;
+    children?: React.ReactNode;
+}
+export declare function WebViewPoseView(props: WebViewPoseViewProps): React.ReactElement;

package/lib/camera/WebViewPoseView.js

@@ -0,0 +1,312 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebViewPoseView = WebViewPoseView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Camera + inference surface for {@link WebViewPoseBackend} — the SDK's
+ * default runtime on BOTH platforms (light / online variant).
+ *
+ * Renders a Chromium/WKWebView that owns getUserMedia + MoveNet Lightning
+ * (TF.js WebGL). TF.js loads from CDN; the model loads from a URL each boot
+ * (default: PoseTracker Front MoveNet Lightning).
+ *
+ * Camera capture resolution is driven by {@link AdaptiveQualityController}
+ * (AdaptiveChoice + crash-loop guard + live FPS downgrades).
+ *
+ * Requires peer `react-native-webview` (included in Expo Go) and network
+ * access for the first model / TF.js fetch.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const PoseTrackerProvider_1 = require("../PoseTrackerProvider");
+const WebViewPoseBackend_1 = require("../backends/webview/WebViewPoseBackend");
+const poseHtml_1 = require("../backends/webview/poseHtml");
+const profiles_1 = require("../quality/profiles");
+const features_1 = require("../types/features");
+function getReactNativeWebView() {
+    try {
+        return require('react-native-webview');
+    }
+    catch {
+        return null;
+    }
+}
+function injectQuality(webRef, profile) {
+    const payload = JSON.stringify({
+        idealWidth: profile.idealWidth,
+        idealHeight: profile.idealHeight,
+        idealFrameRate: profile.idealFrameRate,
+        profileId: profile.id,
+    });
+    webRef.current?.injectJavaScript?.(`window.__PT_SET_QUALITY && window.__PT_SET_QUALITY(${payload}); true;`);
+}
+function WebViewPoseView(props) {
+    const { client, manifest } = (0, PoseTrackerProvider_1.usePoseTracker)();
+    const backend = client.getBackend();
+    const webviewMod = (0, react_1.useMemo)(() => getReactNativeWebView(), []);
+    const webRef = (0, react_1.useRef)(null);
+    /** Boot-time profile only — mid-session downgrades use injectJavaScript. */
+    const [bootProfile, setBootProfile] = (0, react_1.useState)(null);
+    /** Bundled pose-runtime parts (TF.js + MoveNet + page runtime). */
+    const [runtimeParts, setRuntimeParts] = (0, react_1.useState)(null);
+    const [runtimeError, setRuntimeError] = (0, react_1.useState)(null);
+    const isWebViewBackend = backend instanceof WebViewPoseBackend_1.WebViewPoseBackend;
+    const facingMode = props.position === 'back' ? 'environment' : 'user';
+    const drawSkeleton = props.drawSkeleton ?? true;
+    const drawPlacementBox = props.drawPlacementBox ?? true;
+    const placementPaddingPercent = props.placementPaddingPercent ?? 10;
+    /** Camera screens default to full; warmers must pass `basic`. */
+    const coldStart = props.coldStart ?? 'full';
+    const loadingText = typeof props.loadingText === 'string' && props.loadingText.trim().length > 0
+        ? props.loadingText.trim()
+        : poseHtml_1.DEFAULT_LOADING_TEXT;
+    /** Plan from configure manifest — drives watermark when prop is omitted. */
+    const planType = manifest?.plan?.plan ?? client.getPlanType();
+    /**
+     * Plan-gated watermark (override via prop). Recomputed when configure
+     * resolves a new manifest so upgrades hide the mark without remount.
+     */
+    const resolvedShowWatermark = coldStart === 'basic'
+        ? false
+        : (props.showWatermark ?? (0, features_1.shouldShowWatermark)(planType));
+    const [showPlacementBox, setShowPlacementBox] = (0, react_1.useState)(false);
+    const [resolvedSkeleton, setResolvedSkeleton] = (0, react_1.useState)(props.skeletonDef ?? null);
+    // Resolve custom skeleton: explicit def wins; else fetch by uuid (API parity).
+    (0, react_1.useEffect)(() => {
+        if (props.skeletonDef) {
+            setResolvedSkeleton(props.skeletonDef);
+            return;
+        }
+        const uuid = props.skeletonUuid?.trim();
+        if (!uuid || uuid === 'true' || uuid === 'false') {
+            setResolvedSkeleton(null);
+            return;
+        }
+        let cancelled = false;
+        client
+            .fetchSkeleton(uuid)
+            .then((def) => {
+            if (!cancelled)
+                setResolvedSkeleton(def);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setResolvedSkeleton(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client, props.skeletonDef, props.skeletonUuid]);
+    // WebView postureBox parity: show guide while placement is not ready.
+    (0, react_1.useEffect)(() => {
+        if (!drawPlacementBox) {
+            setShowPlacementBox(false);
+            return;
+        }
+        return client.addEventListener((event) => {
+            if (event.type === 'posture') {
+                setShowPlacementBox(!event.ready);
+            }
+            else if (event.type === 'exercise_summary') {
+                setShowPlacementBox(false);
+            }
+        });
+    }, [client, drawPlacementBox]);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (async () => {
+            const resolved = await client.resolveQualityProfile();
+            if (cancelled)
+                return;
+            await client.beginQualitySession();
+            if (cancelled)
+                return;
+            setBootProfile(resolved);
+        })().catch(() => {
+            // Fall back to UltraLite constraints embedded in buildPoseHtml defaults.
+            if (!cancelled) {
+                setBootProfile({
+                    id: 'ultralite',
+                    label: 'UltraLite (fallback)',
+                    idealWidth: 480,
+                    idealHeight: 360,
+                    idealFrameRate: 24,
+                    minStableFps: (0, profiles_1.getMinTargetFps)(),
+                });
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    // Resolve online runtime descriptor (CDN + model URL + thin page runtime).
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        client
+            .getRuntimeParts()
+            .then((parts) => {
+            if (!cancelled)
+                setRuntimeParts(parts);
+        })
+            .catch((err) => {
+            if (!cancelled) {
+                setRuntimeError(err instanceof Error ? err.message : String(err));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [client]);
+    // Watermark plan upgrades inject `__PT_SET_WATERMARK` (no remount); snapshot
+    // `resolvedShowWatermark` into the initial HTML only.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- watermark via inject
+    const html = (0, react_1.useMemo)(() => {
+        if (!bootProfile || !runtimeParts)
+            return null;
+        return (0, poseHtml_1.buildPoseHtml)(runtimeParts, {
+            facingMode,
+            idealWidth: bootProfile.idealWidth,
+            idealHeight: bootProfile.idealHeight,
+            idealFrameRate: bootProfile.idealFrameRate,
+            profileId: bootProfile.id,
+            minTargetFps: (0, profiles_1.getMinTargetFps)(),
+            drawSkeleton,
+            coldStart,
+            loadingText,
+            showWatermark: resolvedShowWatermark,
+            // Default API skeleton is baked into the page runtime; customs are
+            // injected via __PT_SET_SKELETON (avoids remounting on uuid fetch).
+            skeletonDef: props.skeletonDef ?? null,
+            capturePriority: client.getQualityState().capturePriority,
+        });
+    }, [
+        facingMode,
+        bootProfile,
+        runtimeParts,
+        client,
+        drawSkeleton,
+        coldStart,
+        loadingText,
+        props.skeletonDef,
+    ]);
+    // Apply custom skeleton (uuid fetch or prop) without remounting the page.
+    (0, react_1.useEffect)(() => {
+        if (!isWebViewBackend || !html)
+            return;
+        const payload = JSON.stringify(resolvedSkeleton);
+        webRef.current?.injectJavaScript?.(`window.__PT_SET_SKELETON && window.__PT_SET_SKELETON(${payload}); true;`);
+    }, [isWebViewBackend, html, resolvedSkeleton]);
+    // Plan / prop watermark updates without remounting.
+    (0, react_1.useEffect)(() => {
+        if (!isWebViewBackend || !html)
+            return;
+        webRef.current?.injectJavaScript?.(`window.__PT_SET_WATERMARK && window.__PT_SET_WATERMARK(${resolvedShowWatermark ? 'true' : 'false'}); true;`);
+    }, [isWebViewBackend, html, resolvedShowWatermark]);
+    // loadingText prop updates without remounting (html rebuild still covers
+    // first paint via useMemo).
+    (0, react_1.useEffect)(() => {
+        if (!isWebViewBackend || !html)
+            return;
+        const payload = JSON.stringify(loadingText);
+        webRef.current?.injectJavaScript?.(`window.__PT_SET_LOADING_TEXT && window.__PT_SET_LOADING_TEXT(${payload}); true;`);
+    }, [isWebViewBackend, html, loadingText]);
+    (0, react_1.useEffect)(() => {
+        if (!(backend instanceof WebViewPoseBackend_1.WebViewPoseBackend)) {
+            return;
+        }
+        backend.setAttached(true);
+        backend.setOnPose((pose, inferenceTimeMs) => {
+            client.ingestPose(pose);
+            props.onPose?.(pose, { inferenceTimeMs, timestampMs: pose.timestampMs });
+        });
+        backend.setOpenCameraHandler(() => {
+            webRef.current?.injectJavaScript?.('window.__PT_OPEN_CAMERA && window.__PT_OPEN_CAMERA(); true;');
+        });
+        // Live downgrades restart getUserMedia without remounting the WebView.
+        client.setQualityApplyHandler((next) => {
+            injectQuality(webRef, next);
+        });
+        return () => {
+            backend.setOnPose(undefined);
+            backend.setOpenCameraHandler(undefined);
+            backend.setAttached(false);
+            client.setQualityApplyHandler(undefined);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- attach once per backend identity
+    }, [backend, client]);
+    // Battery / thermal safety: release the in-page camera and halt the
+    // inference loop while the app is backgrounded, reacquire on foreground.
+    // Skip resume injection for basic (model-only) pages — no camera to reopen.
+    (0, react_1.useEffect)(() => {
+        if (!isWebViewBackend)
+            return;
+        const sub = react_native_1.AppState.addEventListener('change', (state) => {
+            if (state === 'background') {
+                webRef.current?.injectJavaScript?.('window.__PT_SUSPEND && window.__PT_SUSPEND(); true;');
+            }
+            else if (state === 'active' && coldStart === 'full') {
+                webRef.current?.injectJavaScript?.('window.__PT_RESUME && window.__PT_RESUME(); true;');
+            }
+            // 'inactive' (iOS control center / app switcher) is intentionally
+            // ignored: brief overlays shouldn't tear the camera down.
+        });
+        return () => sub.remove();
+    }, [isWebViewBackend, coldStart]);
+    if (!webviewMod) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.fill, styles.center, props.style], children: (0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: styles.error, children: ["react-native-webview is required for the Chromium pose backend. Run:", '\n', "npm install react-native-webview (or npx expo install react-native-webview)"] }) }));
+    }
+    if (!isWebViewBackend) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.fill, styles.center, props.style], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.error, children: "WebViewPoseView requires the WebView backend (preferredBackend 'auto' or 'webview') \u2014 the client is on Apple Vision (use PoseCameraView instead)." }) }));
+    }
+    if (runtimeError) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.fill, styles.center, props.style], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.error, children: runtimeError }) }));
+    }
+    if (!html || !bootProfile) {
+        return (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.fill, props.style] });
+    }
+    const WebView = webviewMod.WebView;
+    const wvBackend = backend;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.fill, props.style], collapsable: false, children: [(0, jsx_runtime_1.jsx)(WebView, { ref: webRef, style: react_native_1.StyleSheet.absoluteFill, originWhitelist: ['*'], 
+                // Same synthetic origin as the offline SDK. getUserMedia in RN
+                // WebView is reliable on https://localhost/; pointing baseUrl at a
+                // real product host (app.posetracker.com) can leave the page stuck
+                // on the boot overlay with a 0×0 / never-granted camera stream.
+                // Model + weights use absolute URLs with Access-Control-Allow-Origin: *.
+                source: { html, baseUrl: 'https://localhost/' }, allowFileAccess: true, mixedContentMode: "always", mediaPlaybackRequiresUserAction: false, mediaCapturePermissionGrantType: "grant", allowsInlineMediaPlayback: true, javaScriptEnabled: true, domStorageEnabled: true, 
+                // Android: needed for getUserMedia in WebView
+                setSupportMultipleWindows: false, 
+                // NOTE: never set androidLayerType — 'hardware'/'software' force the
+                // WebView into an Android View layer instead of its native SurfaceView
+                // path and destroy WebGL/video performance. Default ('none') is correct.
+                // Skeleton is drawn inside the HTML — Android WebView often composites
+                // above RN siblings, so PoseOverlay children are not visible there.
+                onMessage: (event) => {
+                    wvBackend.handleMessage(event.nativeEvent.data);
+                }, onError: (e) => {
+                    wvBackend.handleMessage(JSON.stringify({
+                        type: 'error',
+                        message: e.nativeEvent.description ?? 'WebView error',
+                    }));
+                } }), showPlacementBox ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [
+                    styles.placementBox,
+                    {
+                        top: `${placementPaddingPercent}%`,
+                        bottom: `${placementPaddingPercent}%`,
+                        left: `${placementPaddingPercent}%`,
+                        right: `${placementPaddingPercent}%`,
+                    },
+                ] })) : null, props.children] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    fill: { flex: 1, backgroundColor: '#000' },
+    center: { alignItems: 'center', justifyContent: 'center', padding: 16 },
+    error: { color: '#FE8370', textAlign: 'center', fontSize: 13 },
+    /** Front drawPostureBox stroke `#FE8370`. */
+    placementBox: {
+        position: 'absolute',
+        borderWidth: 3,
+        borderColor: '#FE8370',
+        borderRadius: 8,
+        backgroundColor: 'transparent',
+    },
+});