@regulaforensics/vp-frontend-document-components 7.5.2002-nightly → 7.5.2003-nightly
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 +67 -1597
- package/dist/main.iife.js +2 -2
- package/dist/main.js +4 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,73 +1,30 @@
|
|
|
1
|
-
# Document Reader Web Components
|
|
1
|
+
# Regula Document Reader SDK Web Components
|
|
2
2
|
|
|
3
|
-
* [
|
|
4
|
-
* [
|
|
5
|
-
* [
|
|
6
|
-
* [
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
* [Service Parameters](#service-parameters)
|
|
10
|
-
* [Parameters Description](#parameters-description)
|
|
11
|
-
* [Events](#events)
|
|
12
|
-
* [Action Types](#action-types)
|
|
13
|
-
* [Action Data](#action-data)
|
|
14
|
-
* [Remote action data](#remote-action-data)
|
|
15
|
-
* [Action Statuses](#action-statuses)
|
|
16
|
-
* [Action Failure Reasons](#action-failure-reasons)
|
|
17
|
-
* [Event Generation Logic](#event-generation-logic)
|
|
18
|
-
* [Event Response](#event-response)
|
|
19
|
-
* [Settings and Attributes](#settings-and-attributes)
|
|
20
|
-
* [Backend reprocessing](#backend-reprocessing)
|
|
21
|
-
* [Delegating scan to device with better camera](#delegating-scan-to-device-with-better-camera)
|
|
22
|
-
* [Appearance Customization](#appearance-customization)
|
|
23
|
-
* [Font and Colors](#font-and-colors)
|
|
24
|
-
* [Inserting component in Flex and Grid layouts](#inserting-component-in-flex-and-grid-layouts)
|
|
25
|
-
* [Localized Messages](#localized-messages)
|
|
26
|
-
* [Document Reader Processor](#document-reader-processor)
|
|
27
|
-
* [npm Processor Integration](#npm-processor-integration)
|
|
28
|
-
* [CDN Processor Integration](#cdn-processor-integration)
|
|
29
|
-
* [Processor Methods](#processor-methods)
|
|
30
|
-
* [Processor Parameters](#processor-parameters)
|
|
31
|
-
* [Package Resources](#package-resources)
|
|
32
|
-
* [Potential Problems](#potential-problems)
|
|
33
|
-
* [Examples](#examples)
|
|
34
|
-
* [Additional Resources](#additional-resources)
|
|
35
|
-
* [FAQ](#faq)
|
|
36
|
-
* [How do I collect logs?](#how-do-i-collect-logs)
|
|
3
|
+
* [How to Install](#how-to-install)
|
|
4
|
+
* [Documentation](#documentation)
|
|
5
|
+
* [Demo Application](#demo-application)
|
|
6
|
+
* [Sample Projects](#sample-projects)
|
|
7
|
+
* [Technical Support](#technical-support)
|
|
8
|
+
* [Business Enquiries](#business-enquiries)
|
|
37
9
|
|
|
38
|
-
|
|
10
|
+
## How to Install
|
|
39
11
|
|
|
40
|
-
|
|
12
|
+
Document Reader Web Components package contains a number of predefined and configurable components, as described in the table below.
|
|
41
13
|
|
|
42
|
-
|
|
14
|
+
| Component | Description |
|
|
15
|
+
|-------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
16
|
+
| <span style="white-space: nowrap">[Smart capture](#smart-capture-component)</span> <br/>(`document-reader`) | Recommended component for most cases, as it is easy to integrate yet flexibly configurable.<br/> <ul><li>Takes photo by the device's camera **automatically**, when the document is presented in the frame in focus.</li> <li>Can take photo **manually** by using dedicated capture button.</li> <li>Provides predefined UI and behavior.</li> <li>Have wide range of configurable parameters.</li><ul> |
|
|
17
|
+
| [Snapshot](#snapshot-component) <br/> <span style="white-space: nowrap">(`camera-snapshot`)</span> | <ul><li>Can take photo **manually** by using dedicated capture button.</li><li>Provides predefined UI and behavior.</li><li>Have wide range of configurable parameters.</li></ul> |
|
|
18
|
+
| <a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/advanced/">Advanced</a> | <ul><li>Can handle the extended range of the document recognition tasks.</li><li>Provides the most advanced configuration capabilities.</li><li>Has no predefined graphical interface, leaving UI implementation to you.</li></ul> |
|
|
43
19
|
|
|
44
|
-
|
|
45
|
-
* Process an uploaded image
|
|
46
|
-
* Crop the image by document boundaries
|
|
47
|
-
* Detect the presence of a machine-readable zone (MRZ), recognize it, and parse into text text fields
|
|
48
|
-
* Read barcodes, and parse them into text fields
|
|
20
|
+
### Before You Start
|
|
49
21
|
|
|
50
|
-
|
|
22
|
+
* Never keep the license in production environment. On production environments, the <a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing/#domain-name-licensing">domain name licensing</a> must be used. Using the explicit license in the source code of your project is applicable only in development and for testing.
|
|
23
|
+
* Using HTTPS protocol is a must. Document Reader Web Components use the `getUserMedia` method to display the video stream from the camera—this feature is available only in secure contexts.
|
|
24
|
+
* The Web 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.
|
|
25
|
+
* Only the modern browser versions are supported, see the [compatibility](#compatibility) section. Polyfills are not included in the package by default.
|
|
51
26
|
|
|
52
|
-
|
|
53
|
-
Document Reader UI Web Components with predefined view and behavior are designed for the fast integration of document recognition functionality into your project.
|
|
54
|
-
You can still customize most of the appearance and processing parameters before the launch if needed.
|
|
55
|
-
Examples of the UI Web Components are `document-reader` for documents recognition, `camera-snapshot` for capturing images from a camera or uploading from a gallery.
|
|
56
|
-
* [Processor](#document-reader-processor)
|
|
57
|
-
Document Reader Processor manages the document image recognition and other related operations, leaving implementation of UI to you.
|
|
58
|
-
|
|
59
|
-
Current document acts as a quick start guide for operating Document Reader Web Components and as a reference to their main processing parameters.
|
|
60
|
-
|
|
61
|
-
## Before You Start
|
|
62
|
-
|
|
63
|
-
Important notes:
|
|
64
|
-
|
|
65
|
-
* **Never** keep the license in **production** environment. On production environments, the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">domain name licensing</a> method must be used. Using the license in the source code of your project is applicable only in development and for testing.
|
|
66
|
-
* Document Reader Web Components and their methods strictly require the secure contexts, so using **HTTPS** protocol is a must.
|
|
67
|
-
* 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.
|
|
68
|
-
* Only the modern browser versions are supported, see [compatibility](#compatibility). **Polyfills** are not included in the package by default.
|
|
69
|
-
|
|
70
|
-
## Compatibility
|
|
27
|
+
### Compatibility
|
|
71
28
|
|
|
72
29
|
| Devices |  |  |  |
|
|
73
30
|
|:---------------------|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|
|
|
@@ -78,109 +35,52 @@ Important notes:
|
|
|
78
35
|
To support the older browser versions in your project, install the required polyfill packages manually.
|
|
79
36
|
Follow the link to npm package <a href="https://www.npmjs.com/package/@webcomponents/webcomponentsjs" target="_blank">@webcomponents/webcomponentsjs</a> for installation details.
|
|
80
37
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
### npm Service Integration
|
|
38
|
+
### Step 1: Install Library
|
|
84
39
|
|
|
85
|
-
|
|
40
|
+
* [npm](#npm)
|
|
41
|
+
* [CDN](#cdn)
|
|
86
42
|
|
|
87
|
-
|
|
88
|
-
npm i @regulaforensics/vp-frontend-document-components
|
|
89
|
-
```
|
|
43
|
+
#### npm
|
|
90
44
|
|
|
91
|
-
|
|
45
|
+
1\. Install the package <a href="https://www.npmjs.com/package/@regulaforensics/vp-frontend-document-components" target="_blank">vp-frontend-document-components</a>:
|
|
92
46
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-frontend-document-components';
|
|
96
|
-
```
|
|
97
|
-
Without module bundler:
|
|
98
|
-
```javascript
|
|
99
|
-
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';
|
|
47
|
+
```bash
|
|
48
|
+
npm i @regulaforensics/vp-frontend-document-components
|
|
100
49
|
```
|
|
101
50
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
If you need only the `camera-snapshot` component, call the `defineComponents()` method without arguments:
|
|
105
|
-
```javascript
|
|
106
|
-
defineComponents();
|
|
107
|
-
```
|
|
51
|
+
2\. Import the function `defineComponents` and the class `DocumentReaderService` into your `.js` file:
|
|
108
52
|
|
|
109
|
-
|
|
53
|
+
* With module bundler:
|
|
110
54
|
|
|
111
|
-
**1.** Add `DocumentReaderService` to the global variable `RegulaDocumentSDK` and set processing scenario:
|
|
112
55
|
```javascript
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
116
|
-
processParam: {
|
|
117
|
-
scenario: 'MrzAndLocate',
|
|
118
|
-
},
|
|
119
|
-
};
|
|
120
|
-
window.RegulaDocumentSDK.imageProcessParam = {
|
|
121
|
-
processParam: {
|
|
122
|
-
scenario: 'MrzAndLocate',
|
|
123
|
-
},
|
|
124
|
-
};
|
|
56
|
+
import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-frontend-document-components';
|
|
125
57
|
```
|
|
126
|
-
**2.** Define the components and initialize the service:
|
|
127
58
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
```javascript
|
|
131
|
-
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
On **test environment** (with generated Base64 license string):
|
|
59
|
+
* Without module bundler:
|
|
135
60
|
|
|
136
61
|
```javascript
|
|
137
|
-
defineComponents
|
|
62
|
+
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';
|
|
138
63
|
```
|
|
139
64
|
|
|
140
|
-
|
|
141
|
-
<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.
|
|
65
|
+
#### CDN
|
|
142
66
|
|
|
143
|
-
|
|
67
|
+
Connect the script to your `.html` file. Use a CDN link in the following format: `unpkg.com/:package@:version/:file`.
|
|
144
68
|
|
|
145
69
|
For example:
|
|
146
70
|
|
|
147
|
-
`document-reader` is used for the document recognition with defined parameters:
|
|
148
|
-
```html
|
|
149
|
-
<document-reader></document-reader>
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
`camera-snapshot` is used to capture images from the device's camera and to import from the gallery:
|
|
153
|
-
```html
|
|
154
|
-
<camera-snapshot></camera-snapshot>
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
### CDN Service Integration
|
|
158
|
-
|
|
159
|
-
**Step 1.** Connect the script to your `.html` file.
|
|
160
|
-
|
|
161
|
-
Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
|
|
162
|
-
|
|
163
|
-
For example:
|
|
164
71
|
```html
|
|
165
72
|
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.iife.js"></script>
|
|
166
73
|
```
|
|
167
74
|
|
|
168
|
-
|
|
75
|
+
### Step 2: Add Component
|
|
169
76
|
|
|
170
|
-
|
|
77
|
+
* [Smart capture](#smart-capture-component)
|
|
78
|
+
* [Snapshot](#snapshot-component)
|
|
171
79
|
|
|
172
|
-
|
|
173
|
-
```javascript
|
|
174
|
-
defineComponents();
|
|
175
|
-
```
|
|
80
|
+
#### Smart Capture Component
|
|
176
81
|
|
|
177
|
-
|
|
82
|
+
1\. Add `DocumentReaderService` to the global variable `RegulaDocumentSDK` and set a <a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/getting-started/scenarios/">processing scenario</a>:
|
|
178
83
|
|
|
179
|
-
**1.** Access `DocumentReaderService` and `defineComponents` via the global variable `window.Regula`:
|
|
180
|
-
```javascript
|
|
181
|
-
const { defineComponents, DocumentReaderService } = window.Regula;
|
|
182
|
-
```
|
|
183
|
-
**2.** Add `DocumentReaderService` to the global variable `RegulaDocumentSDK` and set processing scenario:
|
|
184
84
|
```javascript
|
|
185
85
|
window.RegulaDocumentSDK = new DocumentReaderService();
|
|
186
86
|
|
|
@@ -195,1496 +95,66 @@ window.RegulaDocumentSDK.imageProcessParam = {
|
|
|
195
95
|
},
|
|
196
96
|
};
|
|
197
97
|
```
|
|
198
|
-
**3.** Define the components and initialize the service.
|
|
199
|
-
|
|
200
|
-
On **production environment** (the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">domain name licensing</a> is used):
|
|
201
|
-
```javascript
|
|
202
|
-
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
On **test environment** (with generated Base64 license string):
|
|
206
|
-
```javascript
|
|
207
|
-
defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'BASE64_LICENSE_KEY' }));
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
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
|
|
211
|
-
<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.
|
|
212
|
-
|
|
213
|
-
### Service Parameters
|
|
214
|
-
|
|
215
|
-
After adding `DocumentReaderService` to the global variable, you can change the default document recognition and image processing settings as follows:
|
|
216
|
-
|
|
217
|
-
**Image recognition** (video capture) default settings. The functionality is available via the camera button.
|
|
218
|
-
```javascript
|
|
219
|
-
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
220
|
-
processParam: {
|
|
221
|
-
returnUncroppedImage: true,
|
|
222
|
-
multipageProcessing: false,
|
|
223
|
-
returnPackageForReprocess: false,
|
|
224
|
-
timeout: 20000,
|
|
225
|
-
resultTypeOutput: [],
|
|
226
|
-
imageQa: {
|
|
227
|
-
expectedPass: ['dpiThreshold', 'glaresCheck', 'focusCheck'],
|
|
228
|
-
dpiThreshold: 130,
|
|
229
|
-
glaresCheck: true,
|
|
230
|
-
glaresCheckParams: {
|
|
231
|
-
imgMarginPart: 0.05,
|
|
232
|
-
maxGlaringPart: 0.01,
|
|
233
|
-
},
|
|
234
|
-
},
|
|
235
|
-
},
|
|
236
|
-
};
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
**Session ID** for video processing:
|
|
240
|
-
```javascript
|
|
241
|
-
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
242
|
-
tag: 'your session id',
|
|
243
|
-
};
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
**Image processing** default settings. The functionality is available via the gallery button.
|
|
247
|
-
```javascript
|
|
248
|
-
window.RegulaDocumentSDK.imageProcessParam = {
|
|
249
|
-
processParam: {
|
|
250
|
-
returnUncroppedImage: true,
|
|
251
|
-
returnPackageForReprocess: false,
|
|
252
|
-
},
|
|
253
|
-
};
|
|
254
|
-
```
|
|
255
|
-
|
|
256
|
-
**Session ID** for image processing:
|
|
257
|
-
```javascript
|
|
258
|
-
window.RegulaDocumentSDK.imageProcessParam = {
|
|
259
|
-
tag: 'your session id',
|
|
260
|
-
};
|
|
261
|
-
```
|
|
262
|
-
|
|
263
|
-
#### Parameters Description
|
|
264
|
-
|
|
265
|
-
| Setting | Info | Data type | Default value | Values |
|
|
266
|
-
|:-------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
267
|
-
| **returnUncroppedImage** | When enabled, returns input images in output. | boolean | `true` | `true`, `false` |
|
|
268
|
-
| **scenario** | Recognition scenario. | string | 'MrzAndLocate' | 'MrzAndLocate', 'MrzOrLocate', 'Mrz', 'Locate' |
|
|
269
|
-
| **multipageProcessing** | Whether to enable multi-page document processing mode. | boolean | `true` | `true`, `false` |
|
|
270
|
-
| **timeout** | Recognition timeout in milliseconds. After this time process will be finished. | number | 2000 | numbers > 0 |
|
|
271
|
-
| **timeoutFromFirstDetect** | Start the countdown from the moment the document is detected. | number | 5000 | numbers > 0 |
|
|
272
|
-
| **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 |
|
|
273
|
-
| **returnPackageForReprocess** | When enabled, returns the package for reprocessing on the backend. | boolean | `false` | `true`, `false` |
|
|
274
|
-
| **imageQa** | When enabled, image quality checks status affects document optical and overall status. | | | |
|
|
275
|
-
| **expectedPass** | Activated image quality checks. | string[] | ['dpiThreshold', 'glaresCheck', 'focusCheck'] | 'dpiThreshold', 'glaresCheck', 'focusCheck' |
|
|
276
|
-
| **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 |
|
|
277
|
-
| **glaresCheck** | This option enables glares check while performing image quality validation. | boolean | `true` | `true`, `false` |
|
|
278
|
-
| **glaresCheckParams** | Settings for glare check. | | | |
|
|
279
|
-
| **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 |
|
|
280
|
-
| **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 |
|
|
281
|
-
| **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' |
|
|
282
|
-
| **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 |
|
|
283
|
-
| **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 |
|
|
284
|
-
| **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` |
|
|
285
|
-
| **customParams** | This option allows passing custom processing parameters that can be implemented in future without changing API. | Object | {} | |
|
|
286
|
-
| **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` |
|
|
287
|
-
| **updateOCRValidityByGlare** | When enabled, fail OCR field validity, if there is a glare over the text field on the image. | boolean | `false` | `true`, `false` |
|
|
288
|
-
| **returnCroppedBarcode** | When enabled, returns cropped barcode images for unknown documents. | boolean | `false` | `true`, `false` |
|
|
289
|
-
| **respectImageQuality** | When enabled, image quality checks status affects document optical and overall status. | boolean | `false` | `true`, `false` |
|
|
290
|
-
| **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... |
|
|
291
|
-
| **noGraphics** | When enabled, no graphic fields will be cropped from document image. | boolean | `false` | `true`, `false` |
|
|
292
|
-
| **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 |
|
|
293
|
-
| **depersonalizeLog** | When enabled, all personal data will be forcibly removed from the logs. | boolean | `false` | `true`, `false` |
|
|
294
|
-
| **multiDocOnImage** | This option allows locating and cropping multiple documents from one image if enabled. | boolean | `false` | `true`, `false` |
|
|
295
|
-
| **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 |
|
|
296
|
-
| **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 |
|
|
297
|
-
| **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 |
|
|
298
|
-
| **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` |
|
|
299
|
-
| **parseBarcodes** | This option can be disabled to stop parsing after barcode is read. | boolean | `true` | `true`, `false` |
|
|
300
|
-
| **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` |
|
|
301
|
-
| **backendProcessing** | When enabled, it prepares the processing result to be sent to the backend for re-processing. Use ```service.finalizePackage();``` after receiving the processing results to send them to the backend. | Object | {} | { serviceURL: 'URL', httpHeaders: { key1: 'header1', key2: 'header2', ... } } |
|
|
302
|
-
| **generateNumericCodes** | This parameter is used to generate numeric representation for issuing state and nationality codes. | boolean | | `true`, `false` |
|
|
303
|
-
| **doublePageSpread** | Enable this option if the image you provide contains double page spread of the passport and you want to process both pages in one go. | boolean | `false` | `true`, `false` |
|
|
304
|
-
|
|
305
|
-
**Attention!** If the `multipage-processing` or `internal-scenario` attributes are set, the corresponding `multipageProcessing` and `scenario` parameters' values are ignored.
|
|
306
|
-
|
|
307
|
-
### Events
|
|
308
|
-
|
|
309
|
-
The main idea of a subscription to different events is to detect the specific state changes of the concrete component.
|
|
310
|
-
For the convenience, the event has the same name as the component that it belongs to.
|
|
311
|
-
|
|
312
|
-
For example, the next code snippet adds the event listeners to `document-reader` and `camera-snapshot` components:
|
|
313
|
-
|
|
314
|
-
```javascript
|
|
315
|
-
const documentReaderComponent = document.querySelector('document-reader');
|
|
316
|
-
const cameraSnapshotComponent = document.querySelector('camera-snapshot');
|
|
317
|
-
|
|
318
|
-
documentReaderComponent.addEventListener('document-reader', (event) => console.log(event.detail));
|
|
319
|
-
cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.log(event.detail));
|
|
320
|
-
```
|
|
321
|
-
|
|
322
|
-
To provide the detailed information about how the event was generated and executed, the special object `event.detail` is generated.
|
|
323
|
-
See `event.detail` object structure in the following code snippet:
|
|
324
|
-
|
|
325
|
-
```javascript
|
|
326
|
-
{
|
|
327
|
-
action: 'PRESS_CAMERA_BUTTON',
|
|
328
|
-
data: null,
|
|
329
|
-
}
|
|
330
|
-
```
|
|
331
|
-
|
|
332
|
-
The fields of the `event.detail` object:
|
|
333
|
-
* `action` contains the type of action that generated the component's event. For more information, see all available [action types](#action-types).
|
|
334
|
-
* `data` keeps the object with status of executed action and the payload. For more information, see the [action data](#action-data) section.
|
|
335
|
-
|
|
336
|
-
#### Action Types
|
|
337
|
-
|
|
338
|
-
| Type of action | Description of the action | Components and events, where present |
|
|
339
|
-
|:------------------------------|:------------------------------------------------------------------|:------------------------------------:|
|
|
340
|
-
| `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot` |
|
|
341
|
-
| `PRESS_CAMERA_BUTTON` | The "Camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
342
|
-
| `PRESS_FILE_BUTTON` | The "Files" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
343
|
-
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
344
|
-
| `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
|
|
345
|
-
| `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
346
|
-
| `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
347
|
-
| `PRESS_REMOTE_DEVICE_BUTTON` | The "Mobile device" button is pressed. | `document-reader` |
|
|
348
|
-
| `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
349
|
-
| `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
|
|
350
|
-
| `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
|
|
351
|
-
| `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
352
|
-
| `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
|
|
353
|
-
| `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
|
|
354
|
-
| `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
|
|
355
|
-
| `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
|
|
356
|
-
| `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
|
|
357
|
-
| `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot` |
|
|
358
|
-
| `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
|
|
359
|
-
| `REMOTE_TRANSACTION_UPLOADED` | Remote transaction with current tag was uploaded | `document-reader` |
|
|
360
|
-
| `REMOTE_PROCESS_FINISHED` | Remote transaction with current tag was processed | `document-reader` |
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
#### Action Data
|
|
364
|
-
|
|
365
|
-
**1.** In case of successful operation, the `event.detail.data` field is structured as follows:
|
|
366
|
-
|
|
367
|
-
```javascript
|
|
368
|
-
{
|
|
369
|
-
response: { ... },
|
|
370
|
-
status: 1
|
|
371
|
-
}
|
|
372
|
-
```
|
|
373
|
-
|
|
374
|
-
If video recording is enabled:
|
|
375
|
-
|
|
376
|
-
```javascript
|
|
377
|
-
{
|
|
378
|
-
response: { ... },
|
|
379
|
-
status: 1,
|
|
380
|
-
video: Blob,
|
|
381
|
-
}
|
|
382
|
-
```
|
|
383
|
-
|
|
384
|
-
Available fields of `event.detail.data` object:
|
|
385
|
-
* `response` contains the object with resulting payload of the event's action execution.
|
|
386
|
-
* `status` defines the status of event's action completion. For details, see [action statuses](#action-statuses).
|
|
387
|
-
* `video` video of the document scanning process (if ```videoRecord``` setting is set).
|
|
388
|
-
|
|
389
|
-
**2.** In case of event's action failure, the `event.detail.data` field is structured as follows:
|
|
390
|
-
|
|
391
|
-
```javascript
|
|
392
|
-
{
|
|
393
|
-
reason: 'CAMERA_PERMISSION_DENIED',
|
|
394
|
-
status: 0
|
|
395
|
-
}
|
|
396
|
-
```
|
|
397
|
-
|
|
398
|
-
Available fields of `event.detail.data` object:
|
|
399
|
-
* `reason` defines the reason of action's failure. For details, see [failure reasons](#action-failure-reasons).
|
|
400
|
-
* `status` defines the status of event's action completion. For details, see [action statuses](#action-statuses).
|
|
401
98
|
|
|
402
|
-
|
|
99
|
+
2\. Define the components and initialize the service:
|
|
403
100
|
|
|
404
|
-
|
|
405
|
-
|:-------|:------------|
|
|
406
|
-
| 0 | Failure |
|
|
407
|
-
| 1 | Success |
|
|
408
|
-
| 2 | Timeout |
|
|
101
|
+
* **Production** environment. <a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing/#domain-name-licensing">Domain name licensing</a> is used, so don't add the license to the project source code:
|
|
409
102
|
|
|
410
|
-
#### Action Failure Reasons
|
|
411
|
-
|
|
412
|
-
| Reason | Description of the reason |
|
|
413
|
-
|:---------------------------|:-------------------------------------------------------|
|
|
414
|
-
| `WASM_ERROR` | Error in WASM |
|
|
415
|
-
| `WASM_LICENSE` | Missing or incorrect license |
|
|
416
|
-
| `FILE_SIZE` | The file size is too large |
|
|
417
|
-
| `INCORRECT_FILE` | Problems with reading the file |
|
|
418
|
-
| `INCORRECT_SCENARIO` | Scenario is not supported |
|
|
419
|
-
| `MISSING_SCENARIO` | Scenario is missing |
|
|
420
|
-
| `UNKNOWN_ERROR` | Unknown error |
|
|
421
|
-
| `NOT_SUPPORTED` | The browser is not supported |
|
|
422
|
-
| `HTTP_NOT_SUPPORTED` | The web component does not work over the http protocol |
|
|
423
|
-
| `INSECURE_PAGE_CONTEXT` | The web component does not work in insecure context |
|
|
424
|
-
| `CAMERA_UNKNOWN_ERROR` | Unknown camera error |
|
|
425
|
-
| `CAMERA_PERMISSION_DENIED` | Access to the camera is prohibited |
|
|
426
|
-
| `NO_CAMERA` | There is no camera available |
|
|
427
|
-
| `INCORRECT_CAMERA_ID` | Camera with this ID was not found |
|
|
428
|
-
| `CONNECTION_ERROR` | Connection errors |
|
|
429
|
-
| `BAD_CONFIGURATION` | Incompatible component settings are installed |
|
|
430
|
-
|
|
431
|
-
#### Remote action data
|
|
432
|
-
|
|
433
|
-
**1.** In case of remote scan scenario REMOTE_TRANSACTION_UPLOADED `event.detail` will contain the following data:
|
|
434
103
|
```javascript
|
|
435
|
-
|
|
436
|
-
action: EventActions.REMOTE_TRANSACTION_UPLOADED,
|
|
437
|
-
data: {
|
|
438
|
-
id: 1,
|
|
439
|
-
state: 1,
|
|
440
|
-
updatedAt: 'dateStr'
|
|
441
|
-
},
|
|
442
|
-
}
|
|
104
|
+
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
|
|
443
105
|
```
|
|
444
|
-
Transaction id can be used to trigger reprocessing.
|
|
445
|
-
|
|
446
|
-
#### Event Generation Logic
|
|
447
|
-
|
|
448
|
-
The cases of event generation are described in the following table.
|
|
449
|
-
|
|
450
|
-
<table>
|
|
451
|
-
<thead>
|
|
452
|
-
<tr>
|
|
453
|
-
<th>Event condition </th>
|
|
454
|
-
<th>Event type</th>
|
|
455
|
-
<th>
|
|
456
106
|
|
|
457
|
-
|
|
458
|
-
</th>
|
|
459
|
-
<th>Description</th>
|
|
460
|
-
</tr>
|
|
461
|
-
</thead>
|
|
462
|
-
<tbody>
|
|
463
|
-
<tr>
|
|
464
|
-
<td>Component is mounted in the DOM.</td>
|
|
465
|
-
<td>
|
|
466
|
-
|
|
467
|
-
`document-reader`, `camera-snapshot`
|
|
468
|
-
|
|
469
|
-
</td>
|
|
470
|
-
<td>
|
|
107
|
+
* **Development** environment. Use this option only when your product is under development or testing, and you still don't expose your application to the internet, as your license needs to be added to the project source code:
|
|
471
108
|
|
|
472
109
|
```javascript
|
|
473
|
-
{
|
|
474
|
-
action: 'ELEMENT_VISIBLE',
|
|
475
|
-
data: null,
|
|
476
|
-
}
|
|
110
|
+
defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: '<BASE64_LICENSE_KEY>' }));
|
|
477
111
|
```
|
|
478
112
|
|
|
479
|
-
</
|
|
480
|
-
<td>
|
|
113
|
+
<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 the Base64 string</a>
|
|
481
114
|
|
|
482
|
-
|
|
115
|
+
!!! warning
|
|
116
|
+
Once the development is finished and your product is ready to be exposed to the internet, make sure that you have removed the license from your source code.
|
|
483
117
|
|
|
484
|
-
|
|
118
|
+
3\. Add the component tag to the `.html` file:
|
|
485
119
|
|
|
486
120
|
```html
|
|
487
|
-
<
|
|
488
|
-
<document-reader></document-reader>
|
|
489
|
-
</div>
|
|
490
|
-
```
|
|
491
|
-
|
|
492
|
-
</td>
|
|
493
|
-
</tr>
|
|
494
|
-
<tr>
|
|
495
|
-
<td>"Camera" button is pressed.</td>
|
|
496
|
-
<td>
|
|
497
|
-
|
|
498
|
-
`document-reader`, `camera-snapshot`
|
|
499
|
-
|
|
500
|
-
</td>
|
|
501
|
-
<td>
|
|
502
|
-
|
|
503
|
-
```javascript
|
|
504
|
-
{
|
|
505
|
-
action: 'PRESS_CAMERA_BUTTON',
|
|
506
|
-
data: null,
|
|
507
|
-
}
|
|
508
|
-
```
|
|
509
|
-
|
|
510
|
-
</td>
|
|
511
|
-
<td></td>
|
|
512
|
-
</tr>
|
|
513
|
-
<tr>
|
|
514
|
-
<td>"Files" button is pressed.</td>
|
|
515
|
-
<td>
|
|
516
|
-
|
|
517
|
-
`document-reader`, `camera-snapshot`
|
|
518
|
-
|
|
519
|
-
</td>
|
|
520
|
-
<td>
|
|
521
|
-
|
|
522
|
-
```javascript
|
|
523
|
-
{
|
|
524
|
-
action: 'PRESS_FILE_BUTTON',
|
|
525
|
-
data: null,
|
|
526
|
-
}
|
|
527
|
-
```
|
|
528
|
-
|
|
529
|
-
</td>
|
|
530
|
-
<td></td>
|
|
531
|
-
</tr>
|
|
532
|
-
<tr>
|
|
533
|
-
<td>"Retry" button is pressed.</td>
|
|
534
|
-
<td>
|
|
535
|
-
|
|
536
|
-
`document-reader`, `camera-snapshot`
|
|
537
|
-
|
|
538
|
-
</td>
|
|
539
|
-
<td>
|
|
540
|
-
|
|
541
|
-
```javascript
|
|
542
|
-
{
|
|
543
|
-
action: 'PRESS_RETRY_BUTTON',
|
|
544
|
-
data: null,
|
|
545
|
-
}
|
|
546
|
-
```
|
|
547
|
-
|
|
548
|
-
</td>
|
|
549
|
-
<td></td>
|
|
550
|
-
</tr>
|
|
551
|
-
<tr>
|
|
552
|
-
<td>"Skip page" button is pressed.</td>
|
|
553
|
-
<td>
|
|
554
|
-
|
|
555
|
-
`document-reader`
|
|
556
|
-
|
|
557
|
-
</td>
|
|
558
|
-
<td>
|
|
559
|
-
|
|
560
|
-
```javascript
|
|
561
|
-
{
|
|
562
|
-
action: 'PRESS_SKIP_BUTTON',
|
|
563
|
-
data: null,
|
|
564
|
-
}
|
|
565
|
-
```
|
|
566
|
-
|
|
567
|
-
</td>
|
|
568
|
-
<td>
|
|
569
|
-
|
|
570
|
-
This event available only in `document-reader`.
|
|
571
|
-
|
|
572
|
-
</td>
|
|
573
|
-
</tr>
|
|
574
|
-
<tr>
|
|
575
|
-
<td>"Capture" button is pressed.</td>
|
|
576
|
-
<td>
|
|
577
|
-
|
|
578
|
-
`document-reader`, `camera-snapshot`
|
|
579
|
-
|
|
580
|
-
</td>
|
|
581
|
-
<td>
|
|
582
|
-
|
|
583
|
-
```javascript
|
|
584
|
-
{
|
|
585
|
-
action: 'PRESS_CAPTURE_BUTTON',
|
|
586
|
-
data: null,
|
|
587
|
-
}
|
|
588
|
-
```
|
|
589
|
-
|
|
590
|
-
</td>
|
|
591
|
-
<td>
|
|
592
|
-
</td>
|
|
593
|
-
</tr>
|
|
594
|
-
<tr>
|
|
595
|
-
<td>"Change camera" button is pressed.</td>
|
|
596
|
-
<td>
|
|
597
|
-
|
|
598
|
-
`document-reader`, `camera-snapshot`
|
|
599
|
-
|
|
600
|
-
</td>
|
|
601
|
-
<td>
|
|
602
|
-
|
|
603
|
-
```javascript
|
|
604
|
-
{
|
|
605
|
-
action: 'PRESS_CHANGE_CAMERA_BUTTON',
|
|
606
|
-
data: null,
|
|
607
|
-
}
|
|
608
|
-
```
|
|
609
|
-
|
|
610
|
-
</td>
|
|
611
|
-
<td>
|
|
612
|
-
</td>
|
|
613
|
-
</tr>
|
|
614
|
-
<tr>
|
|
615
|
-
<td>"Mobile device" button is pressed.</td>
|
|
616
|
-
<td>
|
|
617
|
-
|
|
618
|
-
`document-reader`
|
|
619
|
-
|
|
620
|
-
</td>
|
|
621
|
-
<td>
|
|
622
|
-
|
|
623
|
-
```javascript
|
|
624
|
-
{
|
|
625
|
-
action: 'PRESS_REMOTE_DEVICE_BUTTON',
|
|
626
|
-
data: null,
|
|
627
|
-
}
|
|
628
|
-
```
|
|
629
|
-
|
|
630
|
-
</td>
|
|
631
|
-
<td>
|
|
632
|
-
</td>
|
|
633
|
-
</tr>
|
|
634
|
-
<tr>
|
|
635
|
-
<td>"Mirroring" button is pressed.</td>
|
|
636
|
-
<td>
|
|
637
|
-
|
|
638
|
-
`document-reader`, `camera-snapshot`
|
|
639
|
-
|
|
640
|
-
</td>
|
|
641
|
-
<td>
|
|
642
|
-
|
|
643
|
-
```javascript
|
|
644
|
-
{
|
|
645
|
-
action: 'PRESS_MIRRORING_BUTTON',
|
|
646
|
-
data: null,
|
|
647
|
-
}
|
|
648
|
-
```
|
|
649
|
-
|
|
650
|
-
</td>
|
|
651
|
-
<td>
|
|
652
|
-
</td>
|
|
653
|
-
</tr>
|
|
654
|
-
<tr>
|
|
655
|
-
<td>The document contains another page.</td>
|
|
656
|
-
<td>
|
|
657
|
-
|
|
658
|
-
`document-reader`
|
|
659
|
-
|
|
660
|
-
</td>
|
|
661
|
-
<td>
|
|
662
|
-
|
|
663
|
-
```javascript
|
|
664
|
-
{
|
|
665
|
-
action: 'NEW_PAGE_AVAILABLE',
|
|
666
|
-
data: null,
|
|
667
|
-
}
|
|
668
|
-
```
|
|
669
|
-
|
|
670
|
-
</td>
|
|
671
|
-
<td>
|
|
672
|
-
|
|
673
|
-
This event available only in `document-reader`.
|
|
674
|
-
|
|
675
|
-
</td>
|
|
676
|
-
</tr>
|
|
677
|
-
<tr>
|
|
678
|
-
<td>Recognition of a new page has started.</td>
|
|
679
|
-
<td>
|
|
680
|
-
|
|
681
|
-
`document-reader`
|
|
682
|
-
|
|
683
|
-
</td>
|
|
684
|
-
<td>
|
|
685
|
-
|
|
686
|
-
```javascript
|
|
687
|
-
{
|
|
688
|
-
action: 'NEW_PAGE_STARTED',
|
|
689
|
-
data: null,
|
|
690
|
-
}
|
|
691
|
-
```
|
|
692
|
-
|
|
693
|
-
</td>
|
|
694
|
-
<td>
|
|
695
|
-
|
|
696
|
-
This event available only in `document-reader`.
|
|
697
|
-
|
|
698
|
-
</td>
|
|
699
|
-
</tr>
|
|
700
|
-
<tr>
|
|
701
|
-
<td>"Close" button is pressed.</td>
|
|
702
|
-
<td>
|
|
703
|
-
|
|
704
|
-
`document-reader`, `camera-snapshot`
|
|
705
|
-
|
|
706
|
-
</td>
|
|
707
|
-
<td>
|
|
708
|
-
|
|
709
|
-
```javascript
|
|
710
|
-
{
|
|
711
|
-
action: 'CLOSE',
|
|
712
|
-
data: null,
|
|
713
|
-
}
|
|
714
|
-
```
|
|
715
|
-
|
|
716
|
-
</td>
|
|
717
|
-
<td></td>
|
|
718
|
-
</tr>
|
|
719
|
-
<tr>
|
|
720
|
-
<td>"Close" button is pressed on the document recognition screen.</td>
|
|
721
|
-
<td>
|
|
722
|
-
|
|
723
|
-
`document-reader`, `camera-snapshot`
|
|
724
|
-
|
|
725
|
-
</td>
|
|
726
|
-
<td>
|
|
727
|
-
|
|
728
|
-
```javascript
|
|
729
|
-
{
|
|
730
|
-
action: 'CAMERA_PROCESS_CLOSED',
|
|
731
|
-
data: null,
|
|
732
|
-
}
|
|
733
|
-
```
|
|
734
|
-
|
|
735
|
-
</td>
|
|
736
|
-
<td></td>
|
|
737
|
-
</tr>
|
|
738
|
-
<tr>
|
|
739
|
-
<td>Recognition from the camera has started.</td>
|
|
740
|
-
<td>
|
|
741
|
-
|
|
742
|
-
`document-reader`, `camera-snapshot`
|
|
743
|
-
|
|
744
|
-
</td>
|
|
745
|
-
<td>
|
|
746
|
-
|
|
747
|
-
```javascript
|
|
748
|
-
{
|
|
749
|
-
action: 'CAMERA_PROCESS_STARTED',
|
|
750
|
-
data: null,
|
|
751
|
-
}
|
|
752
|
-
```
|
|
753
|
-
|
|
754
|
-
</td>
|
|
755
|
-
<td></td>
|
|
756
|
-
</tr>
|
|
757
|
-
<tr>
|
|
758
|
-
<td>Video stream has started.</td>
|
|
759
|
-
<td>
|
|
760
|
-
|
|
761
|
-
`document-reader`, `camera-snapshot`
|
|
762
|
-
|
|
763
|
-
</td>
|
|
764
|
-
<td>
|
|
765
|
-
|
|
766
|
-
```javascript
|
|
767
|
-
{
|
|
768
|
-
action: 'VIDEO_STARTED',
|
|
769
|
-
data: null,
|
|
770
|
-
}
|
|
771
|
-
```
|
|
772
|
-
|
|
773
|
-
</td>
|
|
774
|
-
<td></td>
|
|
775
|
-
</tr>
|
|
776
|
-
<tr>
|
|
777
|
-
<td>Video stream has stopped.</td>
|
|
778
|
-
<td>
|
|
779
|
-
|
|
780
|
-
`document-reader`, `camera-snapshot`
|
|
781
|
-
|
|
782
|
-
</td>
|
|
783
|
-
<td>
|
|
784
|
-
|
|
785
|
-
```javascript
|
|
786
|
-
{
|
|
787
|
-
action: 'VIDEO_STOPPED',
|
|
788
|
-
data: null,
|
|
789
|
-
}
|
|
790
|
-
```
|
|
791
|
-
|
|
792
|
-
</td>
|
|
793
|
-
<td></td>
|
|
794
|
-
</tr>
|
|
795
|
-
<tr>
|
|
796
|
-
<td>File processing has started.</td>
|
|
797
|
-
<td>
|
|
798
|
-
|
|
799
|
-
`document-reader`, `camera-snapshot`
|
|
800
|
-
|
|
801
|
-
</td>
|
|
802
|
-
<td>
|
|
803
|
-
|
|
804
|
-
```javascript
|
|
805
|
-
{
|
|
806
|
-
action: 'FILE_PROCESS_STARTED',
|
|
807
|
-
data: null,
|
|
808
|
-
}
|
|
809
|
-
```
|
|
810
|
-
|
|
811
|
-
</td>
|
|
812
|
-
<td></td>
|
|
813
|
-
</tr>
|
|
814
|
-
<tr>
|
|
815
|
-
<td>The work of the component is completed successfully.</td>
|
|
816
|
-
<td>
|
|
817
|
-
|
|
818
|
-
`document-reader`, `camera-snapshot`
|
|
819
|
-
|
|
820
|
-
</td>
|
|
821
|
-
<td>
|
|
822
|
-
|
|
823
|
-
```javascript
|
|
824
|
-
{
|
|
825
|
-
action: 'PROCESS_FINISHED',
|
|
826
|
-
data: {
|
|
827
|
-
response: { ... },
|
|
828
|
-
status: 1
|
|
829
|
-
}
|
|
830
|
-
}
|
|
831
|
-
```
|
|
832
|
-
|
|
833
|
-
</td>
|
|
834
|
-
<td></td>
|
|
835
|
-
</tr>
|
|
836
|
-
<tr>
|
|
837
|
-
<td>The work of the component is completed by timeout.</td>
|
|
838
|
-
<td>
|
|
839
|
-
|
|
840
|
-
`document-reader`
|
|
841
|
-
|
|
842
|
-
</td>
|
|
843
|
-
<td>
|
|
844
|
-
|
|
845
|
-
```javascript
|
|
846
|
-
{
|
|
847
|
-
action: 'PROCESS_FINISHED',
|
|
848
|
-
data: {
|
|
849
|
-
response: { ... },
|
|
850
|
-
status: 2
|
|
851
|
-
}
|
|
852
|
-
}
|
|
853
|
-
```
|
|
854
|
-
|
|
855
|
-
</td>
|
|
856
|
-
<td>
|
|
857
|
-
|
|
858
|
-
This event available only in `document-reader`.
|
|
859
|
-
|
|
860
|
-
</td>
|
|
861
|
-
</tr>
|
|
862
|
-
<tr>
|
|
863
|
-
<td>The work of the component failed.</td>
|
|
864
|
-
<td>
|
|
865
|
-
|
|
866
|
-
`document-reader`, `camera-snapshot`
|
|
867
|
-
|
|
868
|
-
</td>
|
|
869
|
-
<td>
|
|
870
|
-
|
|
871
|
-
```javascript
|
|
872
|
-
{
|
|
873
|
-
action: 'PROCESS_FINISHED',
|
|
874
|
-
data: {
|
|
875
|
-
reason: 'CAMERA_PERMISSION_DENIED',
|
|
876
|
-
status: 0
|
|
877
|
-
}
|
|
878
|
-
}
|
|
879
|
-
```
|
|
880
|
-
|
|
881
|
-
</td>
|
|
882
|
-
<td></td>
|
|
883
|
-
</tr>
|
|
884
|
-
<tr>
|
|
885
|
-
<td>Component is initialized and ready to work.</td>
|
|
886
|
-
<td>
|
|
887
|
-
|
|
888
|
-
`document-reader`
|
|
889
|
-
|
|
890
|
-
</td>
|
|
891
|
-
<td>
|
|
892
|
-
|
|
893
|
-
```javascript
|
|
894
|
-
{
|
|
895
|
-
action: 'SERVICE_INITIALIZED',
|
|
896
|
-
data: null,
|
|
897
|
-
}
|
|
121
|
+
<document-reader></document-reader>
|
|
898
122
|
```
|
|
899
123
|
|
|
900
|
-
|
|
901
|
-
<td>
|
|
124
|
+
#### Snapshot Component
|
|
902
125
|
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
</td>
|
|
906
|
-
</tr>
|
|
907
|
-
<tr>
|
|
908
|
-
<td>The transaction has been successfully uploaded from the delegated device.</td>
|
|
909
|
-
<td>
|
|
910
|
-
|
|
911
|
-
`document-reader`
|
|
912
|
-
|
|
913
|
-
</td>
|
|
914
|
-
<td>
|
|
126
|
+
1\. Define the components:
|
|
915
127
|
|
|
916
128
|
```javascript
|
|
917
|
-
|
|
918
|
-
action: 'REMOTE_TRANSACTION_UPLOADED',
|
|
919
|
-
data: {
|
|
920
|
-
id: 'df4e210a-8411-411b-998e-a7c7f6b4a770',
|
|
921
|
-
state: 1,
|
|
922
|
-
updatedAt: '2024-09-19T11:05:21.473286Z'
|
|
923
|
-
},
|
|
924
|
-
}
|
|
129
|
+
defineComponents();
|
|
925
130
|
```
|
|
926
131
|
|
|
927
|
-
|
|
928
|
-
<td>
|
|
929
|
-
|
|
930
|
-
This event available only in `document-reader`.
|
|
931
|
-
|
|
932
|
-
</td>
|
|
933
|
-
</tr>
|
|
934
|
-
<tr>
|
|
935
|
-
<td>Remote processing has been completed successfully.</td>
|
|
936
|
-
<td>
|
|
937
|
-
|
|
938
|
-
`document-reader`
|
|
132
|
+
2\. Add the component tag to the `.html` file:
|
|
939
133
|
|
|
940
|
-
|
|
941
|
-
<
|
|
942
|
-
|
|
943
|
-
```javascript
|
|
944
|
-
{
|
|
945
|
-
action: 'REMOTE_PROCESS_FINISHED',
|
|
946
|
-
data: {
|
|
947
|
-
response: { ... },
|
|
948
|
-
status: 1
|
|
949
|
-
},
|
|
950
|
-
}
|
|
134
|
+
```html
|
|
135
|
+
<camera-snapshot></camera-snapshot>
|
|
951
136
|
```
|
|
952
137
|
|
|
953
|
-
|
|
954
|
-
<td>
|
|
955
|
-
|
|
956
|
-
This event available only in `document-reader`.
|
|
138
|
+
## Documentation
|
|
957
139
|
|
|
958
|
-
</
|
|
959
|
-
</tr>
|
|
960
|
-
</tbody>
|
|
961
|
-
</table>
|
|
140
|
+
<a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/">Regula Document Reader SDK Web Components Documentation</a>
|
|
962
141
|
|
|
963
|
-
|
|
142
|
+
<a target="_blank" href="https://dev.regulaforensics.com/DocumentReaderSDK-WebComponents-Docs/">Regula Document Reader SDK Web Components API Reference</a>
|
|
964
143
|
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
```javascript
|
|
968
|
-
const component = document.querySelector('document-reader');
|
|
144
|
+
## Demo Application
|
|
969
145
|
|
|
970
|
-
|
|
971
|
-
if (event.detail.action === 'PROCESS_FINISHED' && event.detail.data.status === 1) {
|
|
972
|
-
const response = event.detail.data.response;
|
|
973
|
-
console.log(response);
|
|
974
|
-
}
|
|
975
|
-
}
|
|
146
|
+
<a target="_blank" href="https://api.regulaforensics.com/?utm_source=npm">Demo Application</a>
|
|
976
147
|
|
|
977
|
-
|
|
978
|
-
```
|
|
148
|
+
## Sample Projects
|
|
979
149
|
|
|
980
|
-
|
|
150
|
+
There are several project examples that demonstrate the integration way of Regula Document Reader SDK Web Components, visit <a target="_blank" href="https://github.com/regulaforensics/document-web-components-samples">our repository on GitHub</a>.
|
|
981
151
|
|
|
982
|
-
|
|
983
|
-
window.RegulaDocumentSDK.recognizeListener = (response) => console.log(response);
|
|
984
|
-
```
|
|
152
|
+
Visit the <a target="_blank" href="https://storybook-document.regulaforensics.com/">Storybook</a> website to see the live demo.
|
|
985
153
|
|
|
986
|
-
|
|
154
|
+
## Technical Support
|
|
987
155
|
|
|
988
|
-
|
|
989
|
-
See the description and examples below.
|
|
156
|
+
To submit a request to the Support Team, visit <a target="_blank" href="https://support.regulaforensics.com/hc/en-us/requests/new?utm_source=npm">Regula Help Center</a>.
|
|
990
157
|
|
|
991
|
-
|
|
992
|
-
```javascript
|
|
993
|
-
const element = document.createElement('document-reader');
|
|
158
|
+
## Business Enquiries
|
|
994
159
|
|
|
995
|
-
|
|
996
|
-
startScreen: true,
|
|
997
|
-
internalScenario: 'Locate',
|
|
998
|
-
multipageProcessing: true,
|
|
999
|
-
};
|
|
1000
|
-
```
|
|
1001
|
-
|
|
1002
|
-
* Using attributes to configure element:
|
|
1003
|
-
```javascript
|
|
1004
|
-
<document-reader start-screen internal-scenario="Locate"></document-reader>
|
|
1005
|
-
```
|
|
1006
|
-
|
|
1007
|
-
We **recommend** using the `settings` property of the element to configure its parameters.
|
|
1008
|
-
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).
|
|
1009
|
-
|
|
1010
|
-
See all component's settings and attributes in the following table.
|
|
1011
|
-
|
|
1012
|
-
| Setting name | Attribute name | Description | Data type | Default value | Values | Available in |
|
|
1013
|
-
|:--------------------------------------------|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------:|:----------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------:|
|
|
1014
|
-
| **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`, `camera-snapshot` |
|
|
1015
|
-
| **internalScenario** | **internal-scenario** | The component document verification scenario. | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` | `document-reader` |
|
|
1016
|
-
| **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` |
|
|
1017
|
-
| **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` |
|
|
1018
|
-
| **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` |
|
|
1019
|
-
| **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` |
|
|
1020
|
-
| **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` |
|
|
1021
|
-
| **regulaLogo** | **copyright** | Show Regula copyright footer. (deprecated, use copyright instead) | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1022
|
-
| **changeCameraButton** | **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1023
|
-
| **closeButton** | **close-button** | Show the close button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1024
|
-
| **captureButton** | **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
1025
|
-
| **copyright** | | Show Regula copyright footer. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1026
|
-
| **skipButton** | | Show the skip button for the second page. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
1027
|
-
| **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` |
|
|
1028
|
-
| **resolution** | | Sets the resolution of the video stream from the camera. | object | `{ width: 1920, height: 1080 }` | `{ width: number, height: number }` | `document-reader`, `camera-snapshot` |
|
|
1029
|
-
| **cameraMode** | | Selects the front or rear camera of the device. | object | `environment` | `environment`, `user` | `document-reader`, `camera-snapshot` |
|
|
1030
|
-
| **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` |
|
|
1031
|
-
| **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` |
|
|
1032
|
-
| **cameraFrameBorderWidth** | | Sets the thickness of the document capture frame. | number | 5 | `any number` | `document-reader` |
|
|
1033
|
-
| **backgroundMaskAlpha** | | Sets the transparency of the background outside the frame. | number | 0.5 | `from 0 to 1` | `document-reader` |
|
|
1034
|
-
| **cameraFrameLandscapeAspectRatio** | | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | `any number` | `document-reader` |
|
|
1035
|
-
| **cameraFramePortraitAspectRatio** | | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | `any number` | `document-reader` |
|
|
1036
|
-
| **statusIcon** | | Show status icon. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
1037
|
-
| **statusPositionMultiplier** | | Sets the vertical position of the status message. | number | `undefined` | `from 0 to 2` | `document-reader` |
|
|
1038
|
-
| **cameraFrameOffsetWidth** | | Sets the offset of the capture frame. | number | `undefined` | `any number` | `document-reader` |
|
|
1039
|
-
| **cameraFrameVerticalPositionMultiplier** | | Sets the offset of the capture frame from the top edge. | number | `undefined` | `from 0 to 2` | `document-reader` |
|
|
1040
|
-
| **cameraFrameHorizontalPositionMultiplier** | | Sets the offset of the capture frame from the right edge. | number | `undefined` | `from 0 to 2` | `document-reader` |
|
|
1041
|
-
| **cameraFrameShapeType** | | Sets the capture frame shape type. | string | `line` | `line`, `corners` | `document-reader` |
|
|
1042
|
-
| **cameraFrameLineCap** | | Sets the style of the end of the capture frame line when `cameraFrameShapeType='corners'` | string | `butt` | `butt`, `round`, `square` | `document-reader` |
|
|
1043
|
-
| **cameraFrameLineLength** | | Sets the length of the capture frame line when `cameraFrameShapeType='corners'` | number | 5 | `any number` | `document-reader` |
|
|
1044
|
-
| **cameraFrameCornerRadius** | | Sets the radius of rounding of the capture frame. | number | 15 | `any number` | `document-reader` |
|
|
1045
|
-
| **cameraFrameDefaultColor** | | Sets the color of the capture frame. | string | `rgba(255, 255, 255, 0.9)` | `any color string` | `document-reader` |
|
|
1046
|
-
| **cameraFrameActiveColor** | | Sets the capture frame color when a document is detected. | string | `rgba(30, 130, 76, 0.9)` | `any color string` | `document-reader` |
|
|
1047
|
-
| **statusTextColor** | | Sets the color of the text message status. | string | `white` | `any color string` | `document-reader`, `camera-snapshot` |
|
|
1048
|
-
| **statusBackgroundColor** | | Sets the background color of the message status. | string | `rgba(27, 16, 31, 0.5)` | `any color string` | `document-reader`, `camera-snapshot` |
|
|
1049
|
-
| **cameraFrame** | | Show the capture frame. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
1050
|
-
| **captureButtonDelay** | | Show the capture button after delay. | number | `undefined` | `any number` | `document-reader` |
|
|
1051
|
-
| **nonce** | | Sets the unique nonce value to maintain the CSP policy. | string | `undefined` | `unique nonce value` | `document-reader`, `camera-snapshot` |
|
|
1052
|
-
| **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, bitrate: number }` | `document-reader` |
|
|
1053
|
-
| **videoCaptureMotionControl** | | Enables device shaking control. | boolean | `false` | `true`, `false` | `document-reader` |
|
|
1054
|
-
| **fromCameraButton** | | Show the camera button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1055
|
-
| **uploadFileButton** | | Show the files button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1056
|
-
| **mirrorButton** | | Show the mirroring button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
1057
|
-
| **mirrorType** | | Sets the initial value of video mirroring. | string | `mirror` - for front camera, `noMirror` - for back camera, | `mirror`, `noMirror` | `document-reader`, `camera-snapshot` |
|
|
1058
|
-
| **mobileDelegate** | | Changes the success screen in case of delegating scanning via a mobile device. | boolean | `false` | `true`, `false` | `document-reader` |
|
|
1059
|
-
|
|
1060
|
-
### Backend reprocessing
|
|
1061
|
-
|
|
1062
|
-
You can send the results to the backend for further processing:
|
|
1063
|
-
|
|
1064
|
-
**1.** Set `backendProcessing`, `serviceURL` and `httpHeaders` (optional) in processParam:
|
|
1065
|
-
```javascript
|
|
1066
|
-
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
1067
|
-
processParam: {
|
|
1068
|
-
scenario: InternalScenarios.MrzAndLocate,
|
|
1069
|
-
backendProcessing: {
|
|
1070
|
-
serviceURL: 'YOUR_SERVICE_URL',
|
|
1071
|
-
httpHeaders: { // you can set http headers if necessary
|
|
1072
|
-
key1: 'header1',
|
|
1073
|
-
key2: 'header2',
|
|
1074
|
-
key3: 'header3'
|
|
1075
|
-
}
|
|
1076
|
-
}
|
|
1077
|
-
},
|
|
1078
|
-
};
|
|
1079
|
-
```
|
|
1080
|
-
**2.** Send the data to the backend after receiving the processing results:
|
|
1081
|
-
```javascript
|
|
1082
|
-
const component = document.querySelector('document-reader');
|
|
1083
|
-
|
|
1084
|
-
function listener(event) {
|
|
1085
|
-
if (event.detail.action === 'PROCESS_FINISHED' && event.detail.data.status === 1) {
|
|
1086
|
-
window.RegulaDocumentSDK.finalizePackage();
|
|
1087
|
-
}
|
|
1088
|
-
}
|
|
1089
|
-
|
|
1090
|
-
component.addEventListener('document-reader', listener);
|
|
1091
|
-
```
|
|
1092
|
-
### Delegating scan to device with better camera
|
|
1093
|
-
|
|
1094
|
-
For cases when user's main device lacks camera or does not succeed to scan with given camera quality,
|
|
1095
|
-
you have an option to delegate scanning to another available device (i.e. phone).
|
|
1096
|
-
|
|
1097
|
-
#### 1. "From other phone" action may be configured on the start screen:
|
|
1098
|
-
- add 'delegateProcessing' and 'tag':
|
|
1099
|
-
```javascript
|
|
1100
|
-
processor.recognizerProcessParam = {
|
|
1101
|
-
processParam: {
|
|
1102
|
-
scenario: InternalScenarios.MrzAndLocate,
|
|
1103
|
-
},
|
|
1104
|
-
delegateProcessing: {
|
|
1105
|
-
delegateURL: 'https://your-page.com?tag={tag}', // the page which will be used by other device
|
|
1106
|
-
serviceURL: 'https://my-service.com', // your backend service
|
|
1107
|
-
httpHeaders: { // http headers if needed
|
|
1108
|
-
header: 'value'
|
|
1109
|
-
}
|
|
1110
|
-
},
|
|
1111
|
-
tag: 123 // your session id, will be added to delegateURL in place of {tag} substring
|
|
1112
|
-
}
|
|
1113
|
-
```
|
|
1114
|
-
- these settings will unlock "From other phone" option
|
|
1115
|
-
that shows the user QR Code with url (i.e. `https://your-page.com?tag=123`)
|
|
1116
|
-
- the component will emit **REMOTE_TRANSACTION_UPLOADED** event with the most recent transaction uploaded with your session tag.
|
|
1117
|
-
Transaction id may be used to trigger full process backend reprocessing (i.e use [Document Reader Webclient](https://www.npmjs.com/package/@regulaforensics/document-reader-webclient))
|
|
1118
|
-
- the component will emit **REMOTE_PROCESS_FINISHED** event with a result of the most recent processed transaction.
|
|
1119
|
-
It is similar to **PROCESS_FINISHED** event but may contain more data due to backend reprocessing
|
|
1120
|
-
|
|
1121
|
-
#### 2. Configure Delegate page component on delegateURL:
|
|
1122
|
-
- configure [backend reprocessing](#backend-reprocessing)
|
|
1123
|
-
- backendProcessing setting for the device and delegateProcessing setting for the main page must match
|
|
1124
|
-
- set transaction tag
|
|
1125
|
-
```javascript
|
|
1126
|
-
processor.recognizerProcessParam = {
|
|
1127
|
-
tag: new URL(window.location.href).searchParams.get('tag') // assume session Id tag was added to URL params
|
|
1128
|
-
}
|
|
1129
|
-
```
|
|
1130
|
-
- use the same tag as on the main page
|
|
1131
|
-
```javascript
|
|
1132
|
-
element.settings = {
|
|
1133
|
-
startScreen: false, // From camera recognition is expected
|
|
1134
|
-
mobileDelegate: true
|
|
1135
|
-
}
|
|
1136
|
-
```
|
|
1137
|
-
- use finalizePackage() to send the data for further reprocessing
|
|
1138
|
-
|
|
1139
|
-
### Appearance Customization
|
|
1140
|
-
|
|
1141
|
-
#### CSS part
|
|
1142
|
-
|
|
1143
|
-
Using ::part CSS pseudo-elements, you can set your own styles for component elements. Select the element you need in the developer console and use its part name to customize it.
|
|
1144
|
-
|
|
1145
|
-
```css
|
|
1146
|
-
document-reader::part(container) {
|
|
1147
|
-
background: red;
|
|
1148
|
-
}
|
|
1149
|
-
```
|
|
1150
|
-
|
|
1151
|
-
#### CSS variables
|
|
1152
|
-
|
|
1153
|
-
Using CSS variables, you can change the font and font size. See the table for the details.
|
|
1154
|
-
|
|
1155
|
-
| Variable | Info | Default value |
|
|
1156
|
-
|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------:|
|
|
1157
|
-
| **--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` |
|
|
1158
|
-
| **--font-size** | The font size for the text elements. | `16px` |
|
|
1159
|
-
|
|
1160
|
-
The following example demonstrates the `document-reader` HTML element font customization via the custom CSS class:
|
|
1161
|
-
|
|
1162
|
-
CSS:
|
|
1163
|
-
|
|
1164
|
-
```css
|
|
1165
|
-
.my-custom-style {
|
|
1166
|
-
--font-family: Arial, sans-serif;
|
|
1167
|
-
}
|
|
1168
|
-
```
|
|
1169
|
-
|
|
1170
|
-
HTML:
|
|
1171
|
-
|
|
1172
|
-
```html
|
|
1173
|
-
<document-reader class="my-custom-style"></document-reader>
|
|
1174
|
-
```
|
|
1175
|
-
#### Inserting component in Flex and Grid layouts
|
|
1176
|
-
|
|
1177
|
-
document-reader and camera-snapshot components have **width** and **height** set to **100%** by default and therefore try to fit their container element.
|
|
1178
|
-
This should not affect correct CSS Grid positioning, but for Flexbox make sure to style document-reader dimensions and set **flex-basis**, i.e.:
|
|
1179
|
-
|
|
1180
|
-
```css
|
|
1181
|
-
document-reader.flex-item {
|
|
1182
|
-
width: auto;
|
|
1183
|
-
height: auto;
|
|
1184
|
-
flex-basis: 500px; // distinct width of your choice
|
|
1185
|
-
}
|
|
1186
|
-
```
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
#### Localized Messages
|
|
1190
|
-
|
|
1191
|
-
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.
|
|
1192
|
-
You can select one from existing locales or add your custom one. See the following example:
|
|
1193
|
-
|
|
1194
|
-
```javascript
|
|
1195
|
-
const element = document.createElement('document-reader');
|
|
1196
|
-
|
|
1197
|
-
element.translations = {
|
|
1198
|
-
en: {
|
|
1199
|
-
fromCamera: 'Use your camera',
|
|
1200
|
-
},
|
|
1201
|
-
};
|
|
1202
|
-
|
|
1203
|
-
body.append(element);
|
|
1204
|
-
```
|
|
1205
|
-
|
|
1206
|
-
**Note**: To see the changes applied, don't forget to set the desired language to the `locale` attribute.
|
|
1207
|
-
|
|
1208
|
-
```html
|
|
1209
|
-
<document-reader locale="en"></document-reader>
|
|
1210
|
-
```
|
|
1211
|
-
|
|
1212
|
-
See the following table with localized labels, used in the components.
|
|
1213
|
-
|
|
1214
|
-
| Label | Default message in `en` locale | Used in |
|
|
1215
|
-
|:---------------------------------|:-------------------------------------------------------------------------------------------------------|:------------------------------------:|
|
|
1216
|
-
| **done** | Done! | `document-reader`, `camera-snapshot` |
|
|
1217
|
-
| **fileCorrupt** | This file is corrupt or not supported | `document-reader`, `camera-snapshot` |
|
|
1218
|
-
| **somethingWentWrong** | Something went wrong | `document-reader`, `camera-snapshot` |
|
|
1219
|
-
| **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
|
|
1220
|
-
| **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
|
|
1221
|
-
| **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
|
|
1222
|
-
| **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
|
|
1223
|
-
| **incorrectCameraId** | No camera with the specified ID found. | `document-reader`, `camera-snapshot` |
|
|
1224
|
-
| **gallery** | Gallery | `document-reader`, `camera-snapshot` |
|
|
1225
|
-
| **files** | Files | `document-reader`, `camera-snapshot` |
|
|
1226
|
-
| **camera** | Camera | `document-reader`, `camera-snapshot` |
|
|
1227
|
-
| **largeFile** | This file is too large to be uploaded | `document-reader` |
|
|
1228
|
-
| **versionNotSupported** | Your browser version is not supported | `document-reader` |
|
|
1229
|
-
| **httpNotSupported** | HTTPS is not used | `document-reader` |
|
|
1230
|
-
| **insecurePageContext** | Insecure page context | `document-reader` |
|
|
1231
|
-
| **timeout** | Timeout | `document-reader` |
|
|
1232
|
-
| **preparingService** | Preparing the service... | `document-reader` |
|
|
1233
|
-
| **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
|
|
1234
|
-
| **noFocus** | No camera focus | `document-reader` |
|
|
1235
|
-
| **moveCloser** | Move closer | `document-reader` |
|
|
1236
|
-
| **glaresOnDocument** | Avoid glare on the document | `document-reader` |
|
|
1237
|
-
| **holdDocumentStraight** | Hold the document straight | `document-reader` |
|
|
1238
|
-
| **documentProcessing** | Document processing... | `document-reader` |
|
|
1239
|
-
| **flipDocument** | Flip the document | `document-reader` |
|
|
1240
|
-
| **keepDeviceStill** | Hold the device still | `document-reader` |
|
|
1241
|
-
| **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
|
|
1242
|
-
| **uploadPhoto** | Upload a photo | `camera-snapshot` |
|
|
1243
|
-
| **switchToMobile** | Switch to mobile | `document-reader` |
|
|
1244
|
-
| **openPhoneCamera** | Open the camera on your mobile device, scan the QR code, and follow the link | `document-reader` |
|
|
1245
|
-
| **pleaseWait** | Please wait... | `document-reader` |
|
|
1246
|
-
| **mobileDevice** | Mobile device | `document-reader` |
|
|
1247
|
-
| **verifyYourIdentity** | Verify your identity document | `document-reader` |
|
|
1248
|
-
| **fromCameraFilesMobileDesktop** | Capture a document using the computer’s camera, or upload it from files, or scan it on a mobile device | `document-reader` |
|
|
1249
|
-
| **fromCameraGalleryMobile** | Capture a document using the computer’s camera, or upload it from gallery | `document-reader` |
|
|
1250
|
-
| **badLicense** | The license cannot be found or has expired | `document-reader` |
|
|
1251
|
-
| **fromCameraFilesDesktop** | Capture a document using the computer’s camera, or upload it from files | `document-reader` |
|
|
1252
|
-
| **fromCameraMobileDesktop** | Capture a document using the computer’s camera, or scan it on a mobile device | `document-reader` |
|
|
1253
|
-
| **fromFilesMobileDesktop** | Upload a document from files, or scan it on a mobile device | `document-reader` |
|
|
1254
|
-
| **fromCameraDesktop** | Use the computer's camera to capture a document | `document-reader` |
|
|
1255
|
-
| **fromFilesDesktop** | Pick a document from the files and upload it | `document-reader` |
|
|
1256
|
-
| **fromMobileDesktop** | Use your mobile camera to capture a document | `document-reader` |
|
|
1257
|
-
| **fromGalleryMobile** | Pick a document from the gallery and upload it | `document-reader` |
|
|
1258
|
-
| **returnToComputer** | Return to the computer | `document-reader` |
|
|
1259
|
-
| **documentCaptured** | Your document has been captured | `document-reader` |
|
|
1260
|
-
|
|
1261
|
-
## Document Reader Processor
|
|
1262
|
-
|
|
1263
|
-
DocumentReaderProcessor manages the document image recognition and other related operations, leaving implementation of UI to you.
|
|
1264
|
-
|
|
1265
|
-
### npm Processor Integration
|
|
1266
|
-
|
|
1267
|
-
**Step 1.** Install the package `@regulaforensics/vp-frontend-document-components`:
|
|
1268
|
-
```console
|
|
1269
|
-
npm i @regulaforensics/vp-frontend-document-components
|
|
1270
|
-
```
|
|
1271
|
-
|
|
1272
|
-
**Step 2.** Import the class `DocumentReaderProcessor` into your `.js` file.
|
|
1273
|
-
|
|
1274
|
-
Using module bundler:
|
|
1275
|
-
```javascript
|
|
1276
|
-
import { DocumentReaderProcessor } from '@regulaforensics/vp-frontend-document-components';
|
|
1277
|
-
```
|
|
1278
|
-
|
|
1279
|
-
Without module bundler:
|
|
1280
|
-
```javascript
|
|
1281
|
-
import { DocumentReaderProcessor } from '/node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';
|
|
1282
|
-
```
|
|
1283
|
-
|
|
1284
|
-
**Step 3.** Add a video tag to the `.html` file, then prepare and initialize `DocumentReaderProcessor`.
|
|
1285
|
-
|
|
1286
|
-
```javascript
|
|
1287
|
-
const videoElement = document.getElementById('yourVideoElement');
|
|
1288
|
-
const processor = new DocumentReaderProcessor(videoElement);
|
|
1289
|
-
|
|
1290
|
-
processor.recognizerProcessParam = {
|
|
1291
|
-
processParam: {
|
|
1292
|
-
scenario: 'MrzAndLocate',
|
|
1293
|
-
},
|
|
1294
|
-
};
|
|
1295
|
-
processor.imageProcessParam = {
|
|
1296
|
-
processParam: {
|
|
1297
|
-
scenario: 'MrzAndLocate',
|
|
1298
|
-
},
|
|
1299
|
-
};
|
|
1300
|
-
|
|
1301
|
-
try {
|
|
1302
|
-
// Variant 1 - for production environment
|
|
1303
|
-
await processor.initialize();
|
|
1304
|
-
|
|
1305
|
-
// Variant 2 - for test-only environment
|
|
1306
|
-
// await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
1307
|
-
|
|
1308
|
-
const result = await processor.startRecognition();
|
|
1309
|
-
|
|
1310
|
-
processor.stopRecognition();
|
|
1311
|
-
|
|
1312
|
-
console.log(result);
|
|
1313
|
-
} catch (e) {
|
|
1314
|
-
console.log(e);
|
|
1315
|
-
}
|
|
1316
|
-
```
|
|
1317
|
-
|
|
1318
|
-
In the preceding example, the `DocumentReaderProcessor` object is created using the HTML element with the ID `yourVideoElement`.
|
|
1319
|
-
After that, `processor` needs to be initialized. There are two licensing variants:
|
|
1320
|
-
|
|
1321
|
-
**1.** <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">Domain name licensing</a> (for **production** environment).
|
|
1322
|
-
|
|
1323
|
-
To get your website domain licensed, <a href="https://explore.regula.app/docs-support-request" target="_blank">contact our sales team</a>.
|
|
1324
|
-
|
|
1325
|
-
Then asynchronously call the `initialize` method without parameters:
|
|
1326
|
-
```javascript
|
|
1327
|
-
await processor.initialize();
|
|
1328
|
-
```
|
|
1329
|
-
|
|
1330
|
-
**2.** Base64 license string (for **test-only** environment).
|
|
1331
|
-
|
|
1332
|
-
Convert Regula license file to the Base64 string and then asynchronously call `initialize` method, replacing `BASE64_LICENSE_KEY` with your encoded string:
|
|
1333
|
-
```javascript
|
|
1334
|
-
await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
1335
|
-
```
|
|
1336
|
-
|
|
1337
|
-
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
|
|
1338
|
-
<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.
|
|
1339
|
-
|
|
1340
|
-
### CDN Processor Integration
|
|
1341
|
-
|
|
1342
|
-
**Step 1.** Connect the script to your `.html` file.
|
|
1343
|
-
|
|
1344
|
-
Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
|
|
1345
|
-
|
|
1346
|
-
For example:
|
|
1347
|
-
```html
|
|
1348
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.iife.js"></script>
|
|
1349
|
-
```
|
|
1350
|
-
|
|
1351
|
-
**Note:** You can find all available script versions in the corresponding section of npm, using the same link from the previous example.
|
|
1352
|
-
|
|
1353
|
-
**Step 2.** Add a video tag to the `.html` file, then prepare and initialize `DocumentReaderProcessor`.
|
|
1354
|
-
|
|
1355
|
-
`DocumentReaderProcessor` is available in the global variable `window.Regula`. See the following example:
|
|
1356
|
-
|
|
1357
|
-
```javascript
|
|
1358
|
-
const { DocumentReaderProcessor } = window.Regula;
|
|
1359
|
-
|
|
1360
|
-
const videoElement = document.getElementById('yourVideoElement');
|
|
1361
|
-
const processor = new DocumentReaderProcessor(videoElement);
|
|
1362
|
-
|
|
1363
|
-
processor.recognizerProcessParam = {
|
|
1364
|
-
processParam: {
|
|
1365
|
-
scenario: 'MrzAndLocate',
|
|
1366
|
-
},
|
|
1367
|
-
};
|
|
1368
|
-
processor.imageProcessParam = {
|
|
1369
|
-
processParam: {
|
|
1370
|
-
scenario: 'MrzAndLocate',
|
|
1371
|
-
},
|
|
1372
|
-
};
|
|
1373
|
-
|
|
1374
|
-
try {
|
|
1375
|
-
// Variant 1 - for production environment
|
|
1376
|
-
await processor.initialize();
|
|
1377
|
-
|
|
1378
|
-
// Variant 2 - for test-only environment
|
|
1379
|
-
// await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
1380
|
-
|
|
1381
|
-
const result = await processor.startRecognition(); // Result of the document recognition will be located here.
|
|
1382
|
-
|
|
1383
|
-
processor.stopRecognition();
|
|
1384
|
-
|
|
1385
|
-
console.log(result);
|
|
1386
|
-
} catch (e) {
|
|
1387
|
-
console.log(e);
|
|
1388
|
-
}
|
|
1389
|
-
```
|
|
1390
|
-
|
|
1391
|
-
In the preceding example, the `DocumentReaderProcessor` object is created using the HTML element with ID `yourVideoElement`.
|
|
1392
|
-
After that, `processor` needs to be initialized with the license. There are two licensing variants:
|
|
1393
|
-
|
|
1394
|
-
**1.** <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">Domain name licensing</a> (for **production** environment).
|
|
1395
|
-
|
|
1396
|
-
To get your website domain licensed, <a href="https://explore.regula.app/docs-support-request" target="_blank">contact our sales team</a>.
|
|
1397
|
-
|
|
1398
|
-
Then asynchronously call the `initialize` method without parameters:
|
|
1399
|
-
```javascript
|
|
1400
|
-
await processor.initialize();
|
|
1401
|
-
```
|
|
1402
|
-
|
|
1403
|
-
**2.** Base64 license string (for **test-only** environment).
|
|
1404
|
-
|
|
1405
|
-
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:
|
|
1406
|
-
```javascript
|
|
1407
|
-
await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
1408
|
-
```
|
|
1409
|
-
|
|
1410
|
-
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
|
|
1411
|
-
<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.
|
|
1412
|
-
|
|
1413
|
-
### Processor Methods
|
|
1414
|
-
|
|
1415
|
-
#### initialize
|
|
1416
|
-
|
|
1417
|
-
Initializes the DocumentReaderProcessor object. Accepts an object with a Base64 encoded license string.
|
|
1418
|
-
|
|
1419
|
-
**Note:** Base64 license string is applied only to test environments, production mode must use the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">domain name licensing</a>.
|
|
1420
|
-
|
|
1421
|
-
```javascript
|
|
1422
|
-
await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
1423
|
-
```
|
|
1424
|
-
|
|
1425
|
-
#### startRecognition
|
|
1426
|
-
|
|
1427
|
-
Launches the video stream and starts recognizing the document. Returns the result of document processing.
|
|
1428
|
-
|
|
1429
|
-
```javascript
|
|
1430
|
-
const result = await processor.startRecognition();
|
|
1431
|
-
```
|
|
1432
|
-
|
|
1433
|
-
`startRecognition` may take the callback function with the object parameter `currentPage` holding the data of the page currently being processed.
|
|
1434
|
-
The `currentpage` data fields include:
|
|
1435
|
-
|
|
1436
|
-
* `currentPage.data` object with an intermediate processing result
|
|
1437
|
-
* `currentPage.startNextPage` method for starting the next page procession
|
|
1438
|
-
* `currentPage.finishRecognition` method for completing the entire process
|
|
1439
|
-
|
|
1440
|
-
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.
|
|
1441
|
-
|
|
1442
|
-
```javascript
|
|
1443
|
-
async function pageListener(currentPage) {
|
|
1444
|
-
|
|
1445
|
-
setTimeout(async () => {
|
|
1446
|
-
await currentPage.startNextPage();
|
|
1447
|
-
}, 3000);
|
|
1448
|
-
}
|
|
1449
|
-
|
|
1450
|
-
const result = await processor.startRecognition(pageListener);
|
|
1451
|
-
```
|
|
1452
|
-
|
|
1453
|
-
#### processImage
|
|
1454
|
-
|
|
1455
|
-
Processes the image files, containing documents. Can take as a parameter a `FileList` or `Blob` array:
|
|
1456
|
-
|
|
1457
|
-
```javascript
|
|
1458
|
-
const file = 'FileList or Blob array';
|
|
1459
|
-
|
|
1460
|
-
const result = await processor.processImage(file);
|
|
1461
|
-
```
|
|
1462
|
-
|
|
1463
|
-
**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>.
|
|
1464
|
-
|
|
1465
|
-
#### switchCamera
|
|
1466
|
-
|
|
1467
|
-
Switches to the next camera (in case there are several available).
|
|
1468
|
-
|
|
1469
|
-
```javascript
|
|
1470
|
-
await processor.switchCamera();
|
|
1471
|
-
```
|
|
1472
|
-
|
|
1473
|
-
#### stopRecognition
|
|
1474
|
-
|
|
1475
|
-
Stops the document recognition process and ends the video stream.
|
|
1476
|
-
|
|
1477
|
-
```javascript
|
|
1478
|
-
processor.stopRecognition();
|
|
1479
|
-
```
|
|
1480
|
-
|
|
1481
|
-
### Processor Parameters
|
|
1482
|
-
|
|
1483
|
-
You can change the default settings for video streaming and document recognition.
|
|
1484
|
-
The settings must be set **before** the document recognition process starts.
|
|
1485
|
-
|
|
1486
|
-
#### streamParam
|
|
1487
|
-
|
|
1488
|
-
The video stream parameters.
|
|
1489
|
-
|
|
1490
|
-
```javascript
|
|
1491
|
-
processor.streamParam = {
|
|
1492
|
-
cameraMode: 'environment',
|
|
1493
|
-
preferredCameraId: '',
|
|
1494
|
-
resolution: {
|
|
1495
|
-
width: 1280,
|
|
1496
|
-
height: 720,
|
|
1497
|
-
},
|
|
1498
|
-
}
|
|
1499
|
-
```
|
|
1500
|
-
|
|
1501
|
-
Available streaming parameters:
|
|
1502
|
-
|
|
1503
|
-
* `cameraMode`
|
|
1504
|
-
Camera facing mode. Can have values of 'environment' (by default) or 'user'.
|
|
1505
|
-
* `preferredCameraId`
|
|
1506
|
-
ID of the concrete camera to be used for the streaming. Can be extracted from `navigator.mediaDevices.enumerateDevices()`. **Not** set by default.
|
|
1507
|
-
* `resolution`
|
|
1508
|
-
Resolution of a video stream. 1280 x 720 by default.
|
|
1509
|
-
|
|
1510
|
-
#### recognizerProcessParam
|
|
1511
|
-
|
|
1512
|
-
The parameters for recognizing a document from the camera (by the `startRecognition` method). See the following example with several parameters and their default values:
|
|
1513
|
-
|
|
1514
|
-
```javascript
|
|
1515
|
-
processor.recognizerProcessParam = {
|
|
1516
|
-
processParam: {
|
|
1517
|
-
returnUncroppedImage: true,
|
|
1518
|
-
returnPackageForReprocess: false,
|
|
1519
|
-
},
|
|
1520
|
-
};
|
|
1521
|
-
```
|
|
1522
|
-
|
|
1523
|
-
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>.
|
|
1524
|
-
|
|
1525
|
-
#### imageProcessParam
|
|
1526
|
-
|
|
1527
|
-
The settings for recognizing an image as a document file (by `processImage` method).
|
|
1528
|
-
See the following example with several parameters and their default values:
|
|
1529
|
-
|
|
1530
|
-
```javascript
|
|
1531
|
-
// Default settings:
|
|
1532
|
-
processor.imageProcessParam = {
|
|
1533
|
-
processParam: {
|
|
1534
|
-
returnUncroppedImage: true,
|
|
1535
|
-
returnPackageForReprocess: false,
|
|
1536
|
-
},
|
|
1537
|
-
}
|
|
1538
|
-
```
|
|
1539
|
-
|
|
1540
|
-
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>.
|
|
1541
|
-
|
|
1542
|
-
#### recognizeListener
|
|
1543
|
-
|
|
1544
|
-
The callback function that takes as a parameter the processing result for each frame (`response`).
|
|
1545
|
-
See the following example, where the processing result for each frame is logged to the console:
|
|
1546
|
-
|
|
1547
|
-
```javascript
|
|
1548
|
-
function listener(response) {
|
|
1549
|
-
console.log(response);
|
|
1550
|
-
}
|
|
1551
|
-
|
|
1552
|
-
processor.recognizeListener = listener;
|
|
1553
|
-
```
|
|
1554
|
-
|
|
1555
|
-
**Note:** The listener for image recognizer is **not** set by default.
|
|
1556
|
-
|
|
1557
|
-
#### videoElement
|
|
1558
|
-
|
|
1559
|
-
The HTML element to display the video stream from the camera.
|
|
1560
|
-
This setting changes the video element that was defined during processor object construction `new DocumentReaderProcessor(videoElement)`.
|
|
1561
|
-
See the example:
|
|
1562
|
-
|
|
1563
|
-
```javascript
|
|
1564
|
-
const videoElement = document.getElementById('HTMLVideoElement');
|
|
1565
|
-
|
|
1566
|
-
processor.videoElement = videoElement; // null by default
|
|
1567
|
-
```
|
|
1568
|
-
|
|
1569
|
-
By default, `processor.videoElement` has `null` value.
|
|
1570
|
-
|
|
1571
|
-
#### isInitialized
|
|
1572
|
-
|
|
1573
|
-
Read-only property. `true` if the processor has been initialized.
|
|
1574
|
-
|
|
1575
|
-
```javascript
|
|
1576
|
-
processor.isInitialized;
|
|
1577
|
-
```
|
|
1578
|
-
|
|
1579
|
-
#### isProcessing
|
|
1580
|
-
|
|
1581
|
-
Read-only property. `true` if document recognition is still in progress.
|
|
1582
|
-
|
|
1583
|
-
```javascript
|
|
1584
|
-
processor.isProcessing;
|
|
1585
|
-
```
|
|
1586
|
-
|
|
1587
|
-
## Package Resources
|
|
1588
|
-
|
|
1589
|
-
Document reader requires WASM (`ProcMgr.wasm`, `ProcMgr.data`) and worker (`ProcMgr.worker.js`) files to work.
|
|
1590
|
-
By default, these files are downloaded from Regula servers, but you can set your own source.
|
|
1591
|
-
|
|
1592
|
-
**1.** To download these files from our server to local machine, you can get the link in the `window.RegulaDocumentSDK.workerPath` field.
|
|
1593
|
-
|
|
1594
|
-
**2.** Upload all three files (`ProcMgr.worker.js`, `ProcMgr.wasm`, `ProcMgr.data`) to the location you specified. Also, change the address in `windows.RegulaDocumentSDK`.
|
|
1595
|
-
|
|
1596
|
-
For Predefined UI Components:
|
|
1597
|
-
|
|
1598
|
-
```javascript
|
|
1599
|
-
window.RegulaDocumentSDK.workerPath = 'https://custom-wasm-and-worker-files-path.com';
|
|
1600
|
-
```
|
|
1601
|
-
|
|
1602
|
-
For Document Reader Processor:
|
|
1603
|
-
|
|
1604
|
-
```javascript
|
|
1605
|
-
const processor = new DocumentReaderProcessor(videoElement);
|
|
1606
|
-
processor.workerPath = 'https://custom-wasm-and-worker-files-path.com';
|
|
1607
|
-
```
|
|
1608
|
-
|
|
1609
|
-
In the given examples, change the `workerPath` parameter value to your custom source URL.
|
|
1610
|
-
|
|
1611
|
-
**Attention!** The files must be located in the same directory and have the same names as were previously specified.
|
|
1612
|
-
|
|
1613
|
-
To decrease files size, you can apply compression. On your server, you need to determine which <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding" target="_blank">compression method</a> is used for the files.
|
|
1614
|
-
|
|
1615
|
-
## Potential Problems
|
|
1616
|
-
|
|
1617
|
-
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).
|
|
1618
|
-
|
|
1619
|
-
## Examples
|
|
1620
|
-
|
|
1621
|
-
You can see the examples of using the components on the [Samples page](https://github.com/regulaforensics/document-web-components-samples).
|
|
1622
|
-
|
|
1623
|
-
## Additional Resources
|
|
1624
|
-
|
|
1625
|
-
The Document Reader web components are also available on <a href="https://storybook-document.regulaforensics.com" target="_blank">Storybook</a>.
|
|
1626
|
-
|
|
1627
|
-
## FAQ
|
|
1628
|
-
|
|
1629
|
-
### How do I collect logs?
|
|
1630
|
-
|
|
1631
|
-
Logging can be helpful when you run into any issues.
|
|
1632
|
-
Logs contain information about how you use our products. That data helps Regula stuff to analyze and troubleshoot the cases you may experience.
|
|
1633
|
-
|
|
1634
|
-
There are two ways to output logs: console or function callback.
|
|
1635
|
-
|
|
1636
|
-
#### Console
|
|
1637
|
-
|
|
1638
|
-
To initiate the process of logs collecting:
|
|
1639
|
-
|
|
1640
|
-
**1.** Open the Developer menu in your browser.
|
|
1641
|
-
|
|
1642
|
-
**2.** Go to the Console tab.
|
|
1643
|
-
|
|
1644
|
-
**3.** In Console, enter the following line:
|
|
1645
|
-
|
|
1646
|
-
```console
|
|
1647
|
-
localStorage.logger = 'main,wasm>console'
|
|
1648
|
-
```
|
|
1649
|
-
|
|
1650
|
-
**4.** Reload the page.
|
|
1651
|
-
|
|
1652
|
-
**5.** Add the `log` setting to the `processParam` if you want to see logs from WASM:
|
|
1653
|
-
|
|
1654
|
-
```json
|
|
1655
|
-
{
|
|
1656
|
-
"processParam": {
|
|
1657
|
-
"log": true
|
|
1658
|
-
}
|
|
1659
|
-
}
|
|
1660
|
-
```
|
|
1661
|
-
|
|
1662
|
-
**6.** Start image processing. Logs will be displayed in Console.
|
|
1663
|
-
|
|
1664
|
-
#### Function callback
|
|
1665
|
-
|
|
1666
|
-
**1.** Import logging service from library.
|
|
1667
|
-
|
|
1668
|
-
```javascript
|
|
1669
|
-
import { Logger } from '@regulaforensics/vp-frontend-document-components';
|
|
1670
|
-
```
|
|
1671
|
-
|
|
1672
|
-
**2.** Set the callback function.
|
|
1673
|
-
|
|
1674
|
-
```javascript
|
|
1675
|
-
Logger.logListener = (log) => {
|
|
1676
|
-
// ...
|
|
1677
|
-
// do something with log
|
|
1678
|
-
// ...
|
|
1679
|
-
};
|
|
1680
|
-
```
|
|
1681
|
-
|
|
1682
|
-
**3.** Add the `log` setting to the `processParam` if you want to see logs from WASM:
|
|
1683
|
-
|
|
1684
|
-
```json
|
|
1685
|
-
{
|
|
1686
|
-
"processParam": {
|
|
1687
|
-
"log": true
|
|
1688
|
-
}
|
|
1689
|
-
}
|
|
1690
|
-
```
|
|
160
|
+
To discuss business opportunities, fill the <a target="_blank" href="https://explore.regula.app/docs-support-request">Enquiry Form</a> and specify your scenarios, applications, and technical requirements.
|