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

| Prop | Type | Default | Description | |------|------|---------|-------------| | onConfirmCapture | (file: File) => void | required | Callback with captured image file. Triggered when the user confirms the captured image/document | | onCapture | (file: File) => void | optional | Callback with captured image file. Triggered automatically when image/document capture finishes. | | rectWidth | number | 640 | Width of camera area | | rectHeight | number | 400 | Height of camera area | | className | string | - | Custom CSS class | | style | React.CSSProperties | - | Custom inline styles | | noShadow | boolean | false | Remove shadow and border radius |

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

| Prop | Type | Default | Description | |------|------|---------|-------------| | onConfirmCapture | (file: File) => void | required | Callback with captured image file. Triggered when the user confirms the captured image | | onCapture | (file: File) => void | optional | Callback with captured image file. Triggered automatically when user captures the image. | | rectWidth | number | 360 | Width of camera area | | rectHeight | number | 576 | Height of camera area | | className | string | - | Custom CSS class | | style | React.CSSProperties | - | Custom inline styles | | noShadow | boolean | false | Remove shadow and border radius |

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

| Prop | Type | Default | Description | |------|------|---------|-------------| | onConfirmRecording | (video: File, audio: File, phrase: string) => void | required | Triggered when the user confirms they want to use the recorded video. Provides both media files and the spoken phrase. | | onRecorded | (video: File, audio: File, phrase: string) => void | optional | Triggered automatically right after recording finishes. Useful for pre-uploading or background processing. | | rectWidth | number | 360 | Width of camera area | | rectHeight | number | 576 | Height of camera area | | className | string | - | Custom CSS class | | style | React.CSSProperties | - | Custom inline styles | | noShadow | boolean | false | Remove shadow and border radius |

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

| Prop | Type | Default | Description | |------|------|---------|-------------| | onConfirmRecording | (file: File, phrase: string) => void | required | Callback with captured audio file and phrase. Triggered when the user confirms the recorded media | | onRecorded | (file: File, phrase: string) => void | optional | Callback with captured audio file and phrase. Triggered automatically when recording finishes | | rectWidth | number | 360 | Width of component area | | rectHeight | number | undefined | Height of component area (optional) | | className | string | - | Custom CSS class | | style | React.CSSProperties | - | Custom inline styles | | noShadow | boolean | false | Remove shadow and border radius |

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

| Parameter | Type | Description | |-----------|------|-------------| | stream | MediaStream \| null | Media stream to record from | | type | "audio" \| "video" | Type of media to record | | onStopRecording | (blob: Blob) => void | Callback when recording stops |

Returns

| Property | Type | Description | |----------|------|-------------| | isRecording | boolean | Current recording state | | startRecording | () => void | Start recording function | | stopRecording | () => void | Stop recording function | | cancelRecording | () => void | Cancel recording function |

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

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | rectWidth | number | 1920 | Desired video width | | rectHeight | number | 1080 | Desired video height |

Returns

| Property | Type | Description | |----------|------|-------------| | permission | boolean | Permission granted status | | stream | MediaStream \| null | Active media stream | | stopStreamTracks | () => void | Stop all media tracks | | requestPermissions | () => Promise<void> | Request camera/microphone permissions | | isLoading | boolean | Loading state during permission request |

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

| Property | Type | Description | |----------|------|-------------| | permission | boolean | Audio permission granted status | | stream | MediaStream \| null | Active audio stream | | stopStreamTracks | () => void | Stop all audio tracks | | requestPermissions | () => Promise<void> | Request microphone permissions | | isLoading | boolean | Loading state during permission request |

License

MIT License - see the LICENSE file for details.