@regulaforensics/vp-frontend-document-components 0.0.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +85 -68
  2. package/dist/main.js +1 -1
  3. package/package.json +14 -9
package/README.md CHANGED
@@ -1,20 +1,28 @@
1
- # Table of сontents
1
+ # Table of contents
2
2
  1. [About](#about)
3
- 1. [Install via NPM](#npm)
4
- 1. [Install via CDN](#cdn)
5
- 1. [Component events](#events)
6
- 1. [Component response](#response)
7
- 1. [Component attributes](#attributes)
3
+ 1. [Compatibility](#compatibility)
4
+ 1. [Install via NPM](#install-via-npm)
5
+ 1. [Install via CDN](#install-via-cdn)
6
+ 1. [Components events](#components-events)
7
+ 1. [Components response](#components-response)
8
+ 1. [Components attributes](#components-attributes)
9
+ 1. [Components customization](#components-customization)
8
10
  1. [Examples](#examples)
9
11
 
10
12
  ---
11
13
 
12
- <a name="about"></a>
13
14
  ## About
14
15
 
15
- This package contains web components for face recognition and documents.
16
+ This package contains web components for documents recognition.
17
+
18
+ ## Compatibility
19
+
20
+ | Devices | ![Chrome](documents/images/chrome.png) | ![FireFox](documents/images/firefox.png) | ![Safari](documents/images/safari.png) |
21
+ |:---------------------|:--------------------------------------:|:----------------------------------------:|:--------------------------------------:|
22
+ | **Mobile (iOS)** | 99 | 99 | 11 |
23
+ | **Mobile (Android)** | 66 | 68 | - |
24
+ | **Desktop** | 61 | 60 | 11 |
16
25
 
17
- <a name="npm"></a>
18
26
  ## Install via NPM
19
27
 
20
28
  On the command line, navigate to the root directory of your project:
@@ -30,28 +38,26 @@ npm init
30
38
  ```
31
39
  Answer the questions in the command line questionnaire.
32
40
 
33
- Install ```@regulaforensics/vp-frontend-components```:
41
+ Install ```@regulaforensics/vp-frontend-document-components```:
34
42
 
35
43
  ```
36
- npm i @regulaforensics/vp-frontend-components
44
+ npm i @regulaforensics/vp-frontend-document-components
37
45
  ```
38
46
 
39
47
  Create ```index.html``` and ```index.js``` files in the root directory of the project.
40
48
 
41
- Import ```@regulaforensics/vp-frontend-components``` into your ```index.js```:
49
+ Import ```@regulaforensics/vp-frontend-document-components``` into your ```index.js```:
42
50
 
43
51
  ```javascript
44
- import './node_modules/@regulaforensics/vp-frontend-components/dist/main.js';
52
+ import './node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';
45
53
  ```
46
54
 
47
- In ```index.html``` connect ```index.js``` and add the name of the component you want to use. Available components:
55
+ In ```index.html```, connect ```index.js``` and add the name of the component you want to use. The available components are:
48
56
 
49
- 1. ```<face-capture-wc></face-capture-wc>``` - for create a face snapshot;
50
- 1. ```<face-liveness-wc></face-liveness-wc>``` - for liveness verification;
51
- 1. ```<document-reader-wc></document-reader-wc>``` - for documents recognition.
52
- 1. ```<camera-snapshot-wc></camera-snapshot-wc>``` - to capture images from the camera and gallery.
57
+ - ```<document-reader></document-reader>``` - for documents recognition;
58
+ - ```<camera-snapshot></camera-snapshot>``` - to capture images from the camera and gallery.
53
59
 
54
- Example:
60
+ For example:
55
61
 
56
62
  ```html
57
63
  <!DOCTYPE html>
@@ -61,52 +67,47 @@ Example:
61
67
  <title>My app</title>
62
68
  </head>
63
69
  <body>
64
- <face-capture-wc></face-capture-wc>
70
+ <camera-snapshot></camera-snapshot>
65
71
  <script type="module" src="index.js"></script>
66
72
  </body>
67
73
  </html>
68
74
  ```
69
75
 
70
- <a name="cdn"></a>
71
76
  ## Install via CDN
72
77
 
73
78
  Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:version/:file```
74
79
 
75
- Example:
80
+ For example:
76
81
 
77
82
  ```html
78
- <script src="https://unpkg.com/@regulaforensics/vp-frontend-components@0.0.1-beta.32/dist/main.js"></script>
83
+ <script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@1.2.0/dist/main.js"></script>
79
84
  ```
80
85
 
81
86
  Add the name of the component to the html, as in the example above.
82
87
 
83
- <a name="events"></a>
84
- ## Component events
88
+ ## Components events
85
89
 
86
- You can subscribe to component events. In cases of successful and unsuccessful work, the following events will be triggered:
90
+ You can subscribe to the component events. In cases of successful and unsuccessful work, the following events will be triggered:
87
91
 
88
- For the ```face-capture-wc``` component - ```face-capture```
89
- For the ```face-liveness-wc``` component - ```face-liveness```
90
- For the ```document-reader-wc``` component - ```document-reader```
91
- For the ```camera-snapshot-wc``` component - ```camera-snapshot```
92
+ For the ```document-reader``` component - ```document-reader```
93
+ For the ```camera-snapshot``` component - ```camera-snapshot```
92
94
 
93
- Example:
95
+ For example:
94
96
 
95
97
  ```javascript
96
- const component = document.getElementsByTagName('face-capture-wc')[0];
98
+ const component = document.getElementsByTagName('camera-snapshot')[0];
97
99
 
98
- component.addEventListener('face-capture', () => alert('Event!'));
100
+ component.addEventListener('camera-snapshot', () => alert('Event!'));
99
101
  ```
100
102
 
101
- <a name="response"></a>
102
- ## Component response
103
+ ## Components response
103
104
 
104
105
  You can get the response of the component in the ```detail``` field of the event object.
105
106
 
106
- Example:
107
+ For example:
107
108
 
108
109
  ```javascript
109
- const component = document.getElementsByTagName('face-capture-wc')[0];
110
+ const component = document.getElementsByTagName('camera-snapshot')[0];
110
111
 
111
112
  function listener(event) {
112
113
  if (event.detail) {
@@ -115,47 +116,63 @@ function listener(event) {
115
116
  }
116
117
  }
117
118
 
118
- component.addEventListener('face-capture', listener);
119
+ component.addEventListener('camera-snapshot', listener);
119
120
  ```
120
121
 
121
- <a name="attributes"></a>
122
- ## Component attributes
122
+ ## Components attributes
123
+
124
+ ### document-reader
125
+
126
+ The component can work in two modes: with further processing of the result on the API and without such processing. For further processing on the API, you need to set the API address to the ```url``` attribute.
127
+
128
+ | Attribute | Info | Data type | Default value | Values |
129
+ |:-------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
130
+ | **locale** | The language of the component interface. If empty, the language is selected from the browser settings, if it is not found, the system language is taken. | string | ```en``` | ```ru```, ```en```, ```de```, ```pl```, ```it```, ```hu```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
131
+ | |
132
+ | **internal-scenario** | The component document verification scenario. For more details, see the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/getting-started#processing-scenarios" target="_blank">Web components documentation</a>. | string | ```MrzAndLocate``` | ```MrzAndLocate```, ```MrzOrLocate```, ```Mrz```, ```Locate``` |
133
+ | **multipage-processing** | Whether to allow processing of two pages in cases when the component detects an ID1-sized document. Multipage processing is not triggered for documents of other formats. If ```true```, the component asks for the second page and processes it. If ```false```, only one page/side of the document is processed regardless the document format. | boolean | ```false``` | ```true```, ```false``` |
134
+ | **start-screen** | Whether to show the start screen with two options for the document image uploading: From camera and From gallery. If ```true```, the start screen is shown. If ```false```, no start screen is shown and instead the camera of the device is turned on automatically to capture the image of the document. | boolean | ```false``` | ```true```, ```false``` |
135
+ | **multiple** | Whether to allow uploading more than one file via the file system. Can be set to ```true``` only if ```startScreen``` is ```true```. | boolean | ```true``` | ```true```, ```false``` |
136
+ | **full-screen** | Whether to locate the video element on the whole screen. If ```true```, the video element expands to full screen. If ```false```, the video element is displayed in the frame of the container. | boolean | ```false``` | ```true```, ```false``` |
137
+ | **license** | To use the component on test environments, set the base64 license value to the ```license``` attribute. | string | ```undefined``` | ```base64 license value``` |
138
+
123
139
 
124
- ### face-capture-wc
140
+ ### camera-snapshot
125
141
 
126
- | Attribute | Info | Default value | Values |
127
- |:----------|:-----|:-------------:|:------:|
128
- | **locale** | the language of the component | ```en``` | ```en```, ```ru``` |
129
- | **start-scale** | frame scale multiplier | ```1``` | ```number > 0``` |
130
- | **oval-offset** | offset of the frame from the center along the Y axis (works only on mobile devices) | ```0``` | ```any number``` |
142
+ | Attribute | Info | Data type | Default value | Values |
143
+ |:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:-------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
144
+ | **locale** | The language of the component interface. If empty, the language is selected from the browser settings, if it is not found, the system language is taken. | string | ```en``` | ```ru```, ```en```, ```de```, ```pl```, ```it```, ```hu```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
145
+ | **start-screen** | Whether to show the start screen with two options for the document image uploading: From camera and From gallery. If ```true```, the start screen is shown. If ```false```, no start screen is shown and instead the camera of the device is turned on automatically to capture the image of the document. | boolean | ```false``` | ```true```, ```false``` |
146
+ | **multiple** | Whether to allow uploading more than one file via the file system. Can be set to ```true``` only if ```startScreen``` is ```true```. | boolean | ```true``` | ```true```, ```false``` |
147
+ | **full-screen** | Whether to locate the video element on the whole screen. If ```true```, the video element expands to full screen. If ```false```, the video element is displayed in the frame of the container. | boolean | ```false``` | ```true```, ```false``` |
131
148
 
132
- ### face-liveness-wc
149
+ ## Components customization
133
150
 
134
- | Attribute | Info | Default value | Values |
135
- |:----------|:-----|:-------------:|:------:|
136
- | **locale** | the language of the component | ```en``` | ```en```, ```ru``` |
137
- | **url** | backend url | ```https://test-faceapi.regulaforensics.com/``` | any url |
138
- | **start-scale** | start frame scale multiplier | ```1``` | ```number > 0``` |
139
- | **end-scale** | second frame scale multiplier | ```1.35``` | ```number > 0``` |
140
- | **oval-offset** | offset of the frame from the center along the Y axis (works only on mobile devices) | ```0``` | ```any number``` |
151
+ Using CSS variables, you can change the font and the main colors of the components.
141
152
 
142
- ### document-reader-wc
153
+ | Variable | Info | Default value |
154
+ |:------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------:|
155
+ | **--font-family** | The font family of all text elements. If you change the font family, make sure to adjust the fond size so the message on the start screen would fit the frame. | ```Noto Sans, sans-serif``` |
156
+ | **--font-size** | The font size for the text elements. | ```16px``` |
157
+ | **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | ```#663399``` |
143
158
 
144
- | Attribute | Info | Default value | Values |
145
- |:----------|:-----|:-------------:|:------:|
146
- | **locale** | the language of the component | ```en``` | ```en```, ```ru``` |
147
- | **scenario** | document verification scenario | ```MrzAndLocate``` | ```MrzAndLocate```, ```MrzOrLocate```, ```Mrz```, ```Locate``` |
148
- | **multipage-processing** | checking multiple pages of a document | ```false``` | ```true```, ```false``` |
149
- | **start-screen** | displaying the start page | ```false``` | ```true```, ```false``` |
159
+ For example:
150
160
 
151
- ### camera-snapshot-wc
161
+ CSS:
152
162
 
153
- | Attribute | Info | Default value | Values |
154
- |:----------|:-----|:-------------:|:------:|
155
- | **locale** | the language of the component | ```en``` | ```en```, ```ru``` |
156
- | **start-screen** | displaying the start page | ```false``` | ```true```, ```false``` |
163
+ ```css
164
+ .my-custom-style {
165
+ --font-family: Arial, sans-serif;
166
+ --main-color: green;
167
+ }
168
+ ```
169
+
170
+ HTML:
171
+
172
+ ```html
173
+ <camera-snapshot class="my-custom-style"></camera-snapshot>
174
+ ```
157
175
 
158
- <a name="examples"></a>
159
176
  ## Examples
160
177
 
161
- You can see examples of using the components [here](https://github.com/regulaforensics/web-components-samples).
178
+ You can see the examples of using the components on the [Samples page](https://github.com/regulaforensics/document-web-components-samples).