biometry-react-components

React UI component library with tools to work with camera and microphone for easier integration of Biometry services. This library could be used in combination with Biometry SDK

Installation

npm install biometry-react-components

Peer Dependencies

This library requires React 16.8.0 or higher (supports React Hooks):

{
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}

Components

DocScan

Captures ID documents, driver license and etc. Suitable component for Biometry's DocAuth.

import { DocScan } from 'biometry-react-components';

function DocumentCapture() {
  const handleConfirmCapture = (file: File) => {
    console.log('Confirmed captured document:', file);
    // Send file to your endpoint that will process DocAuth (we recommend this way, because you will not expose the API key on client side)
    // or
    // const response = await sdk.checkDocAuth(file, userFullName, { sessionId });
  };

  return <DocScan onConfirmCapture={handleConfirmCapture} />;
}

Props

FaceCapture

Captures facial images with an oval guidance overlay. Ideal for Face Match and Face Enrollment.

import { FaceCapture } from 'biometry-react-components';

function FaceCapture() {
  const handleConfirmCapture = (file: File) => {
    console.log('Confirmed captured face:', file);
    // const response = await sdk.enrollFace(file, 'John Doe');
  };

  return <FaceCapture onConfirmCapture={handleConfirmCapture} />;
}

Props

FaceRecorder

Records video with facial guidance overlay and displays 10 random numbers (0-9) for the user to read aloud. Automatically extracts audio from the recorded video. This component could be used for Process Video and Voice Enrollment

import { FaceRecorder } from 'biometry-react-components';

function FaceRecorder() {
  const handleConfirm = (video: File, audio: File, phrase: string) => {
    console.log('Confirmed video:', video);
    console.log('Confirmed audio:', audio);
    console.log('Phrase:', phrase);
    // Send files to your endpoint that will process the biometric data
    // const response = await sdk.processVideo(video, phrase, userFullName);
    // or
    // const voiceResponse = await sdk.enrollVoice(audio, userFullName);
  };

  return <FaceRecorder onConfirmRecording={handleConfirm} />;
}

Props

VoiceRecorder

Records audio with real-time waveform visualization and adaptive quality settings. Use this for Voice Enrollment

import { VoiceRecorder } from 'biometry-react-components';

function VoiceRecorder() {
  const handleConfirm = (file: File, phrase: string) => {
    console.log('Confirmed audio:', file);
    console.log('Phrase:', phrase);
    // const response = await sdk.enrollVoice(file, 'John Doe');
  };

  return <VoiceRecorder onConfirmRecording={handleConfirm} />;
}

Props

Custom Hooks

useRecorder

A powerful hook for recording audio and video with adaptive quality settings and automatic format detection.

import { useRecorder } from 'biometry-react-components';

function CustomRecorder() {
  const mediaStream = // ... your media stream

  const { 
    isRecording, 
    startRecording, 
    stopRecording, 
    cancelRecording 
  } = useRecorder(mediaStream, "video", (blob) => {
    console.log('Recording completed:', blob);
  });

  return (
    ...
  );
}

Parameters

Returns

usePermissions

Hook for managing camera and microphone permissions with adaptive quality constraints.

import usePermissions from 'biometry-react-components';

function PermissionManager() {
  const { 
    permission, 
    stream, 
    stopStreamTracks, 
    requestPermissions, 
    isLoading 
  } = usePermissions({ rectWidth: 1280, rectHeight: 720 });

  if (isLoading) return <div>Loading...</div>;

  if (!permission) {
    return <button onClick={requestPermissions}>Grant Permissions</button>;
  }

  return <div>Camera and microphone access granted!</div>;
}

Parameters

Returns

useAudioPermissions

Specialized hook for audio-only permissions with optimized audio constraints.

import useAudioPermissions from 'biometry-react-components';

function AudioPermissionManager() {
  const { 
    permission, 
    stream, 
    stopStreamTracks, 
    requestPermissions, 
    isLoading 
  } = useAudioPermissions();

  if (isLoading) return <div>Loading...</div>;

  if (!permission) {
    return <button onClick={requestPermissions}>Grant Microphone Access</button>;
  }

  return <div>Microphone access granted!</div>;
}

Returns

License

MIT License - see the LICENSE file for details.