Skip to content

React Components

The @moveris/react package provides 10 UI components for building liveness verification flows. All components accept style overrides for customization.

In plain terms

Ready-made UI pieces: camera view, face overlay, capture button, result display. Use LivenessView for a complete flow, or mix individual components (LivenessCamera, LivenessOverlay, etc.) for custom layouts.

Import

import {
  LivenessView,
  LivenessModal,
  LivenessCamera,
  LivenessOverlay,
  LivenessButton,
  LivenessResult,
  CapturedFramesPanel,
  FrameCounter,
  ErrorBoundary,
} from '@moveris/react';

LivenessView

The main all-in-one component that provides camera preview, face guide overlay, capture controls, and result display.

This is the recommended starting point for most integrations.

<LivenessView
  onResult={(result) => console.log(result.verdict)}
  onError={(error) => console.error(error)}
  enableFaceDetection={false}
  showFrameCounter={true}
/>

Props

Prop Type Default Description
onResult (result: LivenessResult) => void -- Called when verification completes
onError (error: Error) => void -- Called on error
sessionId string auto-generated Optional. Session ID for all API calls. If omitted, a UUID v4 is generated per start().
endpoint 'fast-check-crops' \| 'fast-check-stream' \| 'fast-check' 'fast-check-crops' API endpoint. Use fast-check-stream for streaming.
enableFaceDetection boolean false Enable smart face detection
faceDetectorAdapter FaceDetectorAdapter -- Face detector (e.g., createMediaPipeAdapter())
showFrameCounter boolean true Show frame progress counter
showCapturedFrames boolean false Show debug panel with captured frame thumbnails
style CSSProperties -- Container style overrides

LivenessModal

Modal wrapper around LivenessView. Opens as an overlay on top of your content.

<LivenessModal
  isOpen={isModalOpen}
  onClose={() => setIsModalOpen(false)}
  onResult={(result) => handleResult(result)}
  onError={(error) => handleError(error)}
/>

Props

Prop Type Default Description
isOpen boolean -- Required. Controls modal visibility
onClose () => void -- Required. Called when user closes the modal
onResult (result: LivenessResult) => void -- Called when verification completes
onError (error: Error) => void -- Called on error
sessionId string auto-generated Optional. Session ID for API calls (same as LivenessView).
title string "Liveness Verification" Modal title

All LivenessView props are also accepted and passed through.

LivenessCamera

Camera feed component with an imperative ref for controlling capture.

import { useRef } from 'react';
import { LivenessCamera } from '@moveris/react';

function MyCapture() {
  const cameraRef = useRef(null);

  const capture = async () => {
    const frame = await cameraRef.current?.captureFrame();
    console.log('Captured:', frame);
  };

  return (
    <>
      <LivenessCamera ref={cameraRef} facingMode="user" />
      <button onClick={capture}>Capture Frame</button>
    </>
  );
}

Props

Prop Type Default Description
facingMode "user" \| "environment" "user" Camera facing mode
width number 640 Video width
height number 480 Video height
onReady () => void -- Called when camera is initialized
onError (error: Error) => void -- Called on camera error
style CSSProperties -- Container style overrides

Ref Methods

Method Returns Description
captureFrame() Promise<CapturedFrame> Capture a single frame
startStream() Promise<void> Start the camera stream
stopStream() void Stop the camera stream

LivenessOverlay

Face guide oval overlay that provides visual feedback on face alignment.

<LivenessOverlay
  state="aligning"
  feedbackMessage="Center your face in the oval"
/>

Props

Prop Type Default Description
state "searching" |
"aligning" |
"ready" | "capturing"		 "searching" Oval guide visual state
feedbackMessage string -- Message displayed below the oval
style CSSProperties -- Overlay style overrides

LivenessButton

Styled action button for start, stop, and retry actions.

<LivenessButton
  label="Start Verification"
  onClick={handleStart}
  variant="primary"
  disabled={isProcessing}
/>

Props

Prop Type Default Description
label string -- Button text
onClick () => void -- Click handler
variant "primary" |
"secondary" |
"danger"		 "primary" Visual style
disabled boolean false Disable the button
loading boolean false Show loading spinner

LivenessResult

Displays the verification result with verdict, score, and realScore (use for decision-making).

<LivenessResult
  result={livenessResult}
  onRetry={handleRetry}
/>

Props

Prop Type Default Description
result LivenessResult -- Required. The verification result
onRetry () => void -- Called when user clicks retry
showDetails boolean true Show score and confidence details

CapturedFramesPanel

Debug panel that shows thumbnails of captured frames. Useful during development.

<CapturedFramesPanel
  frames={capturedFrames}
  maxVisible={5}
/>

Props

Prop Type Default Description
frames CapturedFrame[] -- Array of captured frames
maxVisible number 10 Maximum thumbnails to display

FrameCounter

Displays frame capture progress (e.g., "3/10" or "15/30" depending on model).

<FrameCounter
  current={framesReceived}
  total={framesRequired}
/>

Props

Prop Type Default Description
current number -- Frames captured so far
total number -- Total frames required
style CSSProperties -- Style overrides

ErrorBoundary

Error boundary wrapper that catches rendering errors in child components.

<ErrorBoundary
  fallback={<p>Something went wrong. Please refresh.</p>}
  onError={(error) => logError(error)}
>
  <LivenessView onResult={handleResult} />
</ErrorBoundary>

Props

Prop Type Default Description
children ReactNode -- Components to wrap
fallback ReactNode -- UI to show when an error occurs
onError (error: Error) => void -- Error callback

Context Provider

MoverisProvider

Provides SDK configuration to all child components and hooks.

import { MoverisProvider } from '@moveris/react';

<MoverisProvider
  config={{
    apiKey: 'sk-your-api-key',
    baseUrl: 'https://api.moveris.com',
    timeout: 30000,
    enableRetry: true,
  }}
>
  {/* Your app */}
</MoverisProvider>

useMoverisContext()

Access the provider configuration:

import { useMoverisContext } from '@moveris/react';

const { config } = useMoverisContext();

useLivenessClient()

Access the LivenessClient instance created by the provider:

import { useLivenessClient } from '@moveris/react';

const client = useLivenessClient();
const health = await client.health();

Style Utilities

The SDK exports style helpers for customization:

import {
  mergeStyles,
  containerStyles,
  videoStyles,
  overlayStyles,
  faceGuideStyles,
  buttonStyles,
} from '@moveris/react';

// Merge custom styles with defaults
const customContainer = mergeStyles(containerStyles, {
  backgroundColor: '#1a1a2e',
  borderRadius: '12px',
});