Regula Document Reader SDK Web Components

• How to Install
• Documentation
• Demo Application
• Sample Projects
• Technical Support
• Business Enquiries

How to Install

Document Reader Web Components package contains a number of predefined and configurable components, as described in the table below.

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

Before You Start

• Never keep the license in production environment. On production environments, the domain name licensing must be used. Using the explicit license in the source code of your project is applicable only in development and for testing.
• Using HTTPS protocol is a must. Document Reader 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 the modern browser versions are supported, 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 the older browser versions in your project, install the required polyfill packages manually. Follow the link to npm package @webcomponents/webcomponentsjs for installation details.

Step 1: Install Library

• npm
• CDN

npm

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

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

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';
Copy

• Without module bundler:

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

CDN

Connect 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>
Copy

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',
  },
};
Copy

2. Define the components and initialize the service:

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

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

• Development environment. Use this option only when your product is under development or testing, and you still don't expose your application to the internet, as your license needs to be added to the project source code:

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

How to convert a license file to the Base64 string

!!! warning Once the development is finished and your product is ready to be exposed to the internet, make sure that you have removed the license from your source code.

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

<document-reader></document-reader>
Copy

Snapshot Component

1. Define the components:

defineComponents();
Copy

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

<camera-snapshot></camera-snapshot>
Copy

Documentation

Regula Document Reader SDK Web Components Documentation

Regula Document Reader SDK Web Components API Reference

Demo Application

Demo Application

Sample Projects

There are several project examples that demonstrate the integration way of Regula Document Reader SDK Web Components, visit our repository on GitHub.

Visit the Storybook website to see the live demo.

Technical Support

To submit a request to the Support Team, visit Regula Help Center.

Business Enquiries

To discuss business opportunities, fill the Enquiry Form and specify your scenarios, applications, and technical requirements.