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

``bash
npm install biometry-react-components
`

$3

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

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

Components

$3

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

`tsx
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 ;
}
`

#### 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 |

$3

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

`tsx
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 ;
}
`

#### 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 |

$3

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

`tsx
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 ;
}
`

#### 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 |

$3

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

`tsx
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 ;
}
`

#### 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

$3

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

`tsx
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 |

$3

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

`tsx
import usePermissions from 'biometry-react-components';

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

if (isLoading) return

| 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 | Request camera/microphone permissions |
| isLoading | boolean | Loading state during permission request |

$3

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

`tsx
import useAudioPermissions from 'biometry-react-components';

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

if (isLoading) return

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

License

MIT License - see the LICENSE file for details.