Javascript Integration

Learn how to integrate the fw-ocrid library into your project using plain JavaScript, with step-by-step instructions for building a simple, reusable OCR implementation.

Basic Implementation

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

    const ocrid = new OcrId('YOUR_API_KEY', Envs.PRE3, undefined ,'en'); // Add environment, optional config, and language

    // Start the scanning process
    const id = await ocrid.startStream(document.getElementById('video-container'));

    // Close the stream and release resources
    ocrid.close();

Example with browserify

index.js

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

  async function init() {
    // 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 the result event
    ocrid.events(EventType.RESULT).subscribe((result) => {
      console.log('Scan completed:', result);
      ocrid.close(); // Close the process
    });

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

    // Start the camera and stream
    const stream = await ocrid.startStream(document.getElementById('video-tag'));

    console.log('Camera stream started:', stream);
  }

  window.onload = () => {
    init();
  };

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="dist/bundle.js"></script>
</head>
<body>
    <div id="video-tag"></div>
</body>
</html>

package.json

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "browserify index.js -o dist/bundle.js"
  },
  "dependencies": {
    "browserify": "^17.0.0",
    "fw-ocrid": "*"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^8.0.0"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  }
}

npm install
npm run build

Run the above commands and then open in the browser the file index.html

Key Points of the Implementation

OCR Initialization: Create an instance of OcrId with your API key, the environment (Envs.PRE3), and the desired language.
Event Management:
- User Feedback Events: Help guide the user through the process, such as showing the front or back of the document.
- Result Events: Indicate that the process has been successfully completed and provide the scanned data.
- Error Events: Capture and handle errors that may occur during the process.
Camera Stream Management:
- Use the startStream method to open the camera and display the real-time stream.
- Ensure resources are released by closing the OCR instance with close once the process is finished.
Setup with Browserify:
- Use browserify to bundle the JavaScript code and generate an executable file for the browser.
- Configure a package.json file with the necessary dependencies and create a script to build the project.
Execution in the Browser:
- Install dependencies and build the project using the npm install and npm run build commands.
- Open the index.html file in the browser to test the OCR functionality.
License Management:
- Initially, request access from Finwave for the URLs where you plan to use the component, specifying the following:
  1. Which URLs are for production.
  2. Which URLs are for testing or development.
- Once you receive the license, you will be able to use the product correctly.
- For local testing, a temporary license will be provided. You can work in three types of environments: production (PRO3), testing (PRE3), and development (DEV3).
- To use the temporary license, add the following code in the browser before using the component: window.regulaLicense = { license: "..." };
JavaScript Demo

To test the functionality of the OCR ID program, a demo has been implemented in JavaScript that provides an interactive interface. This allows users to explore the features and behavior of the library without the need to integrate it into their own interface.
- You can access the demo at the following link: Javascript-Demo.

Basic Implementation​

Example with browserify​

Key Points of the Implementation​

Basic Implementation

Example with browserify

Key Points of the Implementation