@regulaforensics/vp-frontend-document-components 1.1.0 → 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 +76 -42
  2. package/dist/main.js +1 -1
  3. package/package.json +5 -3
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
16
  This package contains web components for documents recognition.
16
17
 
17
- <a name="npm"></a>
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 |
25
+
18
26
  ## Install via NPM
19
27
 
20
28
  On the command line, navigate to the root directory of your project:
@@ -44,12 +52,12 @@ Import ```@regulaforensics/vp-frontend-document-components``` into your ```index
44
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. ```<document-reader></document-reader>``` - for documents recognition; -->
50
- 1. ```<camera-snapshot></camera-snapshot>``` - 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.
51
59
 
52
- Example:
60
+ For example:
53
61
 
54
62
  ```html
55
63
  <!DOCTYPE html>
@@ -65,28 +73,26 @@ Example:
65
73
  </html>
66
74
  ```
67
75
 
68
- <a name="cdn"></a>
69
76
  ## Install via CDN
70
77
 
71
78
  Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:version/:file```
72
79
 
73
- Example:
80
+ For example:
74
81
 
75
82
  ```html
76
- <script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@1.0.0/dist/main.js"></script>
83
+ <script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@1.2.0/dist/main.js"></script>
77
84
  ```
78
85
 
79
86
  Add the name of the component to the html, as in the example above.
80
87
 
81
- <a name="events"></a>
82
- ## Component events
88
+ ## Components events
83
89
 
84
- 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:
85
91
 
86
- <!-- For the ```document-reader``` component - ```document-reader``` -->
92
+ For the ```document-reader``` component - ```document-reader```
87
93
  For the ```camera-snapshot``` component - ```camera-snapshot```
88
94
 
89
- Example:
95
+ For example:
90
96
 
91
97
  ```javascript
92
98
  const component = document.getElementsByTagName('camera-snapshot')[0];
@@ -94,12 +100,11 @@ const component = document.getElementsByTagName('camera-snapshot')[0];
94
100
  component.addEventListener('camera-snapshot', () => alert('Event!'));
95
101
  ```
96
102
 
97
- <a name="response"></a>
98
- ## Component response
103
+ ## Components response
99
104
 
100
105
  You can get the response of the component in the ```detail``` field of the event object.
101
106
 
102
- Example:
107
+ For example:
103
108
 
104
109
  ```javascript
105
110
  const component = document.getElementsByTagName('camera-snapshot')[0];
@@ -114,31 +119,60 @@ function listener(event) {
114
119
  component.addEventListener('camera-snapshot', listener);
115
120
  ```
116
121
 
117
- <a name="attributes"></a>
118
- ## Component attributes
122
+ ## Components attributes
119
123
 
120
- <!-- ### document-reader
124
+ ### document-reader
121
125
 
122
- 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 ```url``` attribute and set the API address to it.
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``` |
123
138
 
124
- | Attribute | Info | Default value | Values |
125
- |:----------|:-----|:-------------:|:------:|
126
- | **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``` |
127
- | **url** | API url (set this attribute if you want to process the result on the API) | ```undefined``` | ```any url``` |
128
- | **internal-scenario** | component document verification scenario | ```MrzAndLocate``` | ```MrzAndLocate```, ```MrzOrLocate```, ```Mrz```, ```Locate``` |
129
- | **external-scenario** | API document verification scenario (works if the ```url``` attribute is specified) | ```FullProcess``` | ```FullProcess```, ```MrzAndLocate```, ```MrzOrLocate```, ```Mrz```, ```Locate``` |
130
- | **multipage-processing** | checking multiple pages of a document | ```false``` | ```true```, ```false``` |
131
- | **start-screen** | displaying the start page | ```false``` | ```true```, ```false``` | -->
132
139
 
133
140
  ### camera-snapshot
134
141
 
135
- | Attribute | Info | Default value | Values |
136
- |:----------|:-----|:-------------:|:------:|
137
- | **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``` |
138
- | **start-screen** | displaying the start page | ```false``` | ```true```, ```false``` |
139
- | **multiple** | specify whether more then 1 image can be uploaded through the file system | ```true``` | ```true```, ```false``` |
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``` |
148
+
149
+ ## Components customization
150
+
151
+ Using CSS variables, you can change the font and the main colors of the components.
152
+
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``` |
158
+
159
+ For example:
160
+
161
+ CSS:
162
+
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
+ ```
140
175
 
141
- <a name="examples"></a>
142
176
  ## Examples
143
177
 
144
- You can see examples of using the components [here](https://github.com/regulaforensics/document-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).