Skip to main content

​
Overview

The Capture-id&A module provides document capture capabilities using Acuant’s ID verification SDK. This module enables high-quality ID capture with OCR data extraction, face photo extraction, and document authentication features.

​
Key Features

  • Auto and Manual Capture: Support for both automatic and manual capture modes
  • OCR Data Extraction: Extract text data from ID documents
  • Face Photo Extraction: Capture the portrait photo from the ID
  • Document Authentication: Verify document authenticity
  • Quality Checks: Built-in validation for sharpness, glare, and document quality
  • Multi-device Support: Works on mobile and desktop browsers
  • Customizable UI: Full customization of legends, colors, and styles

​
Hardware Requirements

This module requires valid Acuant credentials including username, password, subscription ID, and endpoint URLs.
  • Modern web browser with camera access
  • Device camera (mobile or desktop)
  • Stable internet connection for Acuant API communication
  • HTTPS protocol (required for camera access)

​
Installation

npm install @fad-producto/fad-sdk

​
Implementation

1

Import SDK and Set Up Credentials

Import the FAD SDK and configure your Acuant credentials:
import FadSDK from '@fad-producto/fad-sdk';

const CREDENTIALS = {
  passiveUsername: 'YOUR_ACUANT_USERNAME',
  passivePassword: 'YOUR_ACUANT_PASSWORD',
  passiveSubscriptionId: 'YOUR_SUBSCRIPTION_ID',
  acasEndpoint: 'YOUR_ACAS_ENDPOINT',
  livenessEndpoint: 'YOUR_LIVENESS_ENDPOINT',
  assureidEndpoint: 'YOUR_ASSUREID_ENDPOINT',
};

const TOKEN = 'YOUR_FAD_TOKEN';
2

Configure Module Options

Set up the configuration with custom UI settings:
const CONFIGURATION = {
  views: {
    instructions: true,
    preview: true,
  },
  imageResult: {
    quality: 0.3,  // Image compression quality (0-1)
  },
  customization: {
    fadCustomization: {
      colors: {
        primary: '#A70635',
        secondary: '#A70635',
        tertiary: '#363636',
      },
      buttons: {
        primary: {
          backgroundColor: '#A70635',
          labelColor: '#ffffff',
        },
      },
    },
    moduleCustomization: {
      legends: {
        scan: {
          front: {
            none: 'ENFOCA EL FRENTE DE TU ID SOBRE LA GUÍA',
            smallDocument: 'ACERCATE MÁS',
            bigDocument: 'DEMASIADO CERCA',
            capturing: 'CAPTURANDO',
            tapToCapture: 'TOCA LA PANTALLA PARA CAPTURAR',
          },
        },
      },
    },
  },
};
3

Initialize and Start Capture

Create the SDK instance and start the Acuant capture process:
async function initProcess() {
  const options = {
    environment: FadSDK.getFadEnvironments().UATHA,
  };

  const FAD_SDK = new FadSDK(TOKEN, options);
  
  try {
    const idData = true;       // Enable OCR extraction
    const idPhoto = true;      // Enable face photo extraction
    const manualCapture = true; // Enable manual capture mode

    // Start Acuant capture
    const moduleResponse = await FAD_SDK.startAcuant(
      CREDENTIALS,
      idData,
      idPhoto,
      manualCapture,
      CONFIGURATION
    );

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

    // Access captured data
    const frontImage = moduleResponse.data.id.front.image.data;
    const backImage = moduleResponse.data.id.back?.image?.data;
    const facePhoto = moduleResponse.data.idPhoto;
    const ocrData = moduleResponse.data.idData.ocr;

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

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

​
Response Structure

{
  event: string,  // 'PROCESS_COMPLETED'
  data: {
    id: {
      front: {
        image: {
          data: string,      // Base64 image
          sharpness: number,
          glare: number
        }
      },
      back?: {
        image: {
          data: string,
          sharpness: number,
          glare: number
        }
      }
    },
    idPhoto: string,  // Base64 image of face from ID
    idData: {
      ocr: {
        firstName: string,
        lastName: string,
        documentNumber: string,
        dateOfBirth: string,
        address: string,
        // ... additional fields
      }
    },
    documentInstance: object  // Acuant validation data
  }
}

​
Error Handling

Handle errors using the SDK error constants: 
if (ex.code === FadSDK.Errors.Acuant.UNSUPPORTED_CAMERA) {
  alert('Camera not supported. Please try a different device.');
}

​
Capture Modes

When manualCapture is set to false, the module automatically captures when it detects a document:
const manualCapture = false;
const response = await FAD_SDK.startAcuant(
  CREDENTIALS,
  idData,
  idPhoto,
  manualCapture,
  CONFIGURATION
);
Benefits:
  • Faster capture process
  • Ensures document is properly positioned
  • Reduces user error

​
Configuration Options

Control the quality of captured images:
imageResult: {
  quality: 0.3  // Range: 0.0 to 1.0 (lower = smaller file size)
}
Lower quality values reduce file size but may affect OCR accuracy. Recommended: 0.3-0.5
views: {
  instructions: true,  // Show instruction screen
  preview: true        // Show preview for user confirmation
}
Customize the feedback messages during scanning:
legends: {
  scan: {
    front: {
      none: 'Position front of ID in guide',
      smallDocument: 'Move closer',
      bigDocument: 'Move away',
      capturing: 'Capturing',
    },
  },
}

​
Best Practices

Choose Right Mode

Use automatic capture for standard scenarios, manual capture for problematic documents or lighting.

Optimize Image Quality

Balance quality and file size based on your use case. OCR typically works well with 0.3-0.5 quality.

Handle Errors Gracefully

Provide clear error messages and recovery options for all error scenarios.

Enable Preview

Let users review captured images before submitting to reduce retakes.

​
Troubleshooting

  • Verify camera permissions are granted
  • Ensure site is served over HTTPS
  • Check if camera is being used by another application
  • Test on different browsers
  • Improve lighting conditions
  • Ensure document is flat and fully visible
  • Increase image quality setting
  • Verify Acuant credentials are correct
  • Reduce image quality if not needed
  • Check network connectivity
  • Verify Acuant endpoint URLs are correct

Build docs developers (and LLMs) love

Get started for freeTalk to us