README
Table of сontents
- About
- Install via NPM
- Install via CDN
- Component events
- Component response
- Component attributes
- 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:
<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.