React Hooks¶

function CustomLivenessUI() {
  const {
    status,
    result,
    error,
    framesReceived,
    framesRequired,
    feedbackMessage,
    start,
    reset,
  } = useLiveness({
    mode: 'stream',
    onResult: (r) => console.log('Done:', r.verdict),
  });

  return (
    <div>
      {status === 'idle' && <button onClick={start}>Begin</button>}
      {status === 'capturing' && <p>{feedbackMessage}</p>}
      {status === 'capturing' && <p>{framesReceived}/{framesRequired}</p>}
      {status === 'processing' && <p>Analyzing...</p>}
      {result && <p>Verdict: {result.verdict}</p>}
      {error && <p>Error: {error.message}</p>}
      {(result || error) && <button onClick={reset}>Try Again</button>}
    </div>
  );
}

function CameraPreview() {
  const { videoRef, isReady, error, hasPermission, requestPermission } = useCamera();

  if (!hasPermission) {
    return <button onClick={requestPermission}>Enable Camera</button>;
  }

  if (error) return <p>Camera error: {error.message}</p>;

  return (
    <video
      ref={videoRef}
      autoPlay
      playsInline
      muted
      style={{ width: '100%' }}
    />
  );
}

function ManualCapture() {
  const { videoRef } = useCamera();
  const { captureFrame, capturedFrames, frameCount } = useFrameCapture(videoRef);

  const handleCapture = () => {
    const frame = captureFrame();
    console.log(`Captured frame ${frameCount}:`, frame.index);
  };

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline muted />
      <button onClick={handleCapture}>Capture ({frameCount}/10)</button>
    </div>
  );
}

function FaceDetectionPreview() {
  const { videoRef } = useCamera();
  const { detectionResult, isInitialized } = useFaceDetection(videoRef, {
    adapter: createMediaPipeAdapter(),
  });

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline muted />
      {isInitialized && detectionResult?.faceDetected && (
        <p>Face detected!</p>
      )}
    </div>
  );
}

function SmartCapture() {
  const { videoRef } = useCamera();
  const {
    state,
    progress,
    feedback,
    ovalState,
    start,
    stop,
    reset,
    restart,
  } = useSmartFrameCapture({
    videoRef,
    targetFrames: 10,
    captureMode: 'full',
    onComplete: (captured) => {
      console.log('All frames captured:', captured.length);
      // Send frames to API...
    },
  });

  return (
    <div>
      <video ref={videoRef} autoPlay playsInline muted />

      {feedback && <p>{feedback}</p>}
      <p>
        Frames: {progress.current}/{progress.total}
      </p>
      <p>Oval: {ovalState}</p>

      {state === 'idle' && <button onClick={start}>Start</button>}
      {state === 'complete' && <button onClick={reset}>Try Again</button>}

      {state !== 'idle' && <button onClick={() => restart()}>Restart</button>}
    </div>
  );
}

const detectionPassedRef = useRef(true);

useSmartFrameCapture({
  videoRef,
  detectionGate: () => detectionPassedRef.current,
  onFrameCapture: (frame) => {
    console.log('Captured frame:', frame.index);
  },
});

const restartRef = useRef<() => void>(() => {});
const onRestartNeeded = useCallback(() => restartRef.current(), []);

const { detectionGate, getWarnings } = useDetectionPipeline({
  videoRef,
  enabled: isSessionOpen,
  onRestartNeeded,
  onGazeFeedback: (message) => setGazeFeedback(message), // optional
});

const { start, stop, restart } = useSmartFrameCapture({
  videoRef,
  targetFrames: 10,
  captureMode: 'full',
  detectionGate,
  onComplete: (frames) => {
    const warnings = getWarnings();
    // Submit frames + warnings to your API...
    submitFrames(frames, warnings);
  },
});

// Wire restart after the hook call.
restartRef.current = restart;

function ModelPicker() {
  const { activeModels, deprecatedModels, loading } = useModels();

  if (loading) return <span>Loading models…</span>;

  return (
    <select>
      {activeModels.map((m) => (
        <option key={m.id} value={m.id}>
          {m.label} ({m.min_frames} frames)
        </option>
      ))}
      {deprecatedModels.length > 0 && (
        <optgroup label="Deprecated">
          {deprecatedModels.map((m) => (
            <option key={m.id} value={m.id}>
              {m.label} (deprecated)
            </option>
          ))}
        </optgroup>
      )}
    </select>
  );
}