OCR Module

The Optical Character Recognition (OCR) Module enables document scanning and text extraction in your application. It supports both headed (UI-based) and headless implementations.

Getting Started

Initialize OCR Module
1// Create an OCR module instance
2const ocr = oneSdk.component('ocr');

Implementation Options

Perfect for applications that need a pre-built UI component.

1

Add HTML Container

index.html
1<div id="ocr"></div>
2

Mount OCR Component

1// Mount OCR to your container element
2ocr.mount('#ocr');
3

Configure Viewport (Required)

index.html
1<head>
2  <meta name="viewport" 
3        content="width=device-width, initial-scale=1.0" 
4        charset="UTF-8" />
5  <title>OneSDK OCR</title>
6</head>

You may need to adjust your Content Security Policy (CSP) settings to allow the IDV module to function correctly. Refer to this page for more details.

OCR Events

ready os emitted when the OCR is successfully mounted.

To listen to this event, use:

1ocr.on('ready', () => {
2  console.log('idv component is ready')
3});

The OCR component emits a detection_complete event when it successfully detects a customer’s information. The component emits this event immediately before results. To listen to this event, use:

1  ocr.on('detection_complete', () => {
2    // programatically unmount your component
3    setMounted(false);
4  })

The component is submitting the end-user data during this event. To listen to this event, use:

1ocr.on('success', 
2  (checkStatus, document, entityId) => {
3    // you can extract information emitted from success event
4    // and use it to your own use
5  }
6)

where the data types for the parameters are:

1  checkStatus: 'COMPLETE' | 'FAILED',
2  document: Object
3  entityId: string

checkStatus will consist of either COMPLETE or FAILED, where

  • “COMPLETE”: The process and the check results are ready.
  • ”FAILED”: The process completed but failed to validate the captured ID and face.

document: the document object generated after the OCR extract

entityId: FrankieOne’s internal reference for the individual

The component has run unsuccessfully. You can use custom loading spinners or additional styles to handle this event gracefully. To listen to this event, use:

1ocr.on('detection_failed', () => {
2// programatically unmount your component
3setMounted(false);
4})
1To listen to this event, use:
2ocr.on('input_required', (information, checkStatus) => {
3if (checkStatus === 'WAITING_SELFIE_UPLOAD') {
4  console.log("waiting for selfie capture")
5}
6})

input_required will emit the entityId and the current status of the process, such as:

  • Waiting for Document upload WAITING_DOC_UPLOAD
  • Waiting for selfie upload WAITING_SELFIE_UPLOAD
  • Uploaded document has invalid type AWAITING_DOCUMENT_UPLOAD_INVALID_TYPE
  • The process is either incomplete or interrupted INCOMPLETE / INTERRUPTED.

For Incode, a lack of camera access permissions triggers the INTERRUPTED event.

On error, we throw all events from the vendor back to you. To listen to this event, use:

1ocr.on('error', (e) => {
2console.log(e.message, e.payload)
3})

If you’re using Incode, the possible messages are: InternalServerError, OSVersionNotSupported, and browserNotSupported

Implementation Example

1const ocr = oneSdk.component('ocr');
2
3ocr.on('input_required', async (inputInfo, status, callback) => {
4  try {
5    // Check document type and side required
6    console.log(`Need ${inputInfo.side} side of ${inputInfo.documentType}`);
7    
8    // Your custom image capture implementation
9    const imageFile = await captureDocumentImage({
10      type: inputInfo.documentType,
11      side: inputInfo.side
12    });
13    
14    // Send captured image back to OCR module
15    callback(imageFile);
16  } catch (error) {
17    console.error('Document capture failed:', error);
18    // Handle error appropriately
19  }
20});
Best Practices
  • Validate image quality before submission to reduce OCR failures
  • Implement proper error handling for all status codes
  • Consider device capabilities when choosing implementation type
  • Test with various document types and lighting conditions

Remember to handle potential errors and provide appropriate feedback to users during the document capture process.

Built with