@regulaforensics/vp-frontend-document-components 7.2.1576-nightly → 7.2.1578-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 +69 -397
- package/dist/main.js +1 -1
- package/dist/main.js.LICENSE.txt +0 -11
- package/esm/main.js +1 -1
- package/esm/main.js.LICENSE.txt +0 -11
- package/lib/index.d.ts +0 -66
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,11 +25,6 @@
|
|
|
25
25
|
* [CDN Processor Integration](#cdn-processor-integration)
|
|
26
26
|
* [Processor Methods](#processor-methods)
|
|
27
27
|
* [Processor Parameters](#processor-parameters)
|
|
28
|
-
* [Document Reader Controller](#document-reader-controller)
|
|
29
|
-
* [npm Controller Integration](#npm-controller-integration)
|
|
30
|
-
* [CDN Controller Integration](#cdn-controller-integration)
|
|
31
|
-
* [Controller Methods](#controller-methods)
|
|
32
|
-
* [Controller Parameters](#controller-parameters)
|
|
33
28
|
* [Package Resources](#package-resources)
|
|
34
29
|
* [Potential Problems](#potential-problems)
|
|
35
30
|
* [Examples](#examples)
|
|
@@ -54,11 +49,9 @@ The Document Reader Web Components package contains:
|
|
|
54
49
|
* [Predefined UI Components](#predefined-ui-components)
|
|
55
50
|
Document Reader UI Web Components with predefined view and behavior are designed for the fast integration of document recognition functionality into your project.
|
|
56
51
|
You can still customize most of the appearance and processing parameters before the launch if needed.
|
|
57
|
-
Examples of the UI Web Components are `document-reader` for documents recognition, `
|
|
52
|
+
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.
|
|
58
53
|
* [Processor](#document-reader-processor)
|
|
59
54
|
Document Reader Processor manages the document image recognition and other related operations, leaving implementation of UI to you.
|
|
60
|
-
* [Controller](#document-reader-controller)
|
|
61
|
-
Document Reader Controller serves as the proxy, delegating the entire processing to external service.
|
|
62
55
|
|
|
63
56
|
Current document acts as a quick start guide for operating Document Reader Web Components and as a reference to their main processing parameters.
|
|
64
57
|
|
|
@@ -105,7 +98,7 @@ import { defineComponents, DocumentReaderService } from './node_modules/@regulaf
|
|
|
105
98
|
|
|
106
99
|
**Step 3.** Define the components, depending on the functionality that you need.
|
|
107
100
|
|
|
108
|
-
If you need only the `camera-snapshot`
|
|
101
|
+
If you need only the `camera-snapshot` component, call the `defineComponents()` method without arguments:
|
|
109
102
|
```javascript
|
|
110
103
|
defineComponents();
|
|
111
104
|
```
|
|
@@ -142,11 +135,6 @@ For example:
|
|
|
142
135
|
<document-reader></document-reader>
|
|
143
136
|
```
|
|
144
137
|
|
|
145
|
-
`document-reader-device` is used for delegating the document recognition to Document Reader Web Service:
|
|
146
|
-
```html
|
|
147
|
-
<document-reader-device></document-reader-device>
|
|
148
|
-
```
|
|
149
|
-
|
|
150
138
|
`camera-snapshot` is used to capture images from the device's camera and to import from the gallery:
|
|
151
139
|
```html
|
|
152
140
|
<camera-snapshot></camera-snapshot>
|
|
@@ -167,7 +155,7 @@ For example:
|
|
|
167
155
|
|
|
168
156
|
**Step 2.** Define the components, depending on the functionality that you need.
|
|
169
157
|
|
|
170
|
-
If you need only the `camera-snapshot`
|
|
158
|
+
If you need only the `camera-snapshot` component:
|
|
171
159
|
```javascript
|
|
172
160
|
defineComponents();
|
|
173
161
|
```
|
|
@@ -289,15 +277,13 @@ After adding `DocumentReaderService` to the global variable, you can change the
|
|
|
289
277
|
The main idea of a subscription to different events is to detect the specific state changes of the concrete component.
|
|
290
278
|
For the convenience, the event has the same name as the component that it belongs to.
|
|
291
279
|
|
|
292
|
-
For example, the next code snippet adds the event listeners to `document-reader
|
|
280
|
+
For example, the next code snippet adds the event listeners to `document-reader` and `camera-snapshot` components:
|
|
293
281
|
|
|
294
282
|
```javascript
|
|
295
283
|
const documentReaderComponent = document.querySelector('document-reader');
|
|
296
|
-
const documentReaderComponent = document.querySelector('document-reader-device');
|
|
297
284
|
const cameraSnapshotComponent = document.querySelector('camera-snapshot');
|
|
298
285
|
|
|
299
286
|
documentReaderComponent.addEventListener('document-reader', (event) => console.log(event.detail));
|
|
300
|
-
documentReaderComponent.addEventListener('document-reader-device', (event) => console.log(event.detail));
|
|
301
287
|
cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.log(event.detail));
|
|
302
288
|
```
|
|
303
289
|
|
|
@@ -317,31 +303,26 @@ The fields of the `event.detail` object:
|
|
|
317
303
|
|
|
318
304
|
#### Action Types
|
|
319
305
|
|
|
320
|
-
| Type of action | Description of the action |
|
|
321
|
-
|
|
322
|
-
| `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot
|
|
323
|
-
| `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. |
|
|
324
|
-
| `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. |
|
|
325
|
-
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot
|
|
326
|
-
| `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. |
|
|
327
|
-
| `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. |
|
|
328
|
-
| `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. |
|
|
329
|
-
| `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. |
|
|
330
|
-
| `
|
|
331
|
-
| `
|
|
332
|
-
| `
|
|
333
|
-
| `
|
|
334
|
-
| `
|
|
335
|
-
| `
|
|
336
|
-
| `
|
|
337
|
-
| `
|
|
338
|
-
| `
|
|
339
|
-
| `
|
|
340
|
-
| `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
|
|
341
|
-
| `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
|
|
342
|
-
| `PROCESS_STARTED` | Document processing has started. | `document-reader-device` |
|
|
343
|
-
| `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot`, `document-reader-device` |
|
|
344
|
-
| `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
|
|
306
|
+
| Type of action | Description of the action | Components and events, where present |
|
|
307
|
+
|:-----------------------------|:------------------------------------------------------------------|:------------------------------------:|
|
|
308
|
+
| `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot` |
|
|
309
|
+
| `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
310
|
+
| `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
311
|
+
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
312
|
+
| `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
|
|
313
|
+
| `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
314
|
+
| `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
315
|
+
| `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
316
|
+
| `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
|
|
317
|
+
| `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
|
|
318
|
+
| `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
319
|
+
| `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
|
|
320
|
+
| `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
|
|
321
|
+
| `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
|
|
322
|
+
| `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
|
|
323
|
+
| `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
|
|
324
|
+
| `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot` |
|
|
325
|
+
| `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
|
|
345
326
|
|
|
346
327
|
|
|
347
328
|
#### Action Data
|
|
@@ -429,7 +410,7 @@ Event object `event.detail`
|
|
|
429
410
|
<td>Component is mounted in the DOM.</td>
|
|
430
411
|
<td>
|
|
431
412
|
|
|
432
|
-
`document-reader`, `camera-snapshot
|
|
413
|
+
`document-reader`, `camera-snapshot`
|
|
433
414
|
|
|
434
415
|
</td>
|
|
435
416
|
<td>
|
|
@@ -498,7 +479,7 @@ For example:
|
|
|
498
479
|
<td>"Retry" button is pressed.</td>
|
|
499
480
|
<td>
|
|
500
481
|
|
|
501
|
-
`document-reader`, `camera-snapshot
|
|
482
|
+
`document-reader`, `camera-snapshot`
|
|
502
483
|
|
|
503
484
|
</td>
|
|
504
485
|
<td>
|
|
@@ -592,86 +573,6 @@ This event available only in `document-reader`.
|
|
|
592
573
|
}
|
|
593
574
|
```
|
|
594
575
|
|
|
595
|
-
</td>
|
|
596
|
-
<td>
|
|
597
|
-
</td>
|
|
598
|
-
</tr>
|
|
599
|
-
<tr>
|
|
600
|
-
<td>"Connect" button is pressed.</td>
|
|
601
|
-
<td>
|
|
602
|
-
|
|
603
|
-
`document-reader-device`
|
|
604
|
-
|
|
605
|
-
</td>
|
|
606
|
-
<td>
|
|
607
|
-
|
|
608
|
-
```javascript
|
|
609
|
-
{
|
|
610
|
-
action: 'PRESS_CONNECT_BUTTON',
|
|
611
|
-
data: null,
|
|
612
|
-
}
|
|
613
|
-
```
|
|
614
|
-
|
|
615
|
-
</td>
|
|
616
|
-
<td>
|
|
617
|
-
</td>
|
|
618
|
-
</tr>
|
|
619
|
-
<tr>
|
|
620
|
-
<td>"Disconnect" button is pressed.</td>
|
|
621
|
-
<td>
|
|
622
|
-
|
|
623
|
-
`document-reader-device`
|
|
624
|
-
|
|
625
|
-
</td>
|
|
626
|
-
<td>
|
|
627
|
-
|
|
628
|
-
```javascript
|
|
629
|
-
{
|
|
630
|
-
action: 'PRESS_DISCONNECT_BUTTON',
|
|
631
|
-
data: null,
|
|
632
|
-
}
|
|
633
|
-
```
|
|
634
|
-
|
|
635
|
-
</td>
|
|
636
|
-
<td>
|
|
637
|
-
</td>
|
|
638
|
-
</tr>
|
|
639
|
-
<tr>
|
|
640
|
-
<td>"Auto scan" button is pressed.</td>
|
|
641
|
-
<td>
|
|
642
|
-
|
|
643
|
-
`document-reader-device`
|
|
644
|
-
|
|
645
|
-
</td>
|
|
646
|
-
<td>
|
|
647
|
-
|
|
648
|
-
```javascript
|
|
649
|
-
{
|
|
650
|
-
action: 'PRESS_AUTOSCAN_BUTTON',
|
|
651
|
-
data: null,
|
|
652
|
-
}
|
|
653
|
-
```
|
|
654
|
-
|
|
655
|
-
</td>
|
|
656
|
-
<td>
|
|
657
|
-
</td>
|
|
658
|
-
</tr>
|
|
659
|
-
<tr>
|
|
660
|
-
<td>The "Process" button is pressed.</td>
|
|
661
|
-
<td>
|
|
662
|
-
|
|
663
|
-
`document-reader-device`
|
|
664
|
-
|
|
665
|
-
</td>
|
|
666
|
-
<td>
|
|
667
|
-
|
|
668
|
-
```javascript
|
|
669
|
-
{
|
|
670
|
-
action: 'PRESS_PROCESS_BUTTON',
|
|
671
|
-
data: null,
|
|
672
|
-
}
|
|
673
|
-
```
|
|
674
|
-
|
|
675
576
|
</td>
|
|
676
577
|
<td>
|
|
677
578
|
</td>
|
|
@@ -726,7 +627,7 @@ This event available only in `document-reader`.
|
|
|
726
627
|
<td>"Close" button is pressed.</td>
|
|
727
628
|
<td>
|
|
728
629
|
|
|
729
|
-
`document-reader`, `camera-snapshot
|
|
630
|
+
`document-reader`, `camera-snapshot`
|
|
730
631
|
|
|
731
632
|
</td>
|
|
732
633
|
<td>
|
|
@@ -833,25 +734,6 @@ This event available only in `document-reader`.
|
|
|
833
734
|
}
|
|
834
735
|
```
|
|
835
736
|
|
|
836
|
-
</td>
|
|
837
|
-
<td></td>
|
|
838
|
-
</tr>
|
|
839
|
-
<tr>
|
|
840
|
-
<td>Document processing has started.</td>
|
|
841
|
-
<td>
|
|
842
|
-
|
|
843
|
-
`document-reader-device`
|
|
844
|
-
|
|
845
|
-
</td>
|
|
846
|
-
<td>
|
|
847
|
-
|
|
848
|
-
```javascript
|
|
849
|
-
{
|
|
850
|
-
action: 'PROCESS_STARTED',
|
|
851
|
-
data: null,
|
|
852
|
-
}
|
|
853
|
-
```
|
|
854
|
-
|
|
855
737
|
</td>
|
|
856
738
|
<td></td>
|
|
857
739
|
</tr>
|
|
@@ -859,7 +741,7 @@ This event available only in `document-reader`.
|
|
|
859
741
|
<td>The work of the component is completed successfully.</td>
|
|
860
742
|
<td>
|
|
861
743
|
|
|
862
|
-
`document-reader`, `camera-snapshot
|
|
744
|
+
`document-reader`, `camera-snapshot`
|
|
863
745
|
|
|
864
746
|
</td>
|
|
865
747
|
<td>
|
|
@@ -907,7 +789,7 @@ This event available only in `document-reader`.
|
|
|
907
789
|
<td>The work of the component failed.</td>
|
|
908
790
|
<td>
|
|
909
791
|
|
|
910
|
-
`document-reader`, `camera-snapshot
|
|
792
|
+
`document-reader`, `camera-snapshot`
|
|
911
793
|
|
|
912
794
|
</td>
|
|
913
795
|
<td>
|
|
@@ -1000,48 +882,46 @@ This method gives more flexibility in setup, in addition, all new parameters in
|
|
|
1000
882
|
|
|
1001
883
|
See all component's settings and attributes in the following table.
|
|
1002
884
|
|
|
1003
|
-
| Setting name | Attribute name | Description | Data type | Default value | Values |
|
|
1004
|
-
|
|
1005
|
-
| **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`, `
|
|
1006
|
-
| **internalScenario** | **internal-scenario** | The component document verification scenario. | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` |
|
|
1007
|
-
| **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` |
|
|
1008
|
-
| **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` |
|
|
1009
|
-
| **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` |
|
|
1010
|
-
| **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` |
|
|
1011
|
-
| **devLicense** | **license** | To use the component on test environments, set the base64 license value to the `license` attribute. | string | `undefined` | `base64 license value` |
|
|
1012
|
-
| **regulaLogo** | **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` |
|
|
1013
|
-
| **changeCameraButton** | **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` |
|
|
1014
|
-
| **closeButton** | **close-button** | Show the close button. | boolean | `true` | `true`, `false` |
|
|
1015
|
-
| **captureButton** | **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` |
|
|
1016
|
-
| **skipButton** | | Show the skip button for the second page. | boolean | `true` | `true`, `false` |
|
|
1017
|
-
| **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` |
|
|
1018
|
-
| **resolution** | | Sets the resolution of the video stream from the camera. | object | `{ width: 1920, height: 1080 }` | `{ width: number, height: number }` |
|
|
1019
|
-
| **cameraMode** | | Selects the front or rear camera of the device. | object | `environment` | `environment`, `user` |
|
|
1020
|
-
| **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` |
|
|
1021
|
-
| **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` |
|
|
1022
|
-
| **cameraFrameBorderWidth** | | Sets the thickness of the document capture frame. | number | 5 | `any number` |
|
|
1023
|
-
| **backgroundMaskAlpha** | | Sets the transparency of the background outside the frame. | number | 0.5 | `from 0 to 1` |
|
|
1024
|
-
| **cameraFrameLandscapeAspectRatio** | | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | `any number` |
|
|
1025
|
-
| **cameraFramePortraitAspectRatio** | | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | `any number` |
|
|
1026
|
-
| **statusIcon** | | Show status icon. | boolean | `true` | `true`, `false` |
|
|
1027
|
-
| **statusPositionMultiplier** | | Sets the vertical position of the status message. | number | `undefined` | `from 0 to 2` |
|
|
1028
|
-
| **cameraFrameOffsetWidth** | | Sets the offset of the capture frame. | number | `undefined` | `any number` |
|
|
1029
|
-
| **cameraFrameVerticalPositionMultiplier** | | Sets the offset of the capture frame from the top edge. | number | `undefined` | `from 0 to 2` |
|
|
1030
|
-
| **cameraFrameShapeType** | | Sets the capture frame shape type. | string | `line` | `line`, `corners` |
|
|
1031
|
-
| **cameraFrameLineCap** | | Sets the style of the end of the capture frame line when `cameraFrameShapeType='corners'` | string | `butt` | `butt`, `round`, `square` |
|
|
1032
|
-
| **cameraFrameLineLength** | | Sets the length of the capture frame line when `cameraFrameShapeType='corners'` | number | 5 | `any number` |
|
|
1033
|
-
| **cameraFrameCornerRadius** | | Sets the radius of rounding of the capture frame. | number | 15 | `any number` |
|
|
1034
|
-
| **cameraFrameDefaultColor** | | Sets the color of the capture frame. | string | `rgba(255, 255, 255, 0.9)` | `any color string` |
|
|
1035
|
-
| **cameraFrameActiveColor** | | Sets the capture frame color when a document is detected. | string | `rgba(30, 130, 76, 0.9)` | `any color string` |
|
|
1036
|
-
| **statusTextColor** | | Sets the color of the text message status. | string | `white` | `any color string` |
|
|
1037
|
-
| **statusBackgroundColor** | | Sets the background color of the message status. | string | `rgba(27, 16, 31, 0.5)` | `any color string` |
|
|
1038
|
-
| **cameraFrame** | | Show the capture frame. | boolean | `true` | `true`, `false` |
|
|
1039
|
-
| **captureButtonDelay** | | Show the capture button after delay. | number | `undefined` | `any number` |
|
|
1040
|
-
| **nonce** | | Sets the unique nonce value to maintain the CSP policy. | string | `undefined` | `unique nonce value` | `document-reader`, `
|
|
1041
|
-
| **
|
|
1042
|
-
| **
|
|
1043
|
-
| **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` |
|
|
1044
|
-
| **videoCaptureMotionControl** | | Enables device shaking control. | boolean | `false` | `true`, `false` | `document-reader` |
|
|
885
|
+
| Setting name | Attribute name | Description | Data type | Default value | Values | Available in |
|
|
886
|
+
|:------------------------------------------|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------:|:-----------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------:|
|
|
887
|
+
| **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` |
|
|
888
|
+
| **internalScenario** | **internal-scenario** | The component document verification scenario. | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` | `document-reader` |
|
|
889
|
+
| **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` |
|
|
890
|
+
| **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` |
|
|
891
|
+
| **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` |
|
|
892
|
+
| **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` |
|
|
893
|
+
| **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` |
|
|
894
|
+
| **regulaLogo** | **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
895
|
+
| **changeCameraButton** | **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
896
|
+
| **closeButton** | **close-button** | Show the close button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
897
|
+
| **captureButton** | **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
898
|
+
| **skipButton** | | Show the skip button for the second page. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
899
|
+
| **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` |
|
|
900
|
+
| **resolution** | | Sets the resolution of the video stream from the camera. | object | `{ width: 1920, height: 1080 }` | `{ width: number, height: number }` | `document-reader`, `camera-snapshot` |
|
|
901
|
+
| **cameraMode** | | Selects the front or rear camera of the device. | object | `environment` | `environment`, `user` | `document-reader`, `camera-snapshot` |
|
|
902
|
+
| **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` |
|
|
903
|
+
| **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` |
|
|
904
|
+
| **cameraFrameBorderWidth** | | Sets the thickness of the document capture frame. | number | 5 | `any number` | `document-reader` |
|
|
905
|
+
| **backgroundMaskAlpha** | | Sets the transparency of the background outside the frame. | number | 0.5 | `from 0 to 1` | `document-reader` |
|
|
906
|
+
| **cameraFrameLandscapeAspectRatio** | | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | `any number` | `document-reader` |
|
|
907
|
+
| **cameraFramePortraitAspectRatio** | | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | `any number` | `document-reader` |
|
|
908
|
+
| **statusIcon** | | Show status icon. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
909
|
+
| **statusPositionMultiplier** | | Sets the vertical position of the status message. | number | `undefined` | `from 0 to 2` | `document-reader` |
|
|
910
|
+
| **cameraFrameOffsetWidth** | | Sets the offset of the capture frame. | number | `undefined` | `any number` | `document-reader` |
|
|
911
|
+
| **cameraFrameVerticalPositionMultiplier** | | Sets the offset of the capture frame from the top edge. | number | `undefined` | `from 0 to 2` | `document-reader` |
|
|
912
|
+
| **cameraFrameShapeType** | | Sets the capture frame shape type. | string | `line` | `line`, `corners` | `document-reader` |
|
|
913
|
+
| **cameraFrameLineCap** | | Sets the style of the end of the capture frame line when `cameraFrameShapeType='corners'` | string | `butt` | `butt`, `round`, `square` | `document-reader` |
|
|
914
|
+
| **cameraFrameLineLength** | | Sets the length of the capture frame line when `cameraFrameShapeType='corners'` | number | 5 | `any number` | `document-reader` |
|
|
915
|
+
| **cameraFrameCornerRadius** | | Sets the radius of rounding of the capture frame. | number | 15 | `any number` | `document-reader` |
|
|
916
|
+
| **cameraFrameDefaultColor** | | Sets the color of the capture frame. | string | `rgba(255, 255, 255, 0.9)` | `any color string` | `document-reader` |
|
|
917
|
+
| **cameraFrameActiveColor** | | Sets the capture frame color when a document is detected. | string | `rgba(30, 130, 76, 0.9)` | `any color string` | `document-reader` |
|
|
918
|
+
| **statusTextColor** | | Sets the color of the text message status. | string | `white` | `any color string` | `document-reader`, `camera-snapshot` |
|
|
919
|
+
| **statusBackgroundColor** | | Sets the background color of the message status. | string | `rgba(27, 16, 31, 0.5)` | `any color string` | `document-reader`, `camera-snapshot` |
|
|
920
|
+
| **cameraFrame** | | Show the capture frame. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
921
|
+
| **captureButtonDelay** | | Show the capture button after delay. | number | `undefined` | `any number` | `document-reader` |
|
|
922
|
+
| **nonce** | | Sets the unique nonce value to maintain the CSP policy. | string | `undefined` | `unique nonce value` | `document-reader`, `camera-snapshot` |
|
|
923
|
+
| **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` |
|
|
924
|
+
| **videoCaptureMotionControl** | | Enables device shaking control. | boolean | `false` | `true`, `false` | `document-reader` |
|
|
1045
925
|
|
|
1046
926
|
### Backend reprocessing
|
|
1047
927
|
|
|
@@ -1172,12 +1052,6 @@ See the following table with localized labels, used in the components.
|
|
|
1172
1052
|
| **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
|
|
1173
1053
|
| **uploadPhoto** | Upload a photo | `camera-snapshot` |
|
|
1174
1054
|
| **useCameraOrGallery** | Use your device camera or select a photo from the gallery | `camera-snapshot` |
|
|
1175
|
-
| **process** | Process | `document-reader-device` |
|
|
1176
|
-
| **autoScan** | Auto scan | `document-reader-device` |
|
|
1177
|
-
| **disconnect** | Disconnect | `document-reader-device` |
|
|
1178
|
-
| **connect** | Connect | `document-reader-device` |
|
|
1179
|
-
| **service** | Service | `document-reader-device` |
|
|
1180
|
-
| **Device** | Device | `document-reader-device` |
|
|
1181
1055
|
|
|
1182
1056
|
## Document Reader Processor
|
|
1183
1057
|
|
|
@@ -1485,208 +1359,6 @@ Read-only property. `true` if document recognition is still in progress.
|
|
|
1485
1359
|
processor.isProcessing;
|
|
1486
1360
|
```
|
|
1487
1361
|
|
|
1488
|
-
## Document Reader Controller
|
|
1489
|
-
|
|
1490
|
-
DocumentReaderController serves as a proxy, delegating the entire processing to external Document Reader Web Service.
|
|
1491
|
-
The `document-reader-device` component is created on its basis.
|
|
1492
|
-
|
|
1493
|
-
### npm Controller Integration
|
|
1494
|
-
|
|
1495
|
-
**Step 1.** Install the package `@regulaforensics/vp-frontend-document-components`
|
|
1496
|
-
|
|
1497
|
-
```console
|
|
1498
|
-
npm i @regulaforensics/vp-frontend-document-components
|
|
1499
|
-
```
|
|
1500
|
-
|
|
1501
|
-
**Step 2.** Import the class `DocumentReaderController` into your `.js` file.
|
|
1502
|
-
|
|
1503
|
-
Using module bundler:
|
|
1504
|
-
```javascript
|
|
1505
|
-
import { DocumentReaderController } from '@regulaforensics/vp-frontend-document-components';
|
|
1506
|
-
```
|
|
1507
|
-
|
|
1508
|
-
Without module bundler:
|
|
1509
|
-
```javascript
|
|
1510
|
-
import { DocumentReaderController } from '/node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
|
|
1511
|
-
```
|
|
1512
|
-
|
|
1513
|
-
**Step 3.** Set the Document Reader Web Service URL and initialize the service:
|
|
1514
|
-
```javascript
|
|
1515
|
-
const service = new DocumentReaderController();
|
|
1516
|
-
|
|
1517
|
-
service.serviceUrl = 'SERVICE_URL';
|
|
1518
|
-
|
|
1519
|
-
await service.initRegulaReader();
|
|
1520
|
-
```
|
|
1521
|
-
|
|
1522
|
-
In the previous code fragment you need to replace `SERVICE_URL` placeholder with your actual service URL.
|
|
1523
|
-
|
|
1524
|
-
To get the processing results, you need to subscribe to the `OnProcessingFinished` event and use `getLastResults` method:
|
|
1525
|
-
|
|
1526
|
-
```javascript
|
|
1527
|
-
const responseListener = async () => {
|
|
1528
|
-
const response = await service.getLastResults();
|
|
1529
|
-
console.log(response);
|
|
1530
|
-
};
|
|
1531
|
-
|
|
1532
|
-
service.hubProxy?.on('OnProcessingFinished', responseListener);
|
|
1533
|
-
```
|
|
1534
|
-
|
|
1535
|
-
### CDN Controller Integration
|
|
1536
|
-
|
|
1537
|
-
**Step 1.** Connect the script to your `.html` file.
|
|
1538
|
-
|
|
1539
|
-
Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
|
|
1540
|
-
|
|
1541
|
-
For example:
|
|
1542
|
-
```html
|
|
1543
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
1544
|
-
```
|
|
1545
|
-
|
|
1546
|
-
**Note:** You can find all available script versions in corresponding section of npm, using the same link from the previous example.
|
|
1547
|
-
|
|
1548
|
-
**Step 2.** Set the Document Reader Web Service URL and initialize the service.
|
|
1549
|
-
|
|
1550
|
-
`DocumentReaderController` is available in the global variable `window.Regula`.
|
|
1551
|
-
See the following code snippet with example of `DocumentReaderController` initialization.
|
|
1552
|
-
|
|
1553
|
-
```javascript
|
|
1554
|
-
const { DocumentReaderController } = window.Regula;
|
|
1555
|
-
|
|
1556
|
-
const service = new DocumentReaderController();
|
|
1557
|
-
|
|
1558
|
-
service.serviceUrl = 'SERVICE_URL';
|
|
1559
|
-
|
|
1560
|
-
await service.initRegulaReader();
|
|
1561
|
-
```
|
|
1562
|
-
|
|
1563
|
-
To get the processing results, you need to subscribe to the `OnProcessingFinished` event and use `getLastResults` method:
|
|
1564
|
-
|
|
1565
|
-
```javascript
|
|
1566
|
-
const responseListener = async () => {
|
|
1567
|
-
const response = await service.getLastResults();
|
|
1568
|
-
console.log(response);
|
|
1569
|
-
};
|
|
1570
|
-
|
|
1571
|
-
service.hubProxy?.on('OnProcessingFinished', responseListener);
|
|
1572
|
-
```
|
|
1573
|
-
|
|
1574
|
-
### Controller Methods
|
|
1575
|
-
|
|
1576
|
-
#### initRegulaReader
|
|
1577
|
-
|
|
1578
|
-
Initializes the controller.
|
|
1579
|
-
|
|
1580
|
-
```javascript
|
|
1581
|
-
await service.initRegulaReader();
|
|
1582
|
-
```
|
|
1583
|
-
|
|
1584
|
-
#### getLastResults
|
|
1585
|
-
|
|
1586
|
-
Returns the last processing result.
|
|
1587
|
-
|
|
1588
|
-
```javascript
|
|
1589
|
-
const response = await service.getLastResults();
|
|
1590
|
-
```
|
|
1591
|
-
|
|
1592
|
-
#### getImages
|
|
1593
|
-
|
|
1594
|
-
Starts processing document manually.
|
|
1595
|
-
|
|
1596
|
-
```javascript
|
|
1597
|
-
await service.getImages();
|
|
1598
|
-
```
|
|
1599
|
-
|
|
1600
|
-
#### setProperty
|
|
1601
|
-
|
|
1602
|
-
Sets one specific device's property.
|
|
1603
|
-
|
|
1604
|
-
```javascript
|
|
1605
|
-
await service.setProperty('AutoScan', false);
|
|
1606
|
-
```
|
|
1607
|
-
|
|
1608
|
-
#### getProperty
|
|
1609
|
-
|
|
1610
|
-
Gets one specific device's property.
|
|
1611
|
-
|
|
1612
|
-
```javascript
|
|
1613
|
-
const property = await service.getProperty('AutoScan');
|
|
1614
|
-
```
|
|
1615
|
-
|
|
1616
|
-
#### getAvailableDevices(index)
|
|
1617
|
-
|
|
1618
|
-
Returns device name specified by `index` argument from the list of available devices.
|
|
1619
|
-
|
|
1620
|
-
```javascript
|
|
1621
|
-
const device = await service.getAvailableDevices(0);
|
|
1622
|
-
```
|
|
1623
|
-
|
|
1624
|
-
#### clearResults
|
|
1625
|
-
|
|
1626
|
-
Clears all previous scanning results.
|
|
1627
|
-
|
|
1628
|
-
```javascript
|
|
1629
|
-
await service.clearResults();
|
|
1630
|
-
```
|
|
1631
|
-
|
|
1632
|
-
#### healthCheck
|
|
1633
|
-
|
|
1634
|
-
Returns the device status.
|
|
1635
|
-
|
|
1636
|
-
```javascript
|
|
1637
|
-
const status = await service.healthCheck();
|
|
1638
|
-
```
|
|
1639
|
-
|
|
1640
|
-
#### disconnect
|
|
1641
|
-
|
|
1642
|
-
Disconnects from the service.
|
|
1643
|
-
|
|
1644
|
-
```javascript
|
|
1645
|
-
service.disconnect();
|
|
1646
|
-
```
|
|
1647
|
-
|
|
1648
|
-
### Controller Parameters
|
|
1649
|
-
|
|
1650
|
-
#### isInitialized
|
|
1651
|
-
|
|
1652
|
-
Read-only property. true` if the controller has been initialized.
|
|
1653
|
-
|
|
1654
|
-
```javascript
|
|
1655
|
-
service.isInitialized;
|
|
1656
|
-
```
|
|
1657
|
-
|
|
1658
|
-
#### serviceUrl
|
|
1659
|
-
|
|
1660
|
-
The Document Reader Web Service URL.
|
|
1661
|
-
|
|
1662
|
-
```javascript
|
|
1663
|
-
service.serviceUrl = 'https://service.com';
|
|
1664
|
-
```
|
|
1665
|
-
|
|
1666
|
-
#### hubProxy
|
|
1667
|
-
|
|
1668
|
-
The object for setting/unsetting Sets event listeners.
|
|
1669
|
-
|
|
1670
|
-
Example of subscribing to events:
|
|
1671
|
-
|
|
1672
|
-
```javascript
|
|
1673
|
-
const onStartListener = () => console.log('Process started');
|
|
1674
|
-
const onFinishListener = () => console.log('Process finished');
|
|
1675
|
-
|
|
1676
|
-
service.hubProxy?.on('OnProcessingStarted', onStartListener);
|
|
1677
|
-
service.hubProxy?.on('OnProcessingFinished', onFinishListener);
|
|
1678
|
-
```
|
|
1679
|
-
|
|
1680
|
-
Example of unsubscribing from events:
|
|
1681
|
-
|
|
1682
|
-
```javascript
|
|
1683
|
-
const onStartListener = () => console.log('Process started');
|
|
1684
|
-
const onFinishListener = () => console.log('Process finished');
|
|
1685
|
-
|
|
1686
|
-
service.hubProxy?.off('OnProcessingStarted', onStartListener);
|
|
1687
|
-
service.hubProxy?.off('OnProcessingFinished', onFinishListener);
|
|
1688
|
-
```
|
|
1689
|
-
|
|
1690
1362
|
## Package Resources
|
|
1691
1363
|
|
|
1692
1364
|
Document reader requires WASM (`ProcMgr.wasm`, `ProcMgr.data`) and worker (`ProcMgr.worker.js`) files to work.
|