WebViewPoseView

WebViewPoseView mounts the MoveNet WebView page: boot UI, pose input (camera / uploaded video / still image), skeleton overlay, and pose streaming. Must be used under PoseTrackerProvider. Peer: react-native-webview.

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

Uploaded media (host picks the file — e.g. expo-image-picker / document picker):

<WebViewPoseView source="image" sourceUri={fileUri} style={{ flex: 1 }} />
<WebViewPoseView source="video" sourceUri={fileUri} style={{ flex: 1 }} />
// or: sourceBase64 + sourceMime (data URL injected into the page)

Props

Prop	Type	Default	Notes
`style`	`StyleProp<ViewStyle>`	—	RN layout (typically `{ flex: 1 }` on the camera screen).
`position`	`'front' \| 'back'`	`'front'`	Mapped to `getUserMedia` `facingMode` (`user` / `environment`).
`source`	`'camera' \| 'video' \| 'image'`	`'camera'`	Input mode. Camera uses `getUserMedia`; video/image need `sourceUri` or `sourceBase64`.
`sourceUri`	`string`	—	`file://`, `content://`, `https://`, or `data:` URL for video/image.
`sourceBase64`	`string`	—	Raw base64 (no `data:` prefix); used with `sourceMime`.
`sourceMime`	`string`	image/jpeg or video/mp4	MIME for `sourceBase64`.
`drawSkeleton`	`boolean`	`true`	In-page skeleton overlay (WebView `skeleton=true\|false`). Pass `false` if you draw from `onKeypoints`.
`drawPlacementBox`	`boolean`	`true`	Placement guide while `posture.ready === false` (WebView `postureBox`). RN sibling overlay.
`placementPaddingPercent`	`number`	`10`	Inset % on each edge (engine posture padding parity).
`coldStart`	`'basic' \| 'full'`	`'full'`	`full` = open camera after warm-up (camera screen). `basic` = model only — lobby / hidden warmer, no permission.
`loadingText`	`string`	`"AI Loading"`	Branded boot label (WebView `loading_message`). Technical progress goes to `initialization` events, not this UI.
`showWatermark`	`boolean`	plan-derived	Omit for automatic: shown keyless/`free`; hidden paid. Always off for `coldStart: 'basic'`.
`skeletonDef`	`SkeletonDefinition \| null`	PoseTracker navy+gold	Inline overlay theme. Takes precedence over `skeletonUuid`.
`skeletonUuid`	`string \| null`	—	Strapi skeleton `api_uuid` (WebView `?skeleton=<uuid>`). Fetched via SDK API. Ignored if `skeletonDef` is set.
`onPose`	`(pose, stats) => void`	—	Low-level pose + `{ inferenceTimeMs, timestampMs }` from the WebView backend. Prefer `usePoseTracker({ onKeypoints })` for app UI.
`children`	`ReactNode`	—	Rendered as siblings over the WebView (HUD, CTAs).

Defaults that matter

Use case	Recommended props
Camera screen	omit `coldStart` (→ `full`), `drawSkeleton`
Uploaded image	`source="image"` + `sourceUri` (host file picker)
Uploaded video	`source="video"` + `sourceUri`
Lobby warmer (1×1)	`coldStart="basic"`, hide with opacity / size
Custom brand overlay	`drawSkeleton={false}` + draw from `onKeypoints`
Custom skeleton theme	`skeletonUuid="…"` or `skeletonDef={{ … }}`

Limitations (video / image)

The host app must obtain the file URI / base64 (SDK does not ship a picker).
Android content:// URIs may need the WebView to be able to read them; prefer copying to a file:// cache path or passing sourceBase64 for large reliability gaps.
Remote https media is subject to WebView / CORS rules.
Image mode emits keypoints once per load (or when the page receives __PT_ANALYZE).

SkeletonDefinition (shape)

When using skeletonDef, fields match the Strapi / Front default:

Field	Notes
`keypoints`	Joint names to draw
`keypoint_lines`	Pairs like `"left_hip\|\|left_knee"`
`circles`	`circleFillColor`, `circleStrokeColor`, `strokeWidth`, `radius`
`lines`	`lineStrokeColor`, `strokeWidth`
`keypoint_angles` / `angles`	Optional angle labels

Default palette: navy #010A73 + gold #FFC300.

Boot UI & watermark

Until the live camera surface is ready (coldStart: 'full'), the page shows a branded cover (logo + spinner + loadingText). The yellow #hud FPS overlay is off by default (internal debug). Watermark (live overlay, bottom-right):

Plan	Watermark
No API key	Shown
`free`	Shown
Paid (`developer`, `company`, `enterprise`, …)	Hidden

Override with showWatermark. Plan upgrades after configure() update the mark without remounting.

Media sources — camera / video / image across RN + web
Permissions — host must request camera before coldStart="full"
Preload lifecycle — hidden basic warmer pattern
Provider & client

Get started

Integrate

Reference

Advanced

AI & agents

Props

Defaults that matter

Limitations (video / image)

SkeletonDefinition (shape)

Boot UI & watermark

​Props

​Defaults that matter

​Limitations (video / image)

​SkeletonDefinition (shape)

​Boot UI & watermark

​Related

Props

Defaults that matter

Limitations (video / image)

SkeletonDefinition (shape)

Boot UI & watermark

Related