Integration

You can get the npm package with the Document Reader web components here: https://www.npmjs.com/package/@regulaforensics/vp-frontend-document-components/

Via NPM

Install @regulaforensics/vp-frontend-document-components:

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

Import defineComponents and DocumentReaderService from @regulaforensics/vp-frontend-document-components into your .js file:

// If you use module bundler
import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-frontend-document-components';
// If you don't use module bundler
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';

Add DocumentReaderService to the global variable RegulaDocumentSDK, define the components and prepare the service:

window.RegulaDocumentSDK = new DocumentReaderService();
defineComponents().then(async () => {
  await window.RegulaDocumentSDK.prepare();
});
// Notice: If you use only the camera-snapshot component, then it is not necessary to create a global variable and prepare the service, use only defineComponents();

Add the component name to the .html file. The available components are:

<document-reader></document-reader> <!-- for documents recognition -->
<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->

Notice: To use <document-reader></document-reader> component on test environments, set the base64 license value to the license attribute. Example: <document-reader license="BASE64_LICENSE_KEY"></document-reader>.

Via CDN

Connect the script in your .html file. CDN link: unpkg.com/:package@:version/:file

For example:

<!-- Replace <VERSION> with the package version. The list of versions is available on NPM in the versions section -->
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@<VERSION>/dist/main.js"></script>

In your .js file define the components and prepare the service. DocumentReaderService and defineComponents are available in the global variable window.Regula:

const { defineComponents, DocumentReaderService } = window.Regula;
window.RegulaDocumentSDK = new DocumentReaderService();
defineComponents().then(async () => {
  await window.RegulaDocumentSDK.prepare();
});
// Notice: If you use only the camera-snapshot component, then it is not necessary to create a global variable and prepare the service, use only defineComponents();

Add the component name to the .html file. The available components are:

<document-reader></document-reader> <!-- for documents recognition -->
<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->

Notice: To use <document-reader></document-reader> component on test environments, set the base64 license value to the license attribute. Example: <document-reader license="BASE64_LICENSE_KEY"></document-reader>.