Installing Document Reader Web Components

Overview
Before you Start
Compatibility
Step 1: Install Library
- npm
- CDN
Step 2: Add Component
- Smart capture component
- Snapshot component
WASM Module Options

Overview

The following table describes the predefined components available in the Web Components package.

Component	Description
Smart Capture (`document-reader`)	Recommended component for most cases, as it is easy to integrate yet flexibly configurable. Takes a photo with the device's camera automatically, when the document is presented in the frame in focus. Can take a photo manually by using a dedicated capture button. Provides predefined UI and behavior. Has many configurable parameters.
Snapshot (`camera-snapshot`)	Can take a photo manually by using a dedicated capture button. Provides predefined UI and behavior. Has a wide range of configurable parameters.
Advanced	Can handle extended document recognition tasks. Provides the most advanced configuration capabilities. Has no predefined graphical interface, leaving UI implementation to you.

To test the mentioned components and their different configurations, go to the Storybook.

Before You Start

Never store the license in a production environment. In production environments, use domain name licensing. Add the license to your project source code only for development and testing.
HTTPS is required. The Web Components use the getUserMedia method to display the video stream from the camera. This feature is available only in secure contexts.
The Web Components are registered on the web page itself, so make sure to import the library to your website before adding any of the components to the web page code.
Only modern browser versions are supported. For details, see the compatibility section. Polyfills are not included in the package by default.

Compatibility

Devices
Mobile (iOS)	99	99	11
Mobile (Android)	66	63	-
Desktop	61	63	11

To support older browser versions in your project, install the required polyfill packages manually. For installation details, see the @webcomponents/webcomponentsjs npm package.

npm

1. Install the package vp-frontend-document-components:

npm i @regulaforensics/vp-frontend-document-components

2. Import the function defineComponents and the class DocumentReaderService into your .js file:

With module bundler:

import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-frontend-document-components';

Without module bundler:

import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';

CDN

Add the script to your .html file. Use a CDN link in the following format: unpkg.com/:package@:version/:file.

For example:

<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.iife.js"></script>

Step 2: Add Component

Smart capture
Snapshot

Smart capture component

1. Add DocumentReaderService to the global variable RegulaDocumentSDK and set a processing scenario:

window.RegulaDocumentSDK = new DocumentReaderService();

window.RegulaDocumentSDK.recognizerProcessParam = {
  processParam: {
    scenario: 'MrzAndLocate',
  },
};
window.RegulaDocumentSDK.imageProcessParam = {
  processParam: {
    scenario: 'MrzAndLocate',
  },
};

2. Define the components and initialize the service:

The initialization process involves licensing (mandatory) and WASM module selection (optional).

Production environment. Domain name licensing is used, so don't add the license to the project source code:

defineComponents().then(() => window.RegulaDocumentSDK.initialize());

Development environment. Use this option only for development or testing when the application is not exposed to the internet. This option requires adding the license to the project source code:

defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: '<BASE64_LICENSE_KEY>' }));

The license parameter accepts a Base64-encoded license string. To convert your license file to Base64, see How to convert a license file to the Base64 string.

Warning

Before you expose your application to the internet, remove the license from the source code.

3. Add the component tag to the .html file:

<document-reader></document-reader>

Snapshot component

1. Define the components:

defineComponents();

2. Add the component tag to the .html file:

<camera-snapshot></camera-snapshot>

WASM Module Options

For document recognition, the Web Component uses the WebAssembly module that performs all processing. By default, the full WASM package is applied, enabling all the processing scenarios and image quality checks.

The SDK also provides additional WASM packages with limited functionality and reduced size. Use them to decrease the network load and speed up the component initialization.

See all available WASM module options below.

BarcodeMRZBoundsLite

Instantiated by default. Provides the full scope of functionality.

defineComponents().then(() => window.RegulaDocumentSDK.initialize());

Available document recognition features:

MRZ OCR
Barcode recognition
Document location
Graphics cropping

Available image quality checks:

Provides only the functionality of locating document boundaries with simplified algorithms.

defineComponents().then(() => window.RegulaDocumentSDK.initialize({ module: 'BoundsLite' }));