Integrating OCR

Integrate the fw-ocrid library to enable OCR functionality directly in your application. This guide provides a basic setup for using the library with plain JavaScript.

1. Installation

Start by installing the fw-ocrid library via NPM:

npm install fw-ocrid

2. Javascript Integration

Basic Implementation

Here's how to set up and use the OCR functionality with plain JavaScript:

import { OcrId, Envs, EventType, EventTypeUserFeedback, ResultHelper } from 'fw-ocrid';

// Variable to store the process ID
let processId;

async function initOCR() {
  // Initialize OCRID with API Key, environment, optional config, and optional language
  const ocrid = new OcrId('YOUR_API_KEY', Envs.PRE3, undefined ,'en');

  // Handle user feedback events
  ocrid.events(EventType.USER_FEEDBACK).subscribe((feedback) => {
    switch (feedback) {
      case EventTypeUserFeedback.SHOW_DOCUMENT_FRONT_SIDE:
        console.log('Show the front side of the document.');
        break;
      case EventTypeUserFeedback.SHOW_DOCUMENT_REVERSE_SIDE:
        console.log('Show the reverse side of the document.');
        break;
      case EventTypeUserFeedback.DOCUMENT_FRONT_SIDE_COMPLETED:
        console.log('Front side scanned successfully.');
        break;
      case EventTypeUserFeedback.PROCESS_FAILED_DUE_ANALYSIS_ERROR:
        console.error('Process failed due to an analysis error.');
        break;
      case EventTypeUserFeedback.PROCESS_FINISHED:
        console.log('Scanning process completed.');
        break;
      default:
        console.log('Feedback:', feedback);
    }
  });

  // Handle result events
  ocrid.events(EventType.RESULT).subscribe((result) => {
    console.log('Scan completed:', result);
    // Retrieve detailed results using processId
    getOcrResult(processId);
    ocrid.close(); // Close the process
  });

  // Handle error events
  ocrid.events(EventType.ERROR).subscribe((error) => {
    console.error('An error occurred:', error);
  });

  // Start the camera stream and scanning process
  processId = await ocrid.startStream(document.getElementById('video-container'));
  console.log('Camera stream started. Process ID:', processId);
}

// Function to retrieve and process OCR results
async function getOcrResult(processId) {
  try {
    // Method 1: Using ResultHelper (recommended)
    const result = await ResultHelper.get(processId, Envs.PRE3);
    console.log('Complete result:', result);
    
    // Process specific data from the result
    if (result?.success) {
      // Identified document types
      const documentTypes = result.value.types;
      
      // Extracted document fields
      const fields = result.value.fields;
      
      // Captured images
      const images = result.value.images;
      
      console.log('Document type:', documentTypes);
      console.log('Extracted fields:', fields);
      console.log('Images:', images);
    }
    
    // Method 2: Using direct HTTP call to endpoint
    // const url = `${Endpoints[Envs.PRE3]}result/${processId}`;
    // fetch(url)
    //   .then(response => response.json())
    //   .then(data => {
    //     console.log('Result from API:', data);
    //   })
    //   .catch(error => {
    //     console.error('Error retrieving result:', error);
    //   });
    
  } catch (error) {
    console.error('Error getting OCR result:', error);
  }
}

// Call the initialization function when the page is loaded
window.onload = () => {
  initOCR();
};

3. HTML Structure

Ensure your HTML file includes a video container for the camera stream:

<!DOCTYPE html>
<html>
<head>
    <title>OCRID Example</title>
</head>
<body>
    <div id="video-container"></div>
    <script type="module" src="index.js"></script>
</body>
</html>

4. Result Structure

The result obtained through ResultHelper.get() has the following structure:

{
  id: "process-123456",       // Process ID
  startTimestamp: 1647532091, // Start timestamp
  endTimestamp: 1647532120,   // End timestamp
  success: true,              // Success indicator
  value: {
    types: [                  // Identified document types
      {
        name: "ID_CARD",      // Document type name
        year: 2020,           // Document year
        id: "ID_CARD-2020",   // Document type ID
        probability: 0.98,    // Match probability
        country: "US"         // Document country
      }
    ],
    fields: [                 // Extracted document fields
      {
        name: "fullName",     // Field name
        value: "John Smith"   // Extracted value
      },
      {
        name: "documentNumber",
        value: "12345678"
      }
    ],
    authenticity: [           // Authenticity validations
      {
        name: "hologramCheck",
        value: true
      }
    ],
    images: [                 // Captured images
      {
        name: "frontImage",
        value: "base64_encoded_image_data..."
      }
    ],
    validations: [            // Additional validations
      {
        name: "expiredCheck",
        value: false
      }
    ]
  }
}

Additional Resources

For additional setup guides, explore:

1. Installation​

2. Javascript Integration​

Basic Implementation​

3. HTML Structure​

4. Result Structure​

Additional Resources​