@regulaforensics/vp-frontend-document-components 2.5.0 → 2.6.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.
- package/README.md +900 -394
- package/dist/main.js +1 -1
- package/dist/main.js.LICENSE.txt +11 -0
- package/esm/main.js +1 -1
- package/esm/main.js.LICENSE.txt +11 -0
- package/lib/index.d.ts +122 -2033
- package/package.json +4 -1
package/README.md
CHANGED
|
@@ -1,307 +1,413 @@
|
|
|
1
|
-
# Document Reader
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
# Document Reader Web Components
|
|
2
|
+
|
|
3
|
+
* [Overview](#overview)
|
|
4
|
+
* [Before you start](#before-you-start)
|
|
5
|
+
* [Compatibility](#compatibility)
|
|
6
|
+
* [Predefined UI Components](#predefined-ui-components)
|
|
7
|
+
* [npm Service Integration](#npm-service-integration)
|
|
8
|
+
* [CDN Service Integration](#cdn-service-integration)
|
|
9
|
+
* [Service Parameters](#service-parameters)
|
|
10
|
+
* [Parameters Description](#parameters-description)
|
|
11
|
+
* [Events](#events)
|
|
12
|
+
* [Action Types](#action-types)
|
|
13
|
+
* [Action Data](#action-data)
|
|
14
|
+
* [Action Statuses](#action-statuses)
|
|
15
|
+
* [Action Failure Reasons](#action-failure-reasons)
|
|
16
|
+
* [Event Generation Logic](#event-generation-logic)
|
|
17
|
+
* [Event Response](#event-response)
|
|
18
|
+
* [Settings and Attributes](#settings-and-attributes)
|
|
19
|
+
* [Appearance Customization](#appearance-customization)
|
|
20
|
+
* [Font and Colors](#font-and-colors)
|
|
21
|
+
* [Localized Messages](#localized-messages)
|
|
22
|
+
* [Document Reader Processor](#document-reader-processor)
|
|
23
|
+
* [npm Processor Integration](#npm-processor-integration)
|
|
24
|
+
* [CDN Processor Integration](#cdn-processor-integration)
|
|
25
|
+
* [Processor Methods](#processor-methods)
|
|
26
|
+
* [Processor Parameters](#processor-parameters)
|
|
27
|
+
* [Document Reader Controller](#document-reader-controller)
|
|
28
|
+
* [npm Controller Integration](#npm-controller-integration)
|
|
29
|
+
* [CDN Controller Integration](#cdn-controller-integration)
|
|
30
|
+
* [Controller Methods](#controller-methods)
|
|
31
|
+
* [Controller Parameters](#controller-parameters)
|
|
32
|
+
* [Package Resources](#package-resources)
|
|
33
|
+
* [Potential Problems](#potential-problems)
|
|
34
|
+
* [Examples](#examples)
|
|
35
|
+
* [Additional Resources](#additional-resources)
|
|
36
|
+
* [FAQ](#faq)
|
|
37
|
+
* [How do I collect logs?](#how-do-i-collect-logs)
|
|
25
38
|
|
|
26
39
|
---
|
|
27
40
|
|
|
28
41
|
## Overview
|
|
29
42
|
|
|
30
|
-
The Document Reader
|
|
43
|
+
The Document Reader Web Components let you add document verification to your website, including the features:
|
|
31
44
|
|
|
32
|
-
|
|
45
|
+
* Capture a document from the device's camera
|
|
46
|
+
* Process an uploaded image
|
|
47
|
+
* Crop the image by document boundaries
|
|
48
|
+
* Detect the presence of a machine-readable zone (MRZ)
|
|
49
|
+
* Recognize and return the values of MRZ text fields
|
|
33
50
|
|
|
34
|
-
|
|
35
|
-
- _the document reader SDK_ for creating your custom document reader UI interface.
|
|
51
|
+
The Document Reader Web Components package contains:
|
|
36
52
|
|
|
37
|
-
|
|
53
|
+
* [Predefined UI Components](#predefined-ui-components)
|
|
54
|
+
Document Reader UI Web Components with predefined view and behavior are designed for the fast integration of document recognition functionality into your project.
|
|
55
|
+
You can still customize most of the appearance and processing parameters before the launch if needed.
|
|
56
|
+
Examples of the UI Web Components are `document-reader` for documents recognition, `document-reader-device` for documents recognition with Document Reader Web Service,`camera-snapshot` for capturing images from a camera or uploading from a gallery.
|
|
57
|
+
* [Processor](#document-reader-processor)
|
|
58
|
+
Document Reader Processor manages the document image recognition and other related operations, leaving implementation of UI to you.
|
|
59
|
+
* [Controller](#document-reader-controller)
|
|
60
|
+
Document Reader Controller serves as the proxy, delegating the entire processing to external service.
|
|
38
61
|
|
|
39
|
-
|
|
40
|
-
- `camera-snapshot` for capturing images from a camera or uploading from a gallery.
|
|
62
|
+
Current document acts as a quick start guide for operating Document Reader Web Components and as a reference to their main processing parameters.
|
|
41
63
|
|
|
42
|
-
|
|
64
|
+
## Before You Start
|
|
43
65
|
|
|
44
|
-
|
|
66
|
+
Important notes:
|
|
45
67
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
- The components library does register the components on the web page itself, so make sure to import the library to your website before adding the components to the web page code.
|
|
50
|
-
- The UI components and the SDK use the `getUserMedia` method to display the video stream from the camera. This feature is available only in secure contexts (HTTPS).
|
|
51
|
-
- We do not include polyfills for older browsers in the package. If you need to support older versions of browsers in your project, you can simply install the necessary package. For example https://www.npmjs.com/package/@webcomponents/webcomponentsjs
|
|
68
|
+
* Document Reader Web Components and their methods strictly require the secure contexts, so using **HTTPS** protocol is a must.
|
|
69
|
+
* The considered components are registered on the **web page itself**, so make sure to import the library to your website before adding any of the components to the web page code.
|
|
70
|
+
* Only the modern browser versions are supported, see [compatibility](#compatibility). **Polyfills** are not included in the package by default.
|
|
52
71
|
|
|
53
72
|
## Compatibility
|
|
54
73
|
|
|
55
74
|
| Devices |  |  |  |
|
|
56
75
|
|:---------------------|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|
|
|
57
76
|
| **Mobile (iOS)** | 99 | 99 | 11 |
|
|
58
|
-
| **Mobile (Android)** | 66 |
|
|
59
|
-
| **Desktop** | 61 |
|
|
77
|
+
| **Mobile (Android)** | 66 | 63 | - |
|
|
78
|
+
| **Desktop** | 61 | 63 | 11 |
|
|
60
79
|
|
|
61
|
-
|
|
80
|
+
To support the older browser versions in your project, install the required polyfill packages manually.
|
|
81
|
+
Follow the link to npm package <a href="https://www.npmjs.com/package/@webcomponents/webcomponentsjs" target="_blank">@webcomponents/webcomponentsjs</a> for installation details.
|
|
62
82
|
|
|
63
|
-
|
|
83
|
+
## Predefined UI Components
|
|
64
84
|
|
|
65
|
-
|
|
85
|
+
### npm Service Integration
|
|
66
86
|
|
|
67
|
-
|
|
87
|
+
**Step 1.** Install the package `@regulaforensics/vp-frontend-document-components`:
|
|
88
|
+
|
|
89
|
+
```console
|
|
68
90
|
npm i @regulaforensics/vp-frontend-document-components
|
|
69
91
|
```
|
|
70
92
|
|
|
71
|
-
Import `defineComponents` and `DocumentReaderService`
|
|
93
|
+
**Step 2.** Import the function `defineComponents` and the class `DocumentReaderService` into your `.js` file.
|
|
72
94
|
|
|
95
|
+
Using module bundler:
|
|
73
96
|
```javascript
|
|
74
|
-
// If you use module bundler
|
|
75
97
|
import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-frontend-document-components';
|
|
76
|
-
|
|
77
|
-
|
|
98
|
+
```
|
|
99
|
+
Without module bundler:
|
|
100
|
+
```javascript
|
|
78
101
|
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
|
|
79
102
|
```
|
|
80
103
|
|
|
81
|
-
|
|
104
|
+
**Step 3.** Define the components, depending on the functionality that you need.
|
|
82
105
|
|
|
106
|
+
If you need only the `camera-snapshot` or `document-reader-device` component, call the `defineComponents()` method without arguments:
|
|
83
107
|
```javascript
|
|
84
|
-
|
|
108
|
+
defineComponents();
|
|
109
|
+
```
|
|
85
110
|
|
|
86
|
-
|
|
87
|
-
// defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'BASE64_LICENSE_KEY' })); // To use the document-reader component on test environments, you have to set the base64 license
|
|
111
|
+
If you need the entire scope of functionality:
|
|
88
112
|
|
|
89
|
-
|
|
113
|
+
**1.** Add `DocumentReaderService` to the global variable `RegulaDocumentSDK`:
|
|
114
|
+
```javascript
|
|
115
|
+
window.RegulaDocumentSDK = new DocumentReaderService();
|
|
90
116
|
```
|
|
117
|
+
**2.** Define the components and initialize the service:
|
|
91
118
|
|
|
92
|
-
|
|
119
|
+
On **production environment** (with preinstalled license file):
|
|
93
120
|
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
|
|
121
|
+
```javascript
|
|
122
|
+
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
On **test environment** (with generated Base64 license string):
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'BASE64_LICENSE_KEY' }));
|
|
97
129
|
```
|
|
98
130
|
|
|
99
|
-
|
|
131
|
+
For more information about licensing, see the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing/" target="_blank">Document Reader SDK Licensing</a> page and the
|
|
132
|
+
<a href="https://support.regulaforensics.com/hc/en-us/articles/15378060500881-How-to-convert-a-license-file-to-BASE64-" target="_blank">How to Convert a License File to BASE64</a> FAQ article.
|
|
100
133
|
|
|
101
|
-
|
|
134
|
+
**Step 4.** Add the desired component tag to the `.html` file.
|
|
102
135
|
|
|
103
136
|
For example:
|
|
104
137
|
|
|
138
|
+
`document-reader` is used for the document recognition with defined parameters:
|
|
105
139
|
```html
|
|
106
|
-
<
|
|
140
|
+
<document-reader></document-reader>
|
|
107
141
|
```
|
|
108
142
|
|
|
109
|
-
|
|
143
|
+
`document-reader-device` is used for delegating the document recognition to Document Reader Web Service:
|
|
144
|
+
```html
|
|
145
|
+
<document-reader-device></document-reader-device>
|
|
146
|
+
```
|
|
110
147
|
|
|
111
|
-
|
|
112
|
-
|
|
148
|
+
`camera-snapshot` is used to capture images from the device's camera and to import from the gallery:
|
|
149
|
+
```html
|
|
150
|
+
<camera-snapshot></camera-snapshot>
|
|
151
|
+
```
|
|
113
152
|
|
|
114
|
-
|
|
153
|
+
### CDN Service Integration
|
|
115
154
|
|
|
116
|
-
|
|
117
|
-
// defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'BASE64_LICENSE_KEY' })); // To use the document-reader component on test environments, you have to set the base64 license
|
|
155
|
+
**Step 1.** Connect the script to your `.html` file.
|
|
118
156
|
|
|
119
|
-
|
|
157
|
+
Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
|
|
158
|
+
|
|
159
|
+
For example:
|
|
160
|
+
```html
|
|
161
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
120
162
|
```
|
|
121
163
|
|
|
122
|
-
|
|
164
|
+
**Note:** You can find all available script versions in the corresponding section of npm, using the same link from the previous example.
|
|
123
165
|
|
|
124
|
-
|
|
125
|
-
<document-reader></document-reader> <!-- for documents recognition -->
|
|
126
|
-
<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### Document recognition parameters
|
|
130
|
-
|
|
131
|
-
After adding `DocumentReaderService` to the global variable, you can change the default document recognition settings:
|
|
132
|
-
|
|
133
|
-
```javascript
|
|
134
|
-
// Default settings for video capture (From camera button):
|
|
135
|
-
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
136
|
-
processParam: {
|
|
137
|
-
returnUncroppedImage: true,
|
|
138
|
-
scenario: 'MrzAndLocate',
|
|
139
|
-
multipageProcessing: false,
|
|
140
|
-
returnPackageForReprocess: false,
|
|
141
|
-
timeout: 20000,
|
|
142
|
-
resultTypeOutput: [],
|
|
143
|
-
imageQa: {
|
|
144
|
-
expectedPass: ['dpiThreshold', 'glaresCheck', 'focusCheck'],
|
|
145
|
-
dpiThreshold: 130,
|
|
146
|
-
glaresCheck: true,
|
|
147
|
-
glaresCheckParams: {
|
|
148
|
-
imgMarginPart: 0.05,
|
|
149
|
-
maxGlaringPart: 0.01,
|
|
150
|
-
},
|
|
151
|
-
},
|
|
152
|
-
},
|
|
153
|
-
};
|
|
166
|
+
**Step 2.** Define the components, depending on the functionality that you need.
|
|
154
167
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
scenario: 'MrzAndLocate',
|
|
159
|
-
returnUncroppedImage: true,
|
|
160
|
-
returnPackageForReprocess: false,
|
|
161
|
-
},
|
|
162
|
-
};
|
|
168
|
+
If you need only the `camera-snapshot` or `document-reader-device` component:
|
|
169
|
+
```javascript
|
|
170
|
+
defineComponents();
|
|
163
171
|
```
|
|
164
172
|
|
|
165
|
-
|
|
173
|
+
If you need the entire scope of functionality:
|
|
166
174
|
|
|
175
|
+
**1.** Access `DocumentReaderService` and `defineComponents` via the global variable `window.Regula`:
|
|
167
176
|
```javascript
|
|
168
|
-
|
|
169
|
-
tag: 'your session id',
|
|
170
|
-
};
|
|
177
|
+
const { defineComponents, DocumentReaderService } = window.Regula;
|
|
171
178
|
```
|
|
179
|
+
**2.** Add `DocumentReaderService` to the global variable `RegulaDocumentSDK`:
|
|
180
|
+
```javascript
|
|
181
|
+
window.RegulaDocumentSDK = new DocumentReaderService();
|
|
182
|
+
```
|
|
183
|
+
**3.** Define the components and initialize the service.
|
|
172
184
|
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
185
|
+
On **production environment** (with preinstalled license file):
|
|
186
|
+
```javascript
|
|
187
|
+
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
On **test environment** (with generated Base64 license string):
|
|
191
|
+
```javascript
|
|
192
|
+
defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'BASE64_LICENSE_KEY' }));
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
For more information about licensing, see the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing/" target="_blank">Document Reader SDK Licensing</a> page and the
|
|
196
|
+
<a href="https://support.regulaforensics.com/hc/en-us/articles/15378060500881-How-to-convert-a-license-file-to-BASE64-" target="_blank">How to Convert a License File to BASE64</a> FAQ article.
|
|
197
|
+
|
|
198
|
+
### Service Parameters
|
|
199
|
+
|
|
200
|
+
After adding `DocumentReaderService` to the global variable, you can change the default document recognition and image processing settings as follows:
|
|
201
|
+
|
|
202
|
+
**Image recognition** (video capture) default settings. The functionality is available via the camera button.
|
|
203
|
+
```javascript
|
|
204
|
+
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
205
|
+
processParam: {
|
|
206
|
+
returnUncroppedImage: true,
|
|
207
|
+
scenario: 'MrzAndLocate',
|
|
208
|
+
multipageProcessing: false,
|
|
209
|
+
returnPackageForReprocess: false,
|
|
210
|
+
timeout: 20000,
|
|
211
|
+
resultTypeOutput: [],
|
|
212
|
+
imageQa: {
|
|
213
|
+
expectedPass: ['dpiThreshold', 'glaresCheck', 'focusCheck'],
|
|
214
|
+
dpiThreshold: 130,
|
|
215
|
+
glaresCheck: true,
|
|
216
|
+
glaresCheckParams: {
|
|
217
|
+
imgMarginPart: 0.05,
|
|
218
|
+
maxGlaringPart: 0.01,
|
|
219
|
+
},
|
|
220
|
+
},
|
|
221
|
+
},
|
|
222
|
+
};
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
**Image processing** default settings. The functionality is available via the gallery button.
|
|
226
|
+
```javascript
|
|
227
|
+
window.RegulaDocumentSDK.imageProcessParam = {
|
|
228
|
+
processParam: {
|
|
229
|
+
scenario: 'MrzAndLocate',
|
|
230
|
+
returnUncroppedImage: true,
|
|
231
|
+
returnPackageForReprocess: false,
|
|
232
|
+
},
|
|
233
|
+
};
|
|
234
|
+
```
|
|
235
|
+
|
|
236
|
+
**Session ID** for image processing:
|
|
237
|
+
```javascript
|
|
238
|
+
window.RegulaDocumentSDK.imageProcessParam = {
|
|
239
|
+
tag: 'your session id',
|
|
240
|
+
};
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
#### Parameters Description
|
|
244
|
+
|
|
245
|
+
| Setting | Info | Data type | Default value | Values |
|
|
246
|
+
|:-------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
247
|
+
| **returnUncroppedImage** | When enabled, returns input images in output. | boolean | `true` | `true`, `false` |
|
|
248
|
+
| **scenario** | Recognition scenario. | string | 'MrzAndLocate' | 'MrzAndLocate', 'MrzOrLocate', 'Mrz', 'Locate' |
|
|
249
|
+
| **multipageProcessing** | Whether to enable multi-page document processing mode. | boolean | `true` | `true`, `false` |
|
|
250
|
+
| **timeout** | Recognition timeout in milliseconds. After this time process will be finished. | number | 2000 | numbers > 0 |
|
|
251
|
+
| **resultTypeOutput** | Types of results to return in response. [] - all available types. | number[] | [] | `1` - DocumentImageResult, `3` - TextDataResult, `5` - DocBarCodeInfo, `6` - GraphicsResult, `8` - DocumentTypesCandidatesResult, `9` - ChosenDocumentTypeResult, `20` - AuthenticityResult, `15` - LexicalAnalysisResult, `17` - TextDataResult, `18` - TextDataResult, `19` - GraphicsResult, `30` - ImageQualityResult, `33` - StatusResult, `36` - TextResult, `37` - ImagesResult, `85` - DocumentPositionResult, `102` - TextDataResult, `103` - GraphicsResult, `50` - LicenseResult, `49` - EncryptedRCLResult |
|
|
252
|
+
| **returnPackageForReprocess** | When enabled, returns the package for reprocessing on the backend. | boolean | `false` | `true`, `false` |
|
|
253
|
+
| **imageQa** | When enabled, image quality checks status affects document optical and overall status. | | | |
|
|
254
|
+
| **expectedPass** | Activated image quality checks. | string[] | ['dpiThreshold', 'glaresCheck', 'focusCheck'] | 'dpiThreshold', 'glaresCheck', 'focusCheck' |
|
|
255
|
+
| **dpiThreshold** | This parameter sets threshold for Image QA check of the presented document physical dpi. If actual document dpi is below this threshold, check will fail. | number | 150 | numbers > 0 |
|
|
256
|
+
| **glaresCheck** | This option enables glares check while performing image quality validation. | boolean | `true` | `true`, `false` |
|
|
257
|
+
| **glaresCheckParams** | Settings for glare check. | | | |
|
|
258
|
+
| **imageOutputMaxHeight** | This parameter allows setting maximum height in pixels of output images and thus reducing image size to desired. Does not change the aspect ratio. Changes disabled if equals to 0. | number | 0 | numbers > 0 |
|
|
259
|
+
| **imageOutputMaxWidth** | This parameter allows setting maximum width in pixels of output images and thus reducing image size to desired. Does not change the aspect ratio. Changes disabled if equals to 0. | number | 0 | numbers > 0 |
|
|
260
|
+
| **fieldTypesFilter** | List of text field types to extract. If empty, all text fields from template will be extracted. Narrowing the list can shorten processing time. | number[] | [] | |
|
|
261
|
+
| **dateFormat** | This option allows you to set dates format so that solution will return dates in this format. For example, if you supply 'MM/dd/yyyy', and document have printed date '09 JUL 2020' for the date os issue, you will get '07/09/2020' as a result. By default it is set to system locale default (where the service is running). | string | | 'MM/dd/yyyy' |
|
|
262
|
+
| **measureSystem** | This option allows you to set the system of measurement used for converting original values in document to output result values. Metric by default. | number | 0 | `0` - Metric, `1` - Imperial |
|
|
263
|
+
| **imageDpiOutMax** | This parameter controls maximum resolution in dpi of output images. Resolution will remain original in case 0 is supplied. By default is set to return images in response with resolution not greater than 300 dpi for all scenarios except FullAuth. In FullAuth scenario this limit is 1000 dpi by default. | number | | numbers > 0 |
|
|
264
|
+
| **alreadyCropped** | This option can be enabled if you know for sure that the image you provide contains already cropped document by its edges. This was designed to process on the server side images captured and cropped on mobile. | boolean | `false` | `true`, `false` |
|
|
265
|
+
| **customParams** | This option allows passing custom processing parameters that can be implemented in future without changing API. | Object | {} | |
|
|
266
|
+
| **fastDocDetect** (deprecated) | When enabled, shorten the list of candidates to process during document detection in a single image process mode. Reduces processing time for specific backgrounds. | boolean | `true` | `true`, `false` |
|
|
267
|
+
| **updateOCRValidityByGlare** | When enabled, fail OCR field validity, if there is a glare over the text field on the image. | boolean | `false` | `true`, `false` |
|
|
268
|
+
| **returnCroppedBarcode** | When enabled, returns cropped barcode images for unknown documents. | boolean | `false` | `true`, `false` |
|
|
269
|
+
| **respectImageQuality** | When enabled, image quality checks status affects document optical and overall status. | boolean | `false` | `true`, `false` |
|
|
270
|
+
| **forceDocFormat** | Force use of specified document format when locating and recognizing document to reduce the number of candidates. | number | | `0` - ID1 document format, `1` - ID2 document format, `2` - ID3 document format, `3` - Undefined document format, `4` - A4 document format, `5` - ID3 double document format, `10` - ID1 format document rotated 90°, `11` - ID1 format document rotated 180°, `12` - ID1 format document rotated 270°, `13` - ID2 format document rotated 90°, `14` - ID3 format document rotated 180°, `1000` - Arbitrary format, `1002` - Flexible format. Standard formats can be resized during cropping, depending on various factors: light, background... |
|
|
271
|
+
| **noGraphics** | When enabled, no graphic fields will be cropped from document image. | boolean | `false` | `true`, `false` |
|
|
272
|
+
| **documentAreaMin** | Specifies minimal area of the image that document should cover to be treated as candidate when locating. Value should be in range from 0 to 1, where 1 is when document should fully cover the image. | number | 0 | 0 - 1 |
|
|
273
|
+
| **depersonalizeLog** | When enabled, all personal data will be forcibly removed from the logs. | boolean | `false` | `true`, `false` |
|
|
274
|
+
| **multiDocOnImage** | This option allows locating and cropping multiple documents from one image if enabled. | boolean | `false` | `true`, `false` |
|
|
275
|
+
| **shiftExpiryDate** | This option allows shifting the date of expiry into the future or past for number of months specified. This is useful, for example, in some cases when document might be still valid for some period after original expiration date to prevent negative validity status for such documents. Or by shifting the date to the past will set negative validity for the documents that is about to expire in a specified number of months. | number | 0 | numbers > 0 |
|
|
276
|
+
| **minimalHolderAge** | This options allows specifying the minimal age in years of the document holder for the document to be considered valid. | number | 0 | numbers > 0 |
|
|
277
|
+
| **mrzFormatsFilter** | This option allows limiting MRZ formats to be recognized by specifying them in array. | string[] | [] | `'1x30'` - IDL, `'3x30'` - ID1, `'2x36'` - ID2, `'2x44'` - ID3, `'1x6'` - CAN, `'2x30'` - ID1 2x30 |
|
|
278
|
+
| **forceReadMrzBeforeLocate** | When enabled, make sure that in series processing MRZ is located fully inside the result document image, if present on the document. Enabling this option may add extra processing time, by disabling optimizations, but allows more stability in output image quality. | boolean | `false` | `true`, `false` |
|
|
279
|
+
| **parseBarcodes** | This option can be disabled to stop parsing after barcode is read. | boolean | `true` | `true`, `false` |
|
|
280
|
+
| **splitNames** | When enabled, the Surname and GivenNames fields will be divided into ft_First_Name, ft_Second_Name, ft_Third_Name, ft_Fourth_Name, ft_Last_Name fields. | boolean | `false` | `true`, `false` |
|
|
281
|
+
|
|
282
|
+
**Attention!** If the `multipage-processing` or `internal-scenario` attributes are set, the corresponding `multipageProcessing` and `scenario` parameters' values are ignored.
|
|
213
283
|
|
|
214
284
|
### Events
|
|
215
285
|
|
|
216
|
-
|
|
286
|
+
The main idea of a subscription to different events is to detect the specific state changes of the concrete component.
|
|
287
|
+
For the convenience, the event has the same name as the component that it belongs to.
|
|
217
288
|
|
|
218
|
-
For example:
|
|
289
|
+
For example, the next code snippet adds the event listeners to `document-reader`, `document-reader-device`, and `camera-snapshot` components:
|
|
219
290
|
|
|
220
291
|
```javascript
|
|
221
292
|
const documentReaderComponent = document.querySelector('document-reader');
|
|
293
|
+
const documentReaderComponent = document.querySelector('document-reader-device');
|
|
222
294
|
const cameraSnapshotComponent = document.querySelector('camera-snapshot');
|
|
223
295
|
|
|
224
|
-
documentReaderComponent.addEventListener('document-reader', (event) => console.log(event.detail));
|
|
225
|
-
|
|
296
|
+
documentReaderComponent.addEventListener('document-reader', (event) => console.log(event.detail));
|
|
297
|
+
documentReaderComponent.addEventListener('document-reader-device', (event) => console.log(event.detail));
|
|
298
|
+
cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.log(event.detail));
|
|
226
299
|
```
|
|
227
300
|
|
|
228
|
-
|
|
301
|
+
To provide the detailed information about how the event was generated and executed, the special object `event.detail` is generated.
|
|
302
|
+
See `event.detail` object structure in the following code snippet:
|
|
229
303
|
|
|
230
|
-
|
|
304
|
+
```javascript
|
|
305
|
+
{
|
|
306
|
+
action: 'PRESS_CAMERA_BUTTON',
|
|
307
|
+
data: null,
|
|
308
|
+
}
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
The fields of the `event.detail` object:
|
|
312
|
+
* `action` contains the type of action that generated the component's event. For more information, see all available [action types](#action-types).
|
|
313
|
+
* `data` keeps the object with status of executed action and the payload. For more information, see the [action data](#action-data) section.
|
|
314
|
+
|
|
315
|
+
#### Action Types
|
|
316
|
+
|
|
317
|
+
| Type of action | Description of the action | Components and events, where present |
|
|
318
|
+
|:-----------------------------|:------------------------------------------------------------------|:--------------------------------------------------------------:|
|
|
319
|
+
| `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot`, `document-reader-device` |
|
|
320
|
+
| `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
321
|
+
| `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
322
|
+
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot`, `document-reader-device` |
|
|
323
|
+
| `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
|
|
324
|
+
| `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
325
|
+
| `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
326
|
+
| `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
327
|
+
| `PRESS_CONNECT_BUTTON` | The "Connect" button is pressed. | `document-reader-device` |
|
|
328
|
+
| `PRESS_DISCONNECT_BUTTON` | The "Disconnect" button is pressed. | `document-reader-device` |
|
|
329
|
+
| `PRESS_AUTOSCAN_BUTTON` | The "Auto scan" button is pressed. | `document-reader-device` |
|
|
330
|
+
| `PRESS_PROCESS_BUTTON` | The "Process" button is pressed. | `document-reader-device` |
|
|
331
|
+
| `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
|
|
332
|
+
| `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
|
|
333
|
+
| `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot`, `document-reader-device` |
|
|
334
|
+
| `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
|
|
335
|
+
| `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
|
|
336
|
+
| `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
|
|
337
|
+
| `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
|
|
338
|
+
| `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
|
|
339
|
+
| `PROCESS_STARTED` | Document processing has started. | `document-reader-device` |
|
|
340
|
+
| `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot`, `document-reader-device` |
|
|
341
|
+
| `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
#### Action Data
|
|
345
|
+
|
|
346
|
+
**1.** In case of successful operation, the `event.detail.data` field is structured as follows:
|
|
231
347
|
|
|
232
348
|
```javascript
|
|
233
349
|
{
|
|
234
|
-
|
|
235
|
-
|
|
350
|
+
response: { ... },
|
|
351
|
+
status: 1
|
|
236
352
|
}
|
|
237
353
|
```
|
|
238
354
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
| Type of action | Description of the action | In which component is present |
|
|
242
|
-
|:-----------------------------|:-----------------------------------------------------------------:|:------------------------------------:|
|
|
243
|
-
| `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot` |
|
|
244
|
-
| `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
245
|
-
| `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
246
|
-
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
247
|
-
| `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
|
|
248
|
-
| `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
249
|
-
| `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
250
|
-
| `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
251
|
-
| `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
|
|
252
|
-
| `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
|
|
253
|
-
| `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
254
|
-
| `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
|
|
255
|
-
| `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
|
|
256
|
-
| `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
|
|
257
|
-
| `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
|
|
258
|
-
| `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
|
|
259
|
-
| `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot` |
|
|
260
|
-
| `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
|
|
261
|
-
|
|
262
|
-
In cases of successful operation of the components, the `data` field will contain the following fields:
|
|
355
|
+
If video recording is enabled:
|
|
263
356
|
|
|
264
357
|
```javascript
|
|
265
358
|
{
|
|
266
|
-
response: { ... },
|
|
267
|
-
status: 1
|
|
359
|
+
response: { ... },
|
|
360
|
+
status: 1,
|
|
361
|
+
video: Blob,
|
|
268
362
|
}
|
|
269
363
|
```
|
|
270
364
|
|
|
271
|
-
|
|
365
|
+
Available fields of `event.detail.data` object:
|
|
366
|
+
* `response` contains the object with resulting payload of the event's action execution.
|
|
367
|
+
* `status` defines the status of event's action completion. For details, see [action statuses](#action-statuses).
|
|
368
|
+
* `video` video of the document scanning process (if ```videoRecord``` setting is set).
|
|
272
369
|
|
|
370
|
+
**2.** In case of event's action failure, the `event.detail.data` field is structured as follows:
|
|
371
|
+
|
|
273
372
|
```javascript
|
|
274
373
|
{
|
|
275
|
-
reason: 'CAMERA_PERMISSION_DENIED',
|
|
374
|
+
reason: 'CAMERA_PERMISSION_DENIED',
|
|
276
375
|
status: 0
|
|
277
376
|
}
|
|
278
377
|
```
|
|
279
378
|
|
|
280
|
-
|
|
379
|
+
Available fields of `event.detail.data` object:
|
|
380
|
+
* `reason` defines the reason of action's failure. For details, see [failure reasons](#action-failure-reasons).
|
|
381
|
+
* `status` defines the status of event's action completion. For details, see [action statuses](#action-statuses).
|
|
382
|
+
|
|
383
|
+
#### Action Statuses
|
|
384
|
+
|
|
385
|
+
| Status | Description |
|
|
386
|
+
|:-------|:------------|
|
|
387
|
+
| 0 | Failure |
|
|
388
|
+
| 1 | Success |
|
|
389
|
+
| 2 | Timeout |
|
|
281
390
|
|
|
282
|
-
|
|
283
|
-
|:-------|:----------------------------------:|
|
|
284
|
-
| 0 | Process failed. |
|
|
285
|
-
| 1 | Process is completed successfully. |
|
|
286
|
-
| 2 | Process is completed by timeout. |
|
|
391
|
+
#### Action Failure Reasons
|
|
287
392
|
|
|
288
|
-
|
|
393
|
+
| Reason | Description of the reason |
|
|
394
|
+
|:---------------------------|:-----------------------------------|
|
|
395
|
+
| `WASM_ERROR` | Error in WASM |
|
|
396
|
+
| `WASM_LICENSE` | Missing or incorrect license |
|
|
397
|
+
| `FILE_SIZE` | The file size is too large |
|
|
398
|
+
| `INCORRECT_FILE` | Problems with reading the file |
|
|
399
|
+
| `INCORRECT_SCENARIO` | Scenario is not supported |
|
|
400
|
+
| `UNKNOWN_ERROR` | Unknown error |
|
|
401
|
+
| `NOT_SUPPORTED` | The browser is not supported |
|
|
402
|
+
| `CAMERA_UNKNOWN_ERROR` | Unknown camera error |
|
|
403
|
+
| `CAMERA_PERMISSION_DENIED` | Access to the camera is prohibited |
|
|
404
|
+
| `NO_CAMERA` | There is no camera available |
|
|
405
|
+
| `INCORRECT_CAMERA_ID` | Camera with this ID was not found |
|
|
406
|
+
| `CONNECTION_ERROR` | Connection errors |
|
|
289
407
|
|
|
290
|
-
|
|
291
|
-
|:---------------------------|:-----------------------------------:|
|
|
292
|
-
| `WASM_ERROR` | Error in WASM. |
|
|
293
|
-
| `WASM_LICENSE` | Missing or incorrect license. |
|
|
294
|
-
| `FILE_SIZE` | The file size is too large. |
|
|
295
|
-
| `INCORRECT_FILE` | Problems with reading the file. |
|
|
296
|
-
| `INCORRECT_SCENARIO` | Scenario is not supported. |
|
|
297
|
-
| `UNKNOWN_ERROR` | Unknown error. |
|
|
298
|
-
| `NOT_SUPPORTED` | The browser is not supported. |
|
|
299
|
-
| `CAMERA_UNKNOWN_ERROR` | Unknown camera error. |
|
|
300
|
-
| `CAMERA_PERMISSION_DENIED` | Access to the camera is prohibited. |
|
|
301
|
-
| `NO_CAMERA` | There is no camera. |
|
|
302
|
-
| `CONNECTION_ERROR` | Connection errors. |
|
|
408
|
+
#### Event Generation Logic
|
|
303
409
|
|
|
304
|
-
The
|
|
410
|
+
The cases of event generation are described in the following table.
|
|
305
411
|
|
|
306
412
|
<table>
|
|
307
413
|
<thead>
|
|
@@ -317,10 +423,10 @@ Event object `event.detail`
|
|
|
317
423
|
</thead>
|
|
318
424
|
<tbody>
|
|
319
425
|
<tr>
|
|
320
|
-
<td>
|
|
426
|
+
<td>Component is mounted in the DOM.</td>
|
|
321
427
|
<td>
|
|
322
428
|
|
|
323
|
-
`document-reader`, `camera-snapshot`
|
|
429
|
+
`document-reader`, `camera-snapshot`, `document-reader-device`
|
|
324
430
|
|
|
325
431
|
</td>
|
|
326
432
|
<td>
|
|
@@ -348,7 +454,7 @@ For example:
|
|
|
348
454
|
</td>
|
|
349
455
|
</tr>
|
|
350
456
|
<tr>
|
|
351
|
-
<td>
|
|
457
|
+
<td>"From camera" button is pressed.</td>
|
|
352
458
|
<td>
|
|
353
459
|
|
|
354
460
|
`document-reader`, `camera-snapshot`
|
|
@@ -367,7 +473,7 @@ For example:
|
|
|
367
473
|
<td></td>
|
|
368
474
|
</tr>
|
|
369
475
|
<tr>
|
|
370
|
-
<td>
|
|
476
|
+
<td>"From gallery" button is pressed.</td>
|
|
371
477
|
<td>
|
|
372
478
|
|
|
373
479
|
`document-reader`, `camera-snapshot`
|
|
@@ -386,10 +492,10 @@ For example:
|
|
|
386
492
|
<td></td>
|
|
387
493
|
</tr>
|
|
388
494
|
<tr>
|
|
389
|
-
<td>
|
|
495
|
+
<td>"Retry" button is pressed.</td>
|
|
390
496
|
<td>
|
|
391
497
|
|
|
392
|
-
`document-reader`, `camera-snapshot`
|
|
498
|
+
`document-reader`, `camera-snapshot`, `document-reader-device`
|
|
393
499
|
|
|
394
500
|
</td>
|
|
395
501
|
<td>
|
|
@@ -405,7 +511,7 @@ For example:
|
|
|
405
511
|
<td></td>
|
|
406
512
|
</tr>
|
|
407
513
|
<tr>
|
|
408
|
-
<td>
|
|
514
|
+
<td>"Skip page" button is pressed.</td>
|
|
409
515
|
<td>
|
|
410
516
|
|
|
411
517
|
`document-reader`
|
|
@@ -428,7 +534,7 @@ This event available only in `document-reader`.
|
|
|
428
534
|
</td>
|
|
429
535
|
</tr>
|
|
430
536
|
<tr>
|
|
431
|
-
<td>
|
|
537
|
+
<td>"Capture" button is pressed.</td>
|
|
432
538
|
<td>
|
|
433
539
|
|
|
434
540
|
`document-reader`, `camera-snapshot`
|
|
@@ -448,7 +554,7 @@ This event available only in `document-reader`.
|
|
|
448
554
|
</td>
|
|
449
555
|
</tr>
|
|
450
556
|
<tr>
|
|
451
|
-
<td>
|
|
557
|
+
<td>"Change camera" button is pressed.</td>
|
|
452
558
|
<td>
|
|
453
559
|
|
|
454
560
|
`document-reader`, `camera-snapshot`
|
|
@@ -468,7 +574,7 @@ This event available only in `document-reader`.
|
|
|
468
574
|
</td>
|
|
469
575
|
</tr>
|
|
470
576
|
<tr>
|
|
471
|
-
<td>
|
|
577
|
+
<td>"Mirroring" button is pressed.</td>
|
|
472
578
|
<td>
|
|
473
579
|
|
|
474
580
|
`document-reader`, `camera-snapshot`
|
|
@@ -483,6 +589,86 @@ This event available only in `document-reader`.
|
|
|
483
589
|
}
|
|
484
590
|
```
|
|
485
591
|
|
|
592
|
+
</td>
|
|
593
|
+
<td>
|
|
594
|
+
</td>
|
|
595
|
+
</tr>
|
|
596
|
+
<tr>
|
|
597
|
+
<td>"Connect" button is pressed.</td>
|
|
598
|
+
<td>
|
|
599
|
+
|
|
600
|
+
`document-reader-device`
|
|
601
|
+
|
|
602
|
+
</td>
|
|
603
|
+
<td>
|
|
604
|
+
|
|
605
|
+
```javascript
|
|
606
|
+
{
|
|
607
|
+
action: 'PRESS_CONNECT_BUTTON',
|
|
608
|
+
data: null,
|
|
609
|
+
}
|
|
610
|
+
```
|
|
611
|
+
|
|
612
|
+
</td>
|
|
613
|
+
<td>
|
|
614
|
+
</td>
|
|
615
|
+
</tr>
|
|
616
|
+
<tr>
|
|
617
|
+
<td>"Disconnect" button is pressed.</td>
|
|
618
|
+
<td>
|
|
619
|
+
|
|
620
|
+
`document-reader-device`
|
|
621
|
+
|
|
622
|
+
</td>
|
|
623
|
+
<td>
|
|
624
|
+
|
|
625
|
+
```javascript
|
|
626
|
+
{
|
|
627
|
+
action: 'PRESS_DISCONNECT_BUTTON',
|
|
628
|
+
data: null,
|
|
629
|
+
}
|
|
630
|
+
```
|
|
631
|
+
|
|
632
|
+
</td>
|
|
633
|
+
<td>
|
|
634
|
+
</td>
|
|
635
|
+
</tr>
|
|
636
|
+
<tr>
|
|
637
|
+
<td>"Auto scan" button is pressed.</td>
|
|
638
|
+
<td>
|
|
639
|
+
|
|
640
|
+
`document-reader-device`
|
|
641
|
+
|
|
642
|
+
</td>
|
|
643
|
+
<td>
|
|
644
|
+
|
|
645
|
+
```javascript
|
|
646
|
+
{
|
|
647
|
+
action: 'PRESS_AUTOSCAN_BUTTON',
|
|
648
|
+
data: null,
|
|
649
|
+
}
|
|
650
|
+
```
|
|
651
|
+
|
|
652
|
+
</td>
|
|
653
|
+
<td>
|
|
654
|
+
</td>
|
|
655
|
+
</tr>
|
|
656
|
+
<tr>
|
|
657
|
+
<td>The "Process" button is pressed.</td>
|
|
658
|
+
<td>
|
|
659
|
+
|
|
660
|
+
`document-reader-device`
|
|
661
|
+
|
|
662
|
+
</td>
|
|
663
|
+
<td>
|
|
664
|
+
|
|
665
|
+
```javascript
|
|
666
|
+
{
|
|
667
|
+
action: 'PRESS_PROCESS_BUTTON',
|
|
668
|
+
data: null,
|
|
669
|
+
}
|
|
670
|
+
```
|
|
671
|
+
|
|
486
672
|
</td>
|
|
487
673
|
<td>
|
|
488
674
|
</td>
|
|
@@ -534,10 +720,10 @@ This event available only in `document-reader`.
|
|
|
534
720
|
</td>
|
|
535
721
|
</tr>
|
|
536
722
|
<tr>
|
|
537
|
-
<td>
|
|
723
|
+
<td>"Close" button is pressed.</td>
|
|
538
724
|
<td>
|
|
539
725
|
|
|
540
|
-
`document-reader`, `camera-snapshot`
|
|
726
|
+
`document-reader`, `camera-snapshot`, `document-reader-device`
|
|
541
727
|
|
|
542
728
|
</td>
|
|
543
729
|
<td>
|
|
@@ -553,7 +739,7 @@ This event available only in `document-reader`.
|
|
|
553
739
|
<td></td>
|
|
554
740
|
</tr>
|
|
555
741
|
<tr>
|
|
556
|
-
<td>
|
|
742
|
+
<td>"Close" button is pressed on the document recognition screen.</td>
|
|
557
743
|
<td>
|
|
558
744
|
|
|
559
745
|
`document-reader`, `camera-snapshot`
|
|
@@ -591,7 +777,7 @@ This event available only in `document-reader`.
|
|
|
591
777
|
<td></td>
|
|
592
778
|
</tr>
|
|
593
779
|
<tr>
|
|
594
|
-
<td>Video stream started.</td>
|
|
780
|
+
<td>Video stream has started.</td>
|
|
595
781
|
<td>
|
|
596
782
|
|
|
597
783
|
`document-reader`, `camera-snapshot`
|
|
@@ -610,7 +796,7 @@ This event available only in `document-reader`.
|
|
|
610
796
|
<td></td>
|
|
611
797
|
</tr>
|
|
612
798
|
<tr>
|
|
613
|
-
<td>Video stream stopped.</td>
|
|
799
|
+
<td>Video stream has stopped.</td>
|
|
614
800
|
<td>
|
|
615
801
|
|
|
616
802
|
`document-reader`, `camera-snapshot`
|
|
@@ -644,6 +830,25 @@ This event available only in `document-reader`.
|
|
|
644
830
|
}
|
|
645
831
|
```
|
|
646
832
|
|
|
833
|
+
</td>
|
|
834
|
+
<td></td>
|
|
835
|
+
</tr>
|
|
836
|
+
<tr>
|
|
837
|
+
<td>Document processing has started.</td>
|
|
838
|
+
<td>
|
|
839
|
+
|
|
840
|
+
`document-reader-device`
|
|
841
|
+
|
|
842
|
+
</td>
|
|
843
|
+
<td>
|
|
844
|
+
|
|
845
|
+
```javascript
|
|
846
|
+
{
|
|
847
|
+
action: 'PROCESS_STARTED',
|
|
848
|
+
data: null,
|
|
849
|
+
}
|
|
850
|
+
```
|
|
851
|
+
|
|
647
852
|
</td>
|
|
648
853
|
<td></td>
|
|
649
854
|
</tr>
|
|
@@ -651,7 +856,7 @@ This event available only in `document-reader`.
|
|
|
651
856
|
<td>The work of the component is completed successfully.</td>
|
|
652
857
|
<td>
|
|
653
858
|
|
|
654
|
-
`document-reader`, `camera-snapshot`
|
|
859
|
+
`document-reader`, `camera-snapshot`, `document-reader-device`
|
|
655
860
|
|
|
656
861
|
</td>
|
|
657
862
|
<td>
|
|
@@ -699,7 +904,7 @@ This event available only in `document-reader`.
|
|
|
699
904
|
<td>The work of the component failed.</td>
|
|
700
905
|
<td>
|
|
701
906
|
|
|
702
|
-
`document-reader`, `camera-snapshot`
|
|
907
|
+
`document-reader`, `camera-snapshot`, `document-reader-device`
|
|
703
908
|
|
|
704
909
|
</td>
|
|
705
910
|
<td>
|
|
@@ -743,11 +948,9 @@ This event available only in `document-reader`.
|
|
|
743
948
|
</tbody>
|
|
744
949
|
</table>
|
|
745
950
|
|
|
746
|
-
|
|
951
|
+
#### Event Response
|
|
747
952
|
|
|
748
|
-
You can get the response of the component in the `detail.data.response` field of the event object.
|
|
749
|
-
|
|
750
|
-
For example:
|
|
953
|
+
You can get the response of the component's event in the `detail.data.response` field of the event object. For example:
|
|
751
954
|
|
|
752
955
|
```javascript
|
|
753
956
|
const component = document.querySelector('document-reader');
|
|
@@ -762,83 +965,96 @@ function listener(event) {
|
|
|
762
965
|
component.addEventListener('document-reader', listener);
|
|
763
966
|
```
|
|
764
967
|
|
|
765
|
-
To get the results of processing each frame, you can set the callback function:
|
|
968
|
+
To get the results of processing of each frame, you can set the callback function as in the following example:
|
|
766
969
|
|
|
767
970
|
```javascript
|
|
768
971
|
window.RegulaDocumentSDK.recognizeListener = (response) => console.log(response);
|
|
769
972
|
```
|
|
770
973
|
|
|
771
|
-
### Settings and
|
|
772
|
-
|
|
773
|
-
There are two ways to
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
```javascript
|
|
778
|
-
const element = document.createElement('document-reader');
|
|
779
|
-
|
|
780
|
-
element.settings = {
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
};
|
|
785
|
-
```
|
|
786
|
-
|
|
787
|
-
Using attributes:
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
|
798
|
-
|
|
799
|
-
| **
|
|
800
|
-
| **
|
|
801
|
-
| **
|
|
802
|
-
| **
|
|
803
|
-
| **
|
|
804
|
-
| **
|
|
805
|
-
| **
|
|
806
|
-
| **
|
|
807
|
-
| **
|
|
808
|
-
| **
|
|
809
|
-
| **
|
|
810
|
-
| **
|
|
811
|
-
| **
|
|
812
|
-
| **
|
|
813
|
-
| **
|
|
814
|
-
| **
|
|
815
|
-
| **
|
|
816
|
-
| **
|
|
817
|
-
| **
|
|
818
|
-
| **
|
|
819
|
-
| **
|
|
820
|
-
| **
|
|
821
|
-
| **
|
|
822
|
-
| **
|
|
823
|
-
| **
|
|
824
|
-
| **
|
|
825
|
-
| **
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
974
|
+
### Settings and Attributes
|
|
975
|
+
|
|
976
|
+
There are two ways to define the element's settings: using the `settings` property of the JavaScript object or using attributes of the HTML tag.
|
|
977
|
+
See the description and examples below.
|
|
978
|
+
|
|
979
|
+
* Using `settings` property to configure element:
|
|
980
|
+
```javascript
|
|
981
|
+
const element = document.createElement('document-reader');
|
|
982
|
+
|
|
983
|
+
element.settings = {
|
|
984
|
+
startScreen: true,
|
|
985
|
+
internalScenario: 'Locate',
|
|
986
|
+
multipageProcessing: true,
|
|
987
|
+
};
|
|
988
|
+
```
|
|
989
|
+
|
|
990
|
+
* Using attributes to configure element:
|
|
991
|
+
```javascript
|
|
992
|
+
<document-reader start-screen internal-scenario="Locate"></document-reader>
|
|
993
|
+
```
|
|
994
|
+
|
|
995
|
+
We **recommend** using the `settings` property of the element to configure its parameters.
|
|
996
|
+
This method gives more flexibility in setup, in addition, all new parameters in the future will be available **only** as the settings of the object (not as HTML attributes).
|
|
997
|
+
|
|
998
|
+
See all component's settings and attributes in the following table.
|
|
999
|
+
|
|
1000
|
+
| Setting name | Attribute name | Description | Data type | Default value | Values | Available in |
|
|
1001
|
+
|:------------------------------------------|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------:|:-----------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------:|
|
|
1002
|
+
| **locale** | **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`, `zh`, `sk`, `uk`, `fr`, `es`, `pt`, `ar`, `nl`, `id`, `vi`, `ko`, `ms`, `ro`, `el`, `tr`, `ja`, `cs`, `th`, `hi`, `bn`, `he`, `fi`, `sv`, `da`, `hr`, `no` | `document-reader`, `document-reader-device`, `camera-snapshot` |
|
|
1003
|
+
| **internalScenario** | **internal-scenario** | The component document verification scenario. | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` | `document-reader` |
|
|
1004
|
+
| **multipageProcessing** | **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` | `document-reader` |
|
|
1005
|
+
| **startScreen** | **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` | `document-reader`, `camera-snapshot` |
|
|
1006
|
+
| **multipleFileInput** | **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` | `document-reader`, `camera-snapshot` |
|
|
1007
|
+
| **cameraId** | **camera-id** | Ability to select a camera. You can get the device ID using [navigator.mediaDevices.enumerateDevices()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices). | string | `undefined` | `camera id string value` | `document-reader`, `camera-snapshot` |
|
|
1008
|
+
| **devLicense** | **license** | To use the component on test environments, set the base64 license value to the `license` attribute. | string | `undefined` | `base64 license value` | `document-reader` |
|
|
1009
|
+
| **regulaLogo** | **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1010
|
+
| **changeCameraButton** | **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1011
|
+
| **closeButton** | **close-button** | Show the close button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1012
|
+
| **captureButton** | **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
1013
|
+
| **skipButton** | | Show the skip button for the second page. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
1014
|
+
| **captureMode** | | Sets the capture mode. Mode `auto` - recognition starts immediately after the camera starts working. Mode `captureFrame` - recognition of the frame received after pressing the capture button. Mode `captureVideo` - recognition begins after pressing the button, pressing the button again will send the received frame for processing. | string | `auto` | `auto`, `captureVideo`, `captureFrame` | `document-reader` |
|
|
1015
|
+
| **resolution** | | Sets the resolution of the video stream from the camera. | object | `{ width: 1920, height: 1080 }` | `{ width: number, height: number }` | `document-reader`, `camera-snapshot` |
|
|
1016
|
+
| **cameraMode** | | Selects the front or rear camera of the device. | object | `environment` | `environment`, `user` | `document-reader`, `camera-snapshot` |
|
|
1017
|
+
| **flipFrontIcon** | | Sets the front side of the document flip icon. You can set link (`https://example.link.com/icon.png`), image in base64 string (`data:image/svg+xml;base64,PHN2ZyBjbGF...`) or imported image if you use module bundler. | string | `undefined` | `link to image`, `base64 string`, `imported image` | `document-reader` |
|
|
1018
|
+
| **flipBackIcon** | | Sets the back side of the document flip icon. You can set link (`https://example.link.com/icon.png`), image in base64 string (`data:image/svg+xml;base64,PHN2ZyBjbGF...`) or imported image if you use module bundler. | string | `undefined` | `link to image`, `base64 string`, `imported image` | `document-reader` |
|
|
1019
|
+
| **cameraFrameBorderWidth** | | Sets the thickness of the document capture frame. | number | 5 | `any number` | `document-reader` |
|
|
1020
|
+
| **backgroundMaskAlpha** | | Sets the transparency of the background outside the frame. | number | 0.5 | `from 0 to 1` | `document-reader` |
|
|
1021
|
+
| **cameraFrameLandscapeAspectRatio** | | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | `any number` | `document-reader` |
|
|
1022
|
+
| **cameraFramePortraitAspectRatio** | | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | `any number` | `document-reader` |
|
|
1023
|
+
| **statusIcon** | | Show status icon. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
1024
|
+
| **statusPositionMultiplier** | | Sets the vertical position of the status message. | number | `undefined` | `from 0 to 2` | `document-reader` |
|
|
1025
|
+
| **cameraFrameOffsetWidth** | | Sets the offset of the capture frame. | number | `undefined` | `any number` | `document-reader` |
|
|
1026
|
+
| **cameraFrameVerticalPositionMultiplier** | | Sets the offset of the capture frame from the top edge. | number | `undefined` | `from 0 to 2` | `document-reader` |
|
|
1027
|
+
| **cameraFrameShapeType** | | Sets the capture frame shape type. | string | `line` | `line`, `corners` | `document-reader` |
|
|
1028
|
+
| **cameraFrameLineCap** | | Sets the style of the end of the capture frame line when `cameraFrameShapeType='corners'` | string | `butt` | `butt`, `round`, `square` | `document-reader` |
|
|
1029
|
+
| **cameraFrameLineLength** | | Sets the length of the capture frame line when `cameraFrameShapeType='corners'` | number | 5 | `any number` | `document-reader` |
|
|
1030
|
+
| **cameraFrameCornerRadius** | | Sets the radius of rounding of the capture frame. | number | 15 | `any number` | `document-reader` |
|
|
1031
|
+
| **cameraFrameDefaultColor** | | Sets the color of the capture frame. | string | `rgba(255, 255, 255, 0.9)` | `any color string` | `document-reader` |
|
|
1032
|
+
| **cameraFrameActiveColor** | | Sets the capture frame color when a document is detected. | string | `rgba(30, 130, 76, 0.9)` | `any color string` | `document-reader` |
|
|
1033
|
+
| **statusTextColor** | | Sets the color of the text message status. | string | `white` | `any color string` | `document-reader`, `camera-snapshot` |
|
|
1034
|
+
| **statusBackgroundColor** | | Sets the background color of the message status. | string | `rgba(27, 16, 31, 0.5)` | `any color string` | `document-reader`, `camera-snapshot` |
|
|
1035
|
+
| **cameraFrame** | | Show the capture frame. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
1036
|
+
| **captureButtonDelay** | | Show the capture button after delay. | number | `undefined` | `any number` | `document-reader` |
|
|
1037
|
+
| **nonce** | | Sets the unique nonce value to maintain the CSP policy. | string | `undefined` | `unique nonce value` | `document-reader`, `document-reader-device`, `camera-snapshot` |
|
|
1038
|
+
| **serviceUrl** | | Sets the address of the Regula Document Reader Web Service. | string | | `any URL` | `document-reader-device` |
|
|
1039
|
+
| **properties** | | Sets an object with processing parameters. | object | `undefined` | `{ propertyName: 'value' }` | `document-reader-device` |
|
|
1040
|
+
| **videoRecord** | | Sets the ability to record a video of the document scanning process. If set to true it records the entire process. You can also set the recording delay and recording duration. The video will be available in the component response. | boolean or object | `undefined` | `true`, `false`, `{ delay: number, duration: number }` | `document-reader` |
|
|
1041
|
+
| **videoCaptureMotionControl** | | Enables device shaking control. | boolean | `false` | `true`, `false` | `document-reader` |
|
|
1042
|
+
|
|
1043
|
+
### Appearance Customization
|
|
1044
|
+
|
|
1045
|
+
#### Font and Colors
|
|
1046
|
+
|
|
1047
|
+
Using CSS variables, you can change the font and the main colors of the components. See the table for the details.
|
|
832
1048
|
|
|
833
1049
|
| Variable | Info | Default value |
|
|
834
1050
|
|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------:|
|
|
835
|
-
| **--font-family** | The font family of all text elements. If you change the font family, make sure to adjust the
|
|
1051
|
+
| **--font-family** | The font family of all text elements. If you change the font family, make sure to adjust the font size so the message on the start screen would fit the frame. | `Noto Sans, sans-serif` |
|
|
836
1052
|
| **--font-size** | The font size for the text elements. | `16px` |
|
|
837
1053
|
| **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | `#bd7dff` |
|
|
838
1054
|
| **--hover-color** | Buttons hover color. | `#c994ff` |
|
|
839
1055
|
| **--active-color** | Buttons active color. | `#bd7dff` |
|
|
840
1056
|
|
|
841
|
-
|
|
1057
|
+
The following example demonstrates the `document-reader` HTML element font and color customization via the custom CSS class:
|
|
842
1058
|
|
|
843
1059
|
CSS:
|
|
844
1060
|
|
|
@@ -855,9 +1071,10 @@ HTML:
|
|
|
855
1071
|
<document-reader class="my-custom-style"></document-reader>
|
|
856
1072
|
```
|
|
857
1073
|
|
|
858
|
-
#### Messages
|
|
1074
|
+
#### Localized Messages
|
|
859
1075
|
|
|
860
|
-
To change the standard component messages or any text, specify the language
|
|
1076
|
+
To change the standard component messages or any text, specify the language attribute (see `locale` in [settings and attributes](#settings-and-attributes)) to be used.
|
|
1077
|
+
You can select one from existing locales or add your custom one. See the following example:
|
|
861
1078
|
|
|
862
1079
|
```javascript
|
|
863
1080
|
const element = document.createElement('document-reader');
|
|
@@ -871,13 +1088,13 @@ element.translations = {
|
|
|
871
1088
|
body.append(element);
|
|
872
1089
|
```
|
|
873
1090
|
|
|
874
|
-
**Note**:
|
|
1091
|
+
**Note**: To see the changes applied, don't forget to set the desired language to the `locale` attribute.
|
|
875
1092
|
|
|
876
1093
|
```html
|
|
877
1094
|
<document-reader locale="en"></document-reader>
|
|
878
1095
|
```
|
|
879
1096
|
|
|
880
|
-
|
|
1097
|
+
See the following table with localized labels, used in the components.
|
|
881
1098
|
|
|
882
1099
|
| Label | Default message in `en` locale | Used in |
|
|
883
1100
|
|:------------------------------|:---------------------------------------------------------------------------------------------|:------------------------------------:|
|
|
@@ -917,39 +1134,55 @@ List of labels used in the component:
|
|
|
917
1134
|
| **documentProcessing** | Document processing... | `document-reader` |
|
|
918
1135
|
| **flipDocument** | Flip the document | `document-reader` |
|
|
919
1136
|
| **verified** | Verified! | `document-reader` |
|
|
1137
|
+
| **keepDeviceStill** | Hold the device still | `document-reader` |
|
|
920
1138
|
| **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
|
|
921
1139
|
| **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
|
|
922
1140
|
| **uploadPhoto** | Upload a photo | `camera-snapshot` |
|
|
923
1141
|
| **useCameraOrGallery** | Use your device camera or select a photo from the gallery | `camera-snapshot` |
|
|
1142
|
+
| **process** | Process | `document-reader-device` |
|
|
1143
|
+
| **autoScan** | Auto scan | `document-reader-device` |
|
|
1144
|
+
| **disconnect** | Disconnect | `document-reader-device` |
|
|
1145
|
+
| **connect** | Connect | `document-reader-device` |
|
|
1146
|
+
| **service** | Service | `document-reader-device` |
|
|
1147
|
+
| **Device** | Device | `document-reader-device` |
|
|
924
1148
|
|
|
925
|
-
## Document
|
|
926
|
-
|
|
927
|
-
You can use the document-reader SDK to create your own UI interface.
|
|
1149
|
+
## Document Reader Processor
|
|
928
1150
|
|
|
929
|
-
|
|
1151
|
+
DocumentReaderProcessor manages the document image recognition and other related operations, leaving implementation of UI to you.
|
|
930
1152
|
|
|
931
|
-
|
|
1153
|
+
### npm Processor Integration
|
|
932
1154
|
|
|
933
|
-
|
|
1155
|
+
**Step 1.** Install the package `@regulaforensics/vp-frontend-document-components`:
|
|
1156
|
+
```console
|
|
934
1157
|
npm i @regulaforensics/vp-frontend-document-components
|
|
935
1158
|
```
|
|
936
1159
|
|
|
937
|
-
Import `DocumentReaderProcessor`
|
|
1160
|
+
**Step 2.** Import the class `DocumentReaderProcessor` into your `.js` file.
|
|
938
1161
|
|
|
1162
|
+
Using module bundler:
|
|
939
1163
|
```javascript
|
|
940
|
-
import { DocumentReaderProcessor } from '@regulaforensics/vp-frontend-document-components';
|
|
1164
|
+
import { DocumentReaderProcessor } from '@regulaforensics/vp-frontend-document-components';
|
|
941
1165
|
```
|
|
942
1166
|
|
|
943
|
-
|
|
1167
|
+
Without module bundler:
|
|
1168
|
+
```javascript
|
|
1169
|
+
import { DocumentReaderProcessor } from '/node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
|
|
1170
|
+
```
|
|
1171
|
+
|
|
1172
|
+
**Step 3.** Add a video tag to the `.html` file, then prepare and initialize `DocumentReaderProcessor`.
|
|
944
1173
|
|
|
945
1174
|
```javascript
|
|
946
1175
|
const videoElement = document.getElementById('yourVideoElement');
|
|
947
1176
|
const processor = new DocumentReaderProcessor(videoElement);
|
|
948
1177
|
|
|
949
1178
|
try {
|
|
950
|
-
|
|
1179
|
+
// Variant 1 - for production environment
|
|
1180
|
+
await processor.initialize();
|
|
1181
|
+
|
|
1182
|
+
// Variant 2 - for test-only environment
|
|
1183
|
+
// await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
951
1184
|
|
|
952
|
-
const result = await processor.startRecognition();
|
|
1185
|
+
const result = await processor.startRecognition();
|
|
953
1186
|
|
|
954
1187
|
processor.stopRecognition();
|
|
955
1188
|
|
|
@@ -959,43 +1192,93 @@ try {
|
|
|
959
1192
|
}
|
|
960
1193
|
```
|
|
961
1194
|
|
|
962
|
-
|
|
1195
|
+
In the preceding example, the `DocumentReaderProcessor` object is created using the HTML element with the ID `yourVideoElement`.
|
|
1196
|
+
After that, `processor` needs to be initialized with the license. There are two licensing variants:
|
|
963
1197
|
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
For example:
|
|
1198
|
+
**1.** License file (for **production** environment).
|
|
967
1199
|
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
1200
|
+
Get Regula license file, put it into the specific directory, and then asynchronously call the `initialize` method without parameters:
|
|
1201
|
+
```javascript
|
|
1202
|
+
await processor.initialize();
|
|
971
1203
|
```
|
|
972
1204
|
|
|
973
|
-
|
|
1205
|
+
**2.** Base64 license string (for **test-only** environment).
|
|
974
1206
|
|
|
1207
|
+
Convert Regula license file to the Base64 string and then asynchronously call `initialize` method, replacing `BASE64_LICENSE_KEY` with your encoded string:
|
|
975
1208
|
```javascript
|
|
976
|
-
|
|
1209
|
+
await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
1210
|
+
```
|
|
977
1211
|
|
|
978
|
-
|
|
979
|
-
|
|
1212
|
+
For more information about licensing, see the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing/" target="_blank">Document Reader SDK Licensing</a> page and the
|
|
1213
|
+
<a href="https://support.regulaforensics.com/hc/en-us/articles/15378060500881-How-to-convert-a-license-file-to-BASE64-" target="_blank">How to Convert a License File to BASE64</a> FAQ article.
|
|
980
1214
|
|
|
981
|
-
|
|
982
|
-
await processor.initialize({ license: 'BASE64_LICENSE_KEY' }); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
|
|
1215
|
+
### CDN Processor Integration
|
|
983
1216
|
|
|
984
|
-
|
|
1217
|
+
**Step 1.** Connect the script to your `.html` file.
|
|
985
1218
|
|
|
986
|
-
|
|
1219
|
+
Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
|
|
987
1220
|
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
}
|
|
1221
|
+
For example:
|
|
1222
|
+
```html
|
|
1223
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
992
1224
|
```
|
|
993
1225
|
|
|
994
|
-
|
|
1226
|
+
**Note:** You can find all available script versions in the corresponding section of npm, using the same link from the previous example.
|
|
1227
|
+
|
|
1228
|
+
**Step 2.** Add a video tag to the `.html` file, then prepare and initialize `DocumentReaderProcessor`.
|
|
1229
|
+
|
|
1230
|
+
`DocumentReaderProcessor` is available in the global variable `window.Regula`. See the following example:
|
|
1231
|
+
|
|
1232
|
+
```javascript
|
|
1233
|
+
const { DocumentReaderProcessor } = window.Regula;
|
|
1234
|
+
|
|
1235
|
+
const videoElement = document.getElementById('yourVideoElement');
|
|
1236
|
+
const processor = new DocumentReaderProcessor(videoElement);
|
|
1237
|
+
|
|
1238
|
+
try {
|
|
1239
|
+
// Variant 1 - for production environment
|
|
1240
|
+
await processor.initialize();
|
|
1241
|
+
|
|
1242
|
+
// Variant 2 - for test-only environment
|
|
1243
|
+
// await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
1244
|
+
|
|
1245
|
+
const result = await processor.startRecognition(); // Result of the document recognition will be located here.
|
|
1246
|
+
|
|
1247
|
+
processor.stopRecognition();
|
|
1248
|
+
|
|
1249
|
+
console.log(result);
|
|
1250
|
+
} catch (e) {
|
|
1251
|
+
console.log(e);
|
|
1252
|
+
}
|
|
1253
|
+
```
|
|
1254
|
+
|
|
1255
|
+
In the preceding example, the `DocumentReaderProcessor` object is created using the HTML element with ID `yourVideoElement`.
|
|
1256
|
+
After that, `processor` needs to be initialized with the license. There are two licensing variants:
|
|
1257
|
+
|
|
1258
|
+
**1.** License file (for **production** environment).
|
|
1259
|
+
|
|
1260
|
+
You need to get Regula license file, put it into the specific directory, and then asynchronously call `initialize` method without parameters:
|
|
1261
|
+
```javascript
|
|
1262
|
+
await processor.initialize();
|
|
1263
|
+
```
|
|
1264
|
+
|
|
1265
|
+
**2.** Base64 license string (for **test-only** environment).
|
|
1266
|
+
|
|
1267
|
+
You need to convert Regula license file to the Base64 string and then asynchronously call `initialize` method, replacing `BASE64_LICENSE_KEY` with that encoded string:
|
|
1268
|
+
```javascript
|
|
1269
|
+
await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
1270
|
+
```
|
|
1271
|
+
|
|
1272
|
+
For more information about licensing, see the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing/" target="_blank">Document Reader SDK Licensing</a> page and the
|
|
1273
|
+
<a href="https://support.regulaforensics.com/hc/en-us/articles/15378060500881-How-to-convert-a-license-file-to-BASE64-" target="_blank">How to Convert a License File to BASE64</a> FAQ article.
|
|
1274
|
+
|
|
1275
|
+
### Processor Methods
|
|
995
1276
|
|
|
996
1277
|
#### initialize
|
|
997
1278
|
|
|
998
|
-
Initializes the
|
|
1279
|
+
Initializes the DocumentReaderProcessor object. Accepts an object with a Base64 encoded license string.
|
|
1280
|
+
|
|
1281
|
+
**Note:** Base64 license string is applied only to test environments, production mode must use the binary license file.
|
|
999
1282
|
|
|
1000
1283
|
```javascript
|
|
1001
1284
|
await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
@@ -1003,27 +1286,27 @@ await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
|
1003
1286
|
|
|
1004
1287
|
#### startRecognition
|
|
1005
1288
|
|
|
1006
|
-
|
|
1289
|
+
Launches the video stream and starts recognizing the document. Returns the result of document processing.
|
|
1007
1290
|
|
|
1008
1291
|
```javascript
|
|
1009
1292
|
const result = await processor.startRecognition();
|
|
1010
1293
|
```
|
|
1011
1294
|
|
|
1012
|
-
|
|
1295
|
+
`startRecognition` may take the callback function with the object parameter `currentPage` holding the data of the page currently being processed.
|
|
1296
|
+
The `currentpage` data fields include:
|
|
1013
1297
|
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
* @param {object} currentPage.data - Page processing result.
|
|
1018
|
-
* @param {function} currentPage.startNextPage - The method of starting the recognition of the next page.
|
|
1019
|
-
* @param {function} currentPage.finishRecognition - Finish the process and return the result.
|
|
1020
|
-
*/
|
|
1298
|
+
* `currentPage.data` object with an intermediate processing result
|
|
1299
|
+
* `currentPage.startNextPage` method for starting the next page procession
|
|
1300
|
+
* `currentPage.finishRecognition` method for completing the entire process
|
|
1021
1301
|
|
|
1302
|
+
The next example demonstrates the case, when recognition of the next page is delayed by 3 seconds (3000 ms). During this time you may ask the user to turn the document over.
|
|
1303
|
+
|
|
1304
|
+
```javascript
|
|
1022
1305
|
async function pageListener(currentPage) {
|
|
1023
1306
|
|
|
1024
1307
|
setTimeout(async () => {
|
|
1025
|
-
await currentPage.startNextPage();
|
|
1026
|
-
}, 3000);
|
|
1308
|
+
await currentPage.startNextPage();
|
|
1309
|
+
}, 3000);
|
|
1027
1310
|
}
|
|
1028
1311
|
|
|
1029
1312
|
const result = await processor.startRecognition(pageListener);
|
|
@@ -1031,7 +1314,7 @@ const result = await processor.startRecognition(pageListener);
|
|
|
1031
1314
|
|
|
1032
1315
|
#### processImage
|
|
1033
1316
|
|
|
1034
|
-
Processes
|
|
1317
|
+
Processes the image files, containing documents. Can take as a parameter a `FileList` or `Blob` array:
|
|
1035
1318
|
|
|
1036
1319
|
```javascript
|
|
1037
1320
|
const file = 'FileList or Blob array';
|
|
@@ -1039,9 +1322,11 @@ const file = 'FileList or Blob array';
|
|
|
1039
1322
|
const result = await processor.processImage(file);
|
|
1040
1323
|
```
|
|
1041
1324
|
|
|
1325
|
+
**Note:** For more information about FileList and Blob types, see the links: <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileList" target="_blank">FileList</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" target="_blank">Blob</a>.
|
|
1326
|
+
|
|
1042
1327
|
#### switchCamera
|
|
1043
1328
|
|
|
1044
|
-
|
|
1329
|
+
Switches to the next camera (in case there are several available).
|
|
1045
1330
|
|
|
1046
1331
|
```javascript
|
|
1047
1332
|
await processor.switchCamera();
|
|
@@ -1055,31 +1340,40 @@ Stops the document recognition process and ends the video stream.
|
|
|
1055
1340
|
processor.stopRecognition();
|
|
1056
1341
|
```
|
|
1057
1342
|
|
|
1058
|
-
###
|
|
1343
|
+
### Processor Parameters
|
|
1059
1344
|
|
|
1060
|
-
You can change the default settings for video streaming and document recognition.
|
|
1345
|
+
You can change the default settings for video streaming and document recognition.
|
|
1346
|
+
The settings must be set **before** the document recognition process starts.
|
|
1061
1347
|
|
|
1062
1348
|
#### streamParam
|
|
1063
1349
|
|
|
1064
|
-
|
|
1350
|
+
The video stream parameters.
|
|
1065
1351
|
|
|
1066
1352
|
```javascript
|
|
1067
1353
|
processor.streamParam = {
|
|
1068
|
-
cameraMode: 'environment',
|
|
1069
|
-
preferredCameraId: '',
|
|
1070
|
-
resolution: {
|
|
1354
|
+
cameraMode: 'environment',
|
|
1355
|
+
preferredCameraId: '',
|
|
1356
|
+
resolution: {
|
|
1071
1357
|
width: 1280,
|
|
1072
1358
|
height: 720,
|
|
1073
1359
|
},
|
|
1074
1360
|
}
|
|
1075
1361
|
```
|
|
1076
1362
|
|
|
1363
|
+
Available streaming parameters:
|
|
1364
|
+
|
|
1365
|
+
* `cameraMode`
|
|
1366
|
+
Camera facing mode. Can have values of 'environment' (by default) or 'user'.
|
|
1367
|
+
* `preferredCameraId`
|
|
1368
|
+
ID of the concrete camera to be used for the streaming. Can be extracted from `navigator.mediaDevices.enumerateDevices()`. **Not** set by default.
|
|
1369
|
+
* `resolution`
|
|
1370
|
+
Resolution of a video stream. 1280 x 720 by default.
|
|
1371
|
+
|
|
1077
1372
|
#### recognizerProcessParam
|
|
1078
1373
|
|
|
1079
|
-
|
|
1374
|
+
The parameters for recognizing a document from the camera (by the `startRecognition` method). See the following example with several parameters and their default values:
|
|
1080
1375
|
|
|
1081
1376
|
```javascript
|
|
1082
|
-
// Default settings:
|
|
1083
1377
|
processor.recognizerProcessParam = {
|
|
1084
1378
|
processParam: {
|
|
1085
1379
|
scenario: 'MrzAndLocate',
|
|
@@ -1088,11 +1382,13 @@ processor.recognizerProcessParam = {
|
|
|
1088
1382
|
},
|
|
1089
1383
|
};
|
|
1090
1384
|
```
|
|
1091
|
-
|
|
1385
|
+
|
|
1386
|
+
For more information, see the list of all available <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-service/development/usage/params/" target="_blank">document processing params</a>.
|
|
1092
1387
|
|
|
1093
1388
|
#### imageProcessParam
|
|
1094
1389
|
|
|
1095
|
-
|
|
1390
|
+
The settings for recognizing an image as a document file (by `processImage` method).
|
|
1391
|
+
See the following example with several parameters and their default values:
|
|
1096
1392
|
|
|
1097
1393
|
```javascript
|
|
1098
1394
|
// Default settings:
|
|
@@ -1105,76 +1401,283 @@ processor.imageProcessParam = {
|
|
|
1105
1401
|
}
|
|
1106
1402
|
```
|
|
1107
1403
|
|
|
1108
|
-
|
|
1404
|
+
For more information, see the list of all available <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-service/development/usage/params/" target="_blank">document processing params</a>.
|
|
1109
1405
|
|
|
1110
1406
|
#### recognizeListener
|
|
1111
1407
|
|
|
1112
|
-
|
|
1408
|
+
The callback function that takes as a parameter the processing result for each frame (`response`).
|
|
1409
|
+
See the following example, where the processing result for each frame is logged to the console:
|
|
1113
1410
|
|
|
1114
1411
|
```javascript
|
|
1115
|
-
/**
|
|
1116
|
-
* @param {object} response - The result of processing each frame.
|
|
1117
|
-
*/
|
|
1118
|
-
|
|
1119
1412
|
function listener(response) {
|
|
1120
1413
|
console.log(response);
|
|
1121
1414
|
}
|
|
1122
1415
|
|
|
1123
|
-
processor.recognizeListener = listener;
|
|
1416
|
+
processor.recognizeListener = listener;
|
|
1124
1417
|
```
|
|
1125
1418
|
|
|
1419
|
+
**Note:** The listener for image recognizer is **not** set by default.
|
|
1420
|
+
|
|
1126
1421
|
#### videoElement
|
|
1127
1422
|
|
|
1128
|
-
|
|
1423
|
+
The HTML element to display the video stream from the camera.
|
|
1424
|
+
This setting changes the video element that was defined during processor object construction `new DocumentReaderProcessor(videoElement)`.
|
|
1425
|
+
See the example:
|
|
1129
1426
|
|
|
1130
1427
|
```javascript
|
|
1131
1428
|
const videoElement = document.getElementById('HTMLVideoElement');
|
|
1132
1429
|
|
|
1133
|
-
processor.videoElement = videoElement; //
|
|
1430
|
+
processor.videoElement = videoElement; // null by default
|
|
1134
1431
|
```
|
|
1135
1432
|
|
|
1433
|
+
By default, `processor.videoElement` has `null` value.
|
|
1434
|
+
|
|
1136
1435
|
#### isInitialized
|
|
1137
1436
|
|
|
1138
|
-
Read-only property.
|
|
1437
|
+
Read-only property. `true` if the processor has been initialized.
|
|
1139
1438
|
|
|
1140
1439
|
```javascript
|
|
1141
|
-
processor.isInitialized;
|
|
1440
|
+
processor.isInitialized;
|
|
1142
1441
|
```
|
|
1143
1442
|
|
|
1144
1443
|
#### isProcessing
|
|
1145
1444
|
|
|
1146
|
-
Read-only property.
|
|
1445
|
+
Read-only property. `true` if document recognition is still in progress.
|
|
1147
1446
|
|
|
1148
1447
|
```javascript
|
|
1149
|
-
processor.isProcessing;
|
|
1448
|
+
processor.isProcessing;
|
|
1150
1449
|
```
|
|
1151
1450
|
|
|
1152
|
-
##
|
|
1451
|
+
## Document Reader Controller
|
|
1452
|
+
|
|
1453
|
+
DocumentReaderController serves as a proxy, delegating the entire processing to external Document Reader Web Service.
|
|
1454
|
+
The `document-reader-device` component is created on its basis.
|
|
1153
1455
|
|
|
1154
|
-
|
|
1456
|
+
### npm Controller Integration
|
|
1155
1457
|
|
|
1156
|
-
|
|
1458
|
+
**Step 1.** Install the package `@regulaforensics/vp-frontend-document-components`
|
|
1157
1459
|
|
|
1158
|
-
|
|
1460
|
+
```console
|
|
1461
|
+
npm i @regulaforensics/vp-frontend-document-components
|
|
1462
|
+
```
|
|
1159
1463
|
|
|
1160
|
-
|
|
1464
|
+
**Step 2.** Import the class `DocumentReaderController` into your `.js` file.
|
|
1161
1465
|
|
|
1466
|
+
Using module bundler:
|
|
1162
1467
|
```javascript
|
|
1163
|
-
|
|
1164
|
-
window.RegulaDocumentSDK.workerPath = 'https://my-wasm-and-worker-files.com';
|
|
1468
|
+
import { DocumentReaderController } from '@regulaforensics/vp-frontend-document-components';
|
|
1165
1469
|
```
|
|
1166
1470
|
|
|
1167
|
-
|
|
1471
|
+
Without module bundler:
|
|
1472
|
+
```javascript
|
|
1473
|
+
import { DocumentReaderController } from '/node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
|
|
1474
|
+
```
|
|
1168
1475
|
|
|
1476
|
+
**Step 3.** Set the Document Reader Web Service URL and initialize the service:
|
|
1169
1477
|
```javascript
|
|
1170
|
-
const
|
|
1478
|
+
const service = new DocumentReaderController();
|
|
1479
|
+
|
|
1480
|
+
service.serviceUrl = 'SERVICE_URL';
|
|
1481
|
+
|
|
1482
|
+
await service.initRegulaReader();
|
|
1483
|
+
```
|
|
1484
|
+
|
|
1485
|
+
In the previous code fragment you need to replace `SERVICE_URL` placeholder with your actual service URL.
|
|
1486
|
+
|
|
1487
|
+
To get the processing results, you need to subscribe to the `OnProcessingFinished` event and use `getLastResults` method:
|
|
1488
|
+
|
|
1489
|
+
```javascript
|
|
1490
|
+
const responseListener = async () => {
|
|
1491
|
+
const response = await service.getLastResults();
|
|
1492
|
+
console.log(response);
|
|
1493
|
+
};
|
|
1494
|
+
|
|
1495
|
+
service.hubProxy?.on('OnProcessingFinished', responseListener);
|
|
1496
|
+
```
|
|
1497
|
+
|
|
1498
|
+
### CDN Controller Integration
|
|
1499
|
+
|
|
1500
|
+
**Step 1.** Connect the script to your `.html` file.
|
|
1501
|
+
|
|
1502
|
+
Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
|
|
1503
|
+
|
|
1504
|
+
For example:
|
|
1505
|
+
```html
|
|
1506
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
1507
|
+
```
|
|
1508
|
+
|
|
1509
|
+
**Note:** You can find all available script versions in corresponding section of npm, using the same link from the previous example.
|
|
1510
|
+
|
|
1511
|
+
**Step 2.** Set the Document Reader Web Service URL and initialize the service.
|
|
1512
|
+
|
|
1513
|
+
`DocumentReaderController` is available in the global variable `window.Regula`.
|
|
1514
|
+
See the following code snippet with example of `DocumentReaderController` initialization.
|
|
1515
|
+
|
|
1516
|
+
```javascript
|
|
1517
|
+
const { DocumentReaderController } = window.Regula;
|
|
1518
|
+
|
|
1519
|
+
const service = new DocumentReaderController();
|
|
1520
|
+
|
|
1521
|
+
service.serviceUrl = 'SERVICE_URL';
|
|
1522
|
+
|
|
1523
|
+
await service.initRegulaReader();
|
|
1524
|
+
```
|
|
1525
|
+
|
|
1526
|
+
To get the processing results, you need to subscribe to the `OnProcessingFinished` event and use `getLastResults` method:
|
|
1527
|
+
|
|
1528
|
+
```javascript
|
|
1529
|
+
const responseListener = async () => {
|
|
1530
|
+
const response = await service.getLastResults();
|
|
1531
|
+
console.log(response);
|
|
1532
|
+
};
|
|
1533
|
+
|
|
1534
|
+
service.hubProxy?.on('OnProcessingFinished', responseListener);
|
|
1535
|
+
```
|
|
1536
|
+
|
|
1537
|
+
### Controller Methods
|
|
1538
|
+
|
|
1539
|
+
#### initRegulaReader
|
|
1540
|
+
|
|
1541
|
+
Initializes the controller.
|
|
1542
|
+
|
|
1543
|
+
```javascript
|
|
1544
|
+
await service.initRegulaReader();
|
|
1545
|
+
```
|
|
1546
|
+
|
|
1547
|
+
#### getLastResults
|
|
1548
|
+
|
|
1549
|
+
Returns the last processing result.
|
|
1550
|
+
|
|
1551
|
+
```javascript
|
|
1552
|
+
const response = await service.getLastResults();
|
|
1553
|
+
```
|
|
1171
1554
|
|
|
1172
|
-
|
|
1555
|
+
#### getImages
|
|
1556
|
+
|
|
1557
|
+
Starts processing document manually.
|
|
1558
|
+
|
|
1559
|
+
```javascript
|
|
1560
|
+
await service.getImages();
|
|
1561
|
+
```
|
|
1562
|
+
|
|
1563
|
+
#### setProperty
|
|
1564
|
+
|
|
1565
|
+
Sets one specific device's property.
|
|
1566
|
+
|
|
1567
|
+
```javascript
|
|
1568
|
+
await service.setProperty('AutoScan', false);
|
|
1569
|
+
```
|
|
1570
|
+
|
|
1571
|
+
#### getProperty
|
|
1572
|
+
|
|
1573
|
+
Gets one specific device's property.
|
|
1574
|
+
|
|
1575
|
+
```javascript
|
|
1576
|
+
const property = await service.getProperty('AutoScan');
|
|
1577
|
+
```
|
|
1578
|
+
|
|
1579
|
+
#### getAvailableDevices(index)
|
|
1580
|
+
|
|
1581
|
+
Returns device name specified by `index` argument from the list of available devices.
|
|
1582
|
+
|
|
1583
|
+
```javascript
|
|
1584
|
+
const device = await service.getAvailableDevices(0);
|
|
1585
|
+
```
|
|
1586
|
+
|
|
1587
|
+
#### clearResults
|
|
1588
|
+
|
|
1589
|
+
Clears all previous scanning results.
|
|
1590
|
+
|
|
1591
|
+
```javascript
|
|
1592
|
+
await service.clearResults();
|
|
1593
|
+
```
|
|
1594
|
+
|
|
1595
|
+
#### healthCheck
|
|
1596
|
+
|
|
1597
|
+
Returns the device status.
|
|
1598
|
+
|
|
1599
|
+
```javascript
|
|
1600
|
+
const status = await service.healthCheck();
|
|
1601
|
+
```
|
|
1602
|
+
|
|
1603
|
+
#### disconnect
|
|
1604
|
+
|
|
1605
|
+
Disconnects from the service.
|
|
1606
|
+
|
|
1607
|
+
```javascript
|
|
1608
|
+
service.disconnect();
|
|
1609
|
+
```
|
|
1610
|
+
|
|
1611
|
+
### Controller Parameters
|
|
1612
|
+
|
|
1613
|
+
#### isInitialized
|
|
1614
|
+
|
|
1615
|
+
Read-only property. true` if the controller has been initialized.
|
|
1616
|
+
|
|
1617
|
+
```javascript
|
|
1618
|
+
service.isInitialized;
|
|
1619
|
+
```
|
|
1620
|
+
|
|
1621
|
+
#### serviceUrl
|
|
1622
|
+
|
|
1623
|
+
The Document Reader Web Service URL.
|
|
1624
|
+
|
|
1625
|
+
```javascript
|
|
1626
|
+
service.serviceUrl = 'https://service.com';
|
|
1627
|
+
```
|
|
1628
|
+
|
|
1629
|
+
#### hubProxy
|
|
1630
|
+
|
|
1631
|
+
The object for setting/unsetting Sets event listeners.
|
|
1632
|
+
|
|
1633
|
+
Example of subscribing to events:
|
|
1634
|
+
|
|
1635
|
+
```javascript
|
|
1636
|
+
const onStartListener = () => console.log('Process started');
|
|
1637
|
+
const onFinishListener = () => console.log('Process finished');
|
|
1638
|
+
|
|
1639
|
+
service.hubProxy?.on('OnProcessingStarted', onStartListener);
|
|
1640
|
+
service.hubProxy?.on('OnProcessingFinished', onFinishListener);
|
|
1641
|
+
```
|
|
1642
|
+
|
|
1643
|
+
Example of unsubscribing from events:
|
|
1644
|
+
|
|
1645
|
+
```javascript
|
|
1646
|
+
const onStartListener = () => console.log('Process started');
|
|
1647
|
+
const onFinishListener = () => console.log('Process finished');
|
|
1648
|
+
|
|
1649
|
+
service.hubProxy?.off('OnProcessingStarted', onStartListener);
|
|
1650
|
+
service.hubProxy?.off('OnProcessingFinished', onFinishListener);
|
|
1173
1651
|
```
|
|
1174
1652
|
|
|
1175
|
-
|
|
1653
|
+
## Package Resources
|
|
1654
|
+
|
|
1655
|
+
Document reader requires WASM (`ProcMgr.wasm`, `ProcMgr.data`) and worker (`ProcMgr.worker.js`) files to work.
|
|
1656
|
+
By default, these files are downloaded from Regula servers, but you can set your own source.
|
|
1657
|
+
|
|
1658
|
+
**1.** To download these files from our server to local machine, you can get the link in the `window.RegulaDocumentSDK.workerPath` field.
|
|
1659
|
+
|
|
1660
|
+
**2.** Then, in the `ProcMgr.worker.js` file, use the search to find `https://wasm.regulaforensics.com` and replace the full link with your custom URL.
|
|
1661
|
+
Upload all three files (`ProcMgr.worker.js`, `ProcMgr.wasm`, `ProcMgr.data`) to the location you specified. Also, change the address in `windows.RegulaDocumentSDK`.
|
|
1176
1662
|
|
|
1177
|
-
|
|
1663
|
+
For Predefined UI Components:
|
|
1664
|
+
|
|
1665
|
+
```javascript
|
|
1666
|
+
window.RegulaDocumentSDK.workerPath = 'https://custom-wasm-and-worker-files-path.com';
|
|
1667
|
+
```
|
|
1668
|
+
|
|
1669
|
+
For Document Reader Processor:
|
|
1670
|
+
|
|
1671
|
+
```javascript
|
|
1672
|
+
const processor = new DocumentReaderProcessor(videoElement);
|
|
1673
|
+
processor.workerPath = 'https://custom-wasm-and-worker-files-path.com';
|
|
1674
|
+
```
|
|
1675
|
+
|
|
1676
|
+
In the given examples, change the `workerPath` parameter value to your custom source URL.
|
|
1677
|
+
|
|
1678
|
+
**Attention!** The files must be located in the same directory and have the same names as were previously specified.
|
|
1679
|
+
|
|
1680
|
+
## Potential Problems
|
|
1178
1681
|
|
|
1179
1682
|
UI components and SDK use the `getUserMedia` method to display the video stream from the camera. This feature is available only in secure contexts (HTTPS).
|
|
1180
1683
|
|
|
@@ -1182,17 +1685,32 @@ UI components and SDK use the `getUserMedia` method to display the video stream
|
|
|
1182
1685
|
|
|
1183
1686
|
You can see the examples of using the components on the [Samples page](https://github.com/regulaforensics/document-web-components-samples).
|
|
1184
1687
|
|
|
1185
|
-
## Additional
|
|
1688
|
+
## Additional Resources
|
|
1186
1689
|
|
|
1187
|
-
The Document Reader
|
|
1690
|
+
The Document Reader web components are also available on <a href="https://storybook-document.regulaforensics.com" target="_blank">Storybook</a>.
|
|
1188
1691
|
|
|
1189
1692
|
## FAQ
|
|
1190
1693
|
|
|
1191
1694
|
### How do I collect logs?
|
|
1192
1695
|
|
|
1193
|
-
Logging can be helpful when you run into any issues.
|
|
1696
|
+
Logging can be helpful when you run into any issues.
|
|
1697
|
+
Logs contain information about how you use our products. That data helps Regula stuff to analyze and troubleshoot the cases you may experience.
|
|
1698
|
+
|
|
1699
|
+
To initiate the process of logs collecting:
|
|
1194
1700
|
|
|
1195
|
-
1
|
|
1701
|
+
**1.** Open the Developer menu in your browser.
|
|
1702
|
+
|
|
1703
|
+
**2.** Go to the Console tab.
|
|
1704
|
+
|
|
1705
|
+
**3.** In Console, enter the following line:
|
|
1706
|
+
|
|
1707
|
+
```console
|
|
1708
|
+
localStorage.logger = 'main,wasm>console'
|
|
1709
|
+
```
|
|
1710
|
+
|
|
1711
|
+
**4.** Reload the page.
|
|
1712
|
+
|
|
1713
|
+
**5.** Add the `log` setting to the `processParam`:
|
|
1196
1714
|
|
|
1197
1715
|
```json
|
|
1198
1716
|
{
|
|
@@ -1202,16 +1720,4 @@ Logging can be helpful when you run into any issues. They contain information on
|
|
|
1202
1720
|
}
|
|
1203
1721
|
```
|
|
1204
1722
|
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
3\. Go to the Console tab.
|
|
1208
|
-
|
|
1209
|
-
4\. In Console, enter the following line:
|
|
1210
|
-
|
|
1211
|
-
```
|
|
1212
|
-
localStorage.logger = 'main,wasm>console'
|
|
1213
|
-
```
|
|
1214
|
-
|
|
1215
|
-
5\. Reload the page.
|
|
1216
|
-
|
|
1217
|
-
6\. Start processing. Logs will display in Console.
|
|
1723
|
+
**6.** Start image processing. Logs will be displayed in Console.
|