Capture-id Module (Legacy)

Overview

The Capture-id module is the legacy document capture solution that uses AI-powered detection to automatically capture ID documents with OCR data extraction. While still supported, consider using Capture-id&R or Capture-id&A for enhanced features and vendor-specific integrations.

This is a legacy module. For new implementations, consider using Capture-id&R (Regula) or Capture-id&A (Acuant) for enhanced features.

Key Features

AI-Powered Detection: Automatic ID detection and capture
Real-time Feedback: Visual guidance for document positioning
OCR Extraction: Extract text data from ID documents
Quality Checks: Built-in validation for blur and document quality
Multi-side Capture: Support for front and back capture
Customizable UI: Full customization of detection feedback and styling
No External Dependencies: Self-contained solution without third-party vendors

Hardware Requirements

Modern web browser with camera access
Device camera (mobile or desktop)
Stable internet connection
HTTPS protocol (required for camera access)
WebRTC support

Installation

npm install @fad-producto/fad-sdk

Implementation

Import SDK and Configure

Import the FAD SDK and set up your configuration:

import FadSDK from '@fad-producto/fad-sdk';

const TOKEN = 'YOUR_FAD_TOKEN';

const CONFIGURATION = {
  views: {
    instructions: false,
    preview: false,
  },
};

Customize Detection Legends

Set up real-time detection feedback messages:

const CONFIGURATION = {
  // ... previous config
  customization: {
    moduleCustomization: {
      legends: {
        title: 'ID Capture',
        detection: {
          noDocument: 'Place document in frame',
          goodDocument: 'Hold steady',
          bigDocument: 'Move away',
          smallDocument: 'Move closer',
          invalidBack: 'Show front side',
          invalidFront: 'Show back side',
          blurryDocument: 'Document unclear, hold steady',
        },
        subtitle: {
          front: 'Front',
          back: 'Back',
        },
        instruction: {
          front: 'ID Capture',
          back: 'ID Capture',
        },
      },
    },
  },
};

Customize Visual Styling

Configure the detection UI appearance:

const CONFIGURATION = {
  // ... previous config
  customization: {
    moduleCustomization: {
      style: {
        outerBackgroundColor: '#2b2b2b66',
        idDetectedOuterBackgroundColor: '#0a0a0ab3',
        detectionBorder: {
          initial: {
            color: '#FFFFFF',
            style: 'solid',
            width: '4px',
          },
          warning: {
            color: '#FFDC45',
            style: 'solid',
            width: '4px',
          },
          detected: {
            color: '#009895',
            style: 'solid',
            width: '4px',
          },
        },
        instruction: {
          initial: {
            backgroundColor: '#000000b5',
            color: '#FFFFFF',
          },
          warning: {
            backgroundColor: '#FFDC45B5',
            color: '#FFFFFF',
          },
          detected: {
            backgroundColor: '#009895',
            color: '#FFFFFF',
          },
        },
      },
    },
  },
};

Initialize SDK and Start Capture

Create the SDK instance and start the capture process:

async function initProcess() {
  const options = {
    environment: FadSDK.getFadEnvironments().UATHA,
  };

  const FAD_SDK = new FadSDK(TOKEN, options);
  
  try {
    const captureIdResponse = await FAD_SDK.startCaptureId(CONFIGURATION);

    console.log('Process completed', captureIdResponse);

    // Access captured data
    const frontImage = captureIdResponse.data.image.front.data;
    const backImage = captureIdResponse.data.image.back?.data;
    const ocrData = captureIdResponse.data.ocr;

    // Display results
    displayResults(frontImage, backImage, ocrData);

  } catch (ex) {
    console.error('Process error:', ex);
    handleError(ex);
  } finally {
    FAD_SDK.end();
  }
}

Response Structure

{
  event: string,  // 'PROCESS_COMPLETED'
  data: {
    image: {
      front: {
        data: string,  // Base64 image of front side
      },
      back?: {
        data: string,  // Base64 image of back side (if applicable)
      }
    },
    ocr: {
      firstName: string,
      lastName: string,
      documentNumber: string,
      dateOfBirth: string,
      address: string,
      // ... additional fields based on document type
    }
  }
}

Error Handling

Handle errors using the SDK error constants:

if (ex.code === FadSDK.Errors.CaptureId.NOT_READABLE_CAMERA) {
  alert('Camera is being used by another application.');
}

Detection States

The module provides real-time feedback based on document detection state:

State	Description	Border Color	Action
`noDocument`	No document detected	White	Place document in frame
`smallDocument`	Document too far	Warning	Move closer
`bigDocument`	Document too close	Warning	Move away
`blurryDocument`	Document unclear	Warning	Hold steady
`goodDocument`	Ready to capture	Success	Hold steady (auto-capture)
`invalidFront`	Wrong side shown	Warning	Show correct side
`invalidBack`	Wrong side shown	Warning	Show correct side

Configuration Options

View Configuration

Control which screens are displayed:

views: {
  instructions: false,  // Hide instruction screen
  preview: false        // Hide preview screen
}

Disabling views creates a streamlined experience but removes user guidance.

Detection Border Styling

Customize the frame border appearance:

detectionBorder: {
  initial: {
    color: '#FFFFFF',    // Default state
    style: 'solid',
    width: '4px',
  },
  warning: {
    color: '#FFDC45',    // Warning states (too close, too far, blur)
    style: 'solid',
    width: '4px',
  },
  detected: {
    color: '#009895',    // Good document detected
    style: 'solid',
    width: '4px',
  },
}

Instruction Styling

Customize the feedback message appearance:

instruction: {
  initial: {
    backgroundColor: '#000000b5',  // Semi-transparent black
    color: '#FFFFFF',
  },
  warning: {
    backgroundColor: '#FFDC45B5',  // Semi-transparent yellow
    color: '#FFFFFF',
  },
  detected: {
    backgroundColor: '#009895',    // Teal green
    color: '#FFFFFF',
  },
}

Path Dependencies

Override default asset paths:

pathDependencies: {
  imageDirectory: 'https://your-cdn.com/images',
  jsDirectory: 'https://your-cdn.com/js',
  images: {
    nativeCaptureInstruction: 'https://your-cdn.com/custom-instruction.png'
  }
}

Usage Examples

Minimal Implementation
With Custom Styling
With Error Handling

import FadSDK from '@fad-producto/fad-sdk';

async function captureId() {
  const FAD_SDK = new FadSDK(TOKEN, {
    environment: FadSDK.getFadEnvironments().UATHA,
  });

  try {
    const response = await FAD_SDK.startCaptureId({
      views: { instructions: false, preview: false }
    });

    return {
      frontImage: response.data.image.front.data,
      backImage: response.data.image.back?.data,
      ocrData: response.data.ocr,
    };
  } finally {
    FAD_SDK.end();
  }
}

const CUSTOM_CONFIG = {
  views: {
    instructions: true,
    preview: true,
  },
  customization: {
    fadCustomization: {
      colors: {
        primary: '#007AFF',
      },
    },
    moduleCustomization: {
      legends: {
        detection: {
          noDocument: 'Position your ID',
          goodDocument: 'Perfect! Hold still',
          smallDocument: 'Get a bit closer',
          bigDocument: 'Move back a little',
          blurryDocument: 'Hold your device steady',
        },
      },
      style: {
        detectionBorder: {
          detected: {
            color: '#00FF00',
            style: 'solid',
            width: '6px',
          },
        },
      },
    },
  },
};

async function captureWithCustomUI() {
  const FAD_SDK = new FadSDK(TOKEN, {
    environment: FadSDK.getFadEnvironments().UATHA,
  });

  try {
    return await FAD_SDK.startCaptureId(CUSTOM_CONFIG);
  } finally {
    FAD_SDK.end();
  }
}

async function robustCaptureId(maxRetries = 3) {
  const FAD_SDK = new FadSDK(TOKEN, {
    environment: FadSDK.getFadEnvironments().UATHA,
  });

  let attempt = 0;

  while (attempt < maxRetries) {
    try {
      const response = await FAD_SDK.startCaptureId(CONFIGURATION);
      return response.data;
    } catch (ex) {
      attempt++;

      if (ex.code === FadSDK.Errors.CaptureId.NOT_READABLE_CAMERA) {
        throw new Error('Camera not accessible');
      }

      if (ex.code === FadSDK.Errors.CaptureId.TF_LITE_ERROR) {
        throw new Error('Browser not supported');
      }

      if (attempt >= maxRetries) {
        throw new Error(`Capture failed after ${maxRetries} attempts`);
      }

      console.log(`Retrying... (${attempt}/${maxRetries})`);
      await new Promise(resolve => setTimeout(resolve, 1000));
    } finally {
      if (attempt >= maxRetries || attempt === 0) {
        FAD_SDK.end();
      }
    }
  }
}

Best Practices

Good Lighting

Instruct users to ensure adequate lighting for better detection and OCR accuracy.

Steady Hands

Encourage users to keep device and document steady during capture.

Clean Camera

Remind users to clean camera lens for clearer captures.

Flat Document

Ensure document is flat and fully visible within the frame.

Migration Guide

Planning to migrate from Capture-id? Review the migration guide for your chosen replacement module.

Migrating to Capture-id&R (Regula)

// Before (Capture-id)
const response = await FAD_SDK.startCaptureId(CONFIGURATION);

// After (Capture-id&R)
const response = await FAD_SDK.startRegula(
  REGULA_CREDENTIALS,
  FadSDK.Constants.Regula.CaptureType.CAMERA_SNAPSHOT,
  true,  // idData
  true,  // idPhoto
  CONFIGURATION
);

Benefits:

Enhanced document authentication
More accurate OCR
Better fraud detection
Support for more document types

Migrating to Capture-id&A (Acuant)

// Before (Capture-id)
const response = await FAD_SDK.startCaptureId(CONFIGURATION);

// After (Capture-id&A)
const response = await FAD_SDK.startAcuant(
  ACUANT_CREDENTIALS,
  true,   // idData
  true,   // idPhoto
  true,   // manualCapture
  CONFIGURATION
);

Benefits:

Professional-grade verification
Better quality metrics
Enhanced security features
Comprehensive validation

Troubleshooting

Camera Issues

Verify camera permissions are granted
Check if camera is used by another app
Ensure HTTPS is used
Test on different browsers

Detection Not Working

Improve lighting conditions
Ensure document is flat
Move document within optimal distance
Clean camera lens
Check network connectivity for model loading

OCR Extraction Poor

Improve lighting
Ensure document is in focus
Hold device steady
Clean document surface

Model Loading Fails

Check internet connection
Verify browser supports WebGL
Check browser console for errors
Ensure browser is up to date

Capture-id&R - Document capture with Regula (Recommended)
Capture-id&A - Document capture with Acuant (Recommended)
Liveness-3D - Face liveness detection

Getting Started

Core Concepts

Modules

Integration Guides

Capture-id Module (Legacy)

Overview

Key Features

Hardware Requirements

Installation

Implementation

Response Structure

Error Handling

Detection States

Configuration Options

Usage Examples

Best Practices

Good Lighting

Steady Hands

Clean Camera

Flat Document

Migration Guide

Migrating to Capture-id&R (Regula)

Migrating to Capture-id&A (Acuant)

Troubleshooting

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Modules

Integration Guides

​Overview

​Key Features

​Hardware Requirements

​Installation

​Implementation

​Response Structure

​Error Handling

​Detection States

​Configuration Options

​Usage Examples

​Best Practices

Good Lighting

Steady Hands

Clean Camera

Flat Document

​Migration Guide

​Migrating to Capture-id&R (Regula)

​Migrating to Capture-id&A (Acuant)

​Troubleshooting

​Related Modules

Build docs developers (and LLMs) love

Overview

Key Features

Hardware Requirements

Installation

Implementation

Response Structure

Error Handling

Detection States

Configuration Options

Usage Examples

Best Practices

Migration Guide

Migrating to Capture-id&R (Regula)

Migrating to Capture-id&A (Acuant)

Troubleshooting

Related Modules