@regulaforensics/vp-frontend-document-components

Regula framework agnostic web components to work with webcamera

Usage no npm install needed!

<script type="module">
  import regulaforensicsVpFrontendDocumentComponents from 'https://cdn.skypack.dev/@regulaforensics/vp-frontend-document-components';
</script>

README

Table of сontents

  1. About
  2. Install via NPM
  3. Install via CDN
  4. Component events
  5. Component response
  6. Component attributes
  7. Examples

About

This package contains web components for documents recognition.

Install via NPM

On the command line, navigate to the root directory of your project:

cd /path/to/project

Run the following command:

npm init

Answer the questions in the command line questionnaire.

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

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

Create index.html and index.js files in the root directory of the project.

Import @regulaforensics/vp-frontend-document-components into your index.js:

import './node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';

In index.html connect index.js and add the name of the component you want to use. Available components:

  1. <camera-snapshot></camera-snapshot> - to capture images from the camera and gallery.

Example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My app</title>
  </head>
  <body>
    <camera-snapshot></camera-snapshot>
    <script type="module" src="index.js"></script>
  </body>
</html>

Install via CDN

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

Example:

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

Add the name of the component to the html, as in the example above.

Component events

You can subscribe to component events. In cases of successful and unsuccessful work, the following events will be triggered:

For the camera-snapshot component - camera-snapshot

Example:

const component = document.getElementsByTagName('camera-snapshot')[0];

component.addEventListener('camera-snapshot', () => alert('Event!'));

Component response

You can get the response of the component in the detail field of the event object.

Example:

const component = document.getElementsByTagName('camera-snapshot')[0];

function listener(event) {
    if (event.detail) {
        const response = event.detail;
        console.log(response);
    }
}

component.addEventListener('camera-snapshot', listener);

Component attributes

camera-snapshot

Attribute Info Default value Values
locale the language of the component en ru, en, de, pl, it, ch, fr, es, pt, ar, nl, vi, ko, ms, gr, tr, jp, cz, th, hi, bn, he, fi, sv
start-screen displaying the start page false true, false
multiple specify whether more then 1 image can be uploaded through the file system true true, false

Examples

You can see examples of using the components here.