Skip to content

Installation

Overview

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.

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

    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 Chrome FireFox Safari
    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

    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

    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>

    Step 2: Add Component

    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:

    • 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 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>' }));

    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>

    Snapshot Component

    1. Define the components:

    defineComponents();

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

    <camera-snapshot></camera-snapshot>

    Next Steps