Skip to content

Integration

You can use the document reader SDK to create your custom UI interface.

Via NPM

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

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

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

import { DocumentReaderProcessor } from '@regulaforensics/vp-frontend-document-components'; // If you use module bundler. In other cases use full path '/node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js'.

Add video tag to .html file then prepare and initialize DocumentReaderProcessor:

const videoElement = document.getElementById('yourVideoElement');
const processor = new DocumentReaderProcessor(videoElement);
try {
   await processor.prepare();
   await processor.initialize({license: 'BASE64_LICENSE_KEY'}); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
   const result = await processor.startRecognition();  // Result of the document recognition will be located here.
   processor.stopRecognition();
   console.log(result);
} catch (e) {
   console.log(e);
}

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>

Add video tag to .html file then prepare and initialize DocumentReaderProcessor. DocumentReaderProcessor is available in the global variable window.Regula:

const { DocumentReaderProcessor } = window.Regula;
const videoElement = document.getElementById('yourVideoElement');
const processor = new DocumentReaderProcessor(videoElement);
try {
   await processor.prepare();
   await processor.initialize({license: 'BASE64_LICENSE_KEY'}); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
   const result = await processor.startRecognition(); // Result of the document recognition will be located here.
   processor.stopRecognition();
   console.log(result);
} catch (e) {
   console.log(e);
}