@regulaforensics/vp-frontend-document-components 2.6.1 → 7.2.1606

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 CHANGED
@@ -16,6 +16,7 @@
16
16
  * [Event Generation Logic](#event-generation-logic)
17
17
  * [Event Response](#event-response)
18
18
  * [Settings and Attributes](#settings-and-attributes)
19
+ * [Backend reprocessing](#backend-reprocessing)
19
20
  * [Appearance Customization](#appearance-customization)
20
21
  * [Font and Colors](#font-and-colors)
21
22
  * [Localized Messages](#localized-messages)
@@ -24,11 +25,6 @@
24
25
  * [CDN Processor Integration](#cdn-processor-integration)
25
26
  * [Processor Methods](#processor-methods)
26
27
  * [Processor Parameters](#processor-parameters)
27
- * [Document Reader Controller](#document-reader-controller)
28
- * [npm Controller Integration](#npm-controller-integration)
29
- * [CDN Controller Integration](#cdn-controller-integration)
30
- * [Controller Methods](#controller-methods)
31
- * [Controller Parameters](#controller-parameters)
32
28
  * [Package Resources](#package-resources)
33
29
  * [Potential Problems](#potential-problems)
34
30
  * [Examples](#examples)
@@ -53,11 +49,9 @@ The Document Reader Web Components package contains:
53
49
  * [Predefined UI Components](#predefined-ui-components)
54
50
  Document Reader UI Web Components with predefined view and behavior are designed for the fast integration of document recognition functionality into your project.
55
51
  You can still customize most of the appearance and processing parameters before the launch if needed.
56
- Examples of the UI Web Components are `document-reader` for documents recognition, `document-reader-device` for documents recognition with Document Reader Web Service,`camera-snapshot` for capturing images from a camera or uploading from a gallery.
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.
57
53
  * [Processor](#document-reader-processor)
58
54
  Document Reader Processor manages the document image recognition and other related operations, leaving implementation of UI to you.
59
- * [Controller](#document-reader-controller)
60
- Document Reader Controller serves as the proxy, delegating the entire processing to external service.
61
55
 
62
56
  Current document acts as a quick start guide for operating Document Reader Web Components and as a reference to their main processing parameters.
63
57
 
@@ -65,6 +59,7 @@ Current document acts as a quick start guide for operating Document Reader Web C
65
59
 
66
60
  Important notes:
67
61
 
62
+ * **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.
68
63
  * Document Reader Web Components and their methods strictly require the secure contexts, so using **HTTPS** protocol is a must.
69
64
  * The considered components are registered on the **web page itself**, so make sure to import the library to your website before adding any of the components to the web page code.
70
65
  * Only the modern browser versions are supported, see [compatibility](#compatibility). **Polyfills** are not included in the package by default.
@@ -103,7 +98,7 @@ import { defineComponents, DocumentReaderService } from './node_modules/@regulaf
103
98
 
104
99
  **Step 3.** Define the components, depending on the functionality that you need.
105
100
 
106
- If you need only the `camera-snapshot` or `document-reader-device` component, call the `defineComponents()` method without arguments:
101
+ If you need only the `camera-snapshot` component, call the `defineComponents()` method without arguments:
107
102
  ```javascript
108
103
  defineComponents();
109
104
  ```
@@ -116,7 +111,7 @@ window.RegulaDocumentSDK = new DocumentReaderService();
116
111
  ```
117
112
  **2.** Define the components and initialize the service:
118
113
 
119
- On **production environment** (with preinstalled license file):
114
+ On **production environment** (the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">domain name licensing</a> is used):
120
115
 
121
116
  ```javascript
122
117
  defineComponents().then(() => window.RegulaDocumentSDK.initialize());
@@ -140,11 +135,6 @@ For example:
140
135
  <document-reader></document-reader>
141
136
  ```
142
137
 
143
- `document-reader-device` is used for delegating the document recognition to Document Reader Web Service:
144
- ```html
145
- <document-reader-device></document-reader-device>
146
- ```
147
-
148
138
  `camera-snapshot` is used to capture images from the device's camera and to import from the gallery:
149
139
  ```html
150
140
  <camera-snapshot></camera-snapshot>
@@ -165,7 +155,7 @@ For example:
165
155
 
166
156
  **Step 2.** Define the components, depending on the functionality that you need.
167
157
 
168
- If you need only the `camera-snapshot` or `document-reader-device` component:
158
+ If you need only the `camera-snapshot` component:
169
159
  ```javascript
170
160
  defineComponents();
171
161
  ```
@@ -182,7 +172,7 @@ window.RegulaDocumentSDK = new DocumentReaderService();
182
172
  ```
183
173
  **3.** Define the components and initialize the service.
184
174
 
185
- On **production environment** (with preinstalled license file):
175
+ On **production environment** (the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">domain name licensing</a> is used):
186
176
  ```javascript
187
177
  defineComponents().then(() => window.RegulaDocumentSDK.initialize());
188
178
  ```
@@ -278,6 +268,7 @@ After adding `DocumentReaderService` to the global variable, you can change the
278
268
  | **forceReadMrzBeforeLocate** | When enabled, make sure that in series processing MRZ is located fully inside the result document image, if present on the document. Enabling this option may add extra processing time, by disabling optimizations, but allows more stability in output image quality. | boolean | `false` | `true`, `false` |
279
269
  | **parseBarcodes** | This option can be disabled to stop parsing after barcode is read. | boolean | `true` | `true`, `false` |
280
270
  | **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` |
271
+ | **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', ... } } |
281
272
 
282
273
  **Attention!** If the `multipage-processing` or `internal-scenario` attributes are set, the corresponding `multipageProcessing` and `scenario` parameters' values are ignored.
283
274
 
@@ -286,15 +277,13 @@ After adding `DocumentReaderService` to the global variable, you can change the
286
277
  The main idea of a subscription to different events is to detect the specific state changes of the concrete component.
287
278
  For the convenience, the event has the same name as the component that it belongs to.
288
279
 
289
- For example, the next code snippet adds the event listeners to `document-reader`, `document-reader-device`, and `camera-snapshot` components:
280
+ For example, the next code snippet adds the event listeners to `document-reader` and `camera-snapshot` components:
290
281
 
291
282
  ```javascript
292
283
  const documentReaderComponent = document.querySelector('document-reader');
293
- const documentReaderComponent = document.querySelector('document-reader-device');
294
284
  const cameraSnapshotComponent = document.querySelector('camera-snapshot');
295
285
 
296
286
  documentReaderComponent.addEventListener('document-reader', (event) => console.log(event.detail));
297
- documentReaderComponent.addEventListener('document-reader-device', (event) => console.log(event.detail));
298
287
  cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.log(event.detail));
299
288
  ```
300
289
 
@@ -314,31 +303,26 @@ The fields of the `event.detail` object:
314
303
 
315
304
  #### Action Types
316
305
 
317
- | Type of action | Description of the action | Components and events, where present |
318
- |:-----------------------------|:------------------------------------------------------------------|:--------------------------------------------------------------:|
319
- | `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot`, `document-reader-device` |
320
- | `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
321
- | `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
322
- | `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot`, `document-reader-device` |
323
- | `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
324
- | `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
325
- | `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
326
- | `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
327
- | `PRESS_CONNECT_BUTTON` | The "Connect" button is pressed. | `document-reader-device` |
328
- | `PRESS_DISCONNECT_BUTTON` | The "Disconnect" button is pressed. | `document-reader-device` |
329
- | `PRESS_AUTOSCAN_BUTTON` | The "Auto scan" button is pressed. | `document-reader-device` |
330
- | `PRESS_PROCESS_BUTTON` | The "Process" button is pressed. | `document-reader-device` |
331
- | `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
332
- | `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
333
- | `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot`, `document-reader-device` |
334
- | `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
335
- | `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
336
- | `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
337
- | `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
338
- | `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
339
- | `PROCESS_STARTED` | Document processing has started. | `document-reader-device` |
340
- | `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot`, `document-reader-device` |
341
- | `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
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` |
342
326
 
343
327
 
344
328
  #### Action Data
@@ -426,7 +410,7 @@ Event object `event.detail`
426
410
  <td>Component is mounted in the DOM.</td>
427
411
  <td>
428
412
 
429
- `document-reader`, `camera-snapshot`, `document-reader-device`
413
+ `document-reader`, `camera-snapshot`
430
414
 
431
415
  </td>
432
416
  <td>
@@ -495,7 +479,7 @@ For example:
495
479
  <td>"Retry" button is pressed.</td>
496
480
  <td>
497
481
 
498
- `document-reader`, `camera-snapshot`, `document-reader-device`
482
+ `document-reader`, `camera-snapshot`
499
483
 
500
484
  </td>
501
485
  <td>
@@ -589,86 +573,6 @@ This event available only in `document-reader`.
589
573
  }
590
574
  ```
591
575
 
592
- </td>
593
- <td>
594
- </td>
595
- </tr>
596
- <tr>
597
- <td>"Connect" button is pressed.</td>
598
- <td>
599
-
600
- `document-reader-device`
601
-
602
- </td>
603
- <td>
604
-
605
- ```javascript
606
- {
607
- action: 'PRESS_CONNECT_BUTTON',
608
- data: null,
609
- }
610
- ```
611
-
612
- </td>
613
- <td>
614
- </td>
615
- </tr>
616
- <tr>
617
- <td>"Disconnect" button is pressed.</td>
618
- <td>
619
-
620
- `document-reader-device`
621
-
622
- </td>
623
- <td>
624
-
625
- ```javascript
626
- {
627
- action: 'PRESS_DISCONNECT_BUTTON',
628
- data: null,
629
- }
630
- ```
631
-
632
- </td>
633
- <td>
634
- </td>
635
- </tr>
636
- <tr>
637
- <td>"Auto scan" button is pressed.</td>
638
- <td>
639
-
640
- `document-reader-device`
641
-
642
- </td>
643
- <td>
644
-
645
- ```javascript
646
- {
647
- action: 'PRESS_AUTOSCAN_BUTTON',
648
- data: null,
649
- }
650
- ```
651
-
652
- </td>
653
- <td>
654
- </td>
655
- </tr>
656
- <tr>
657
- <td>The "Process" button is pressed.</td>
658
- <td>
659
-
660
- `document-reader-device`
661
-
662
- </td>
663
- <td>
664
-
665
- ```javascript
666
- {
667
- action: 'PRESS_PROCESS_BUTTON',
668
- data: null,
669
- }
670
- ```
671
-
672
576
  </td>
673
577
  <td>
674
578
  </td>
@@ -723,7 +627,7 @@ This event available only in `document-reader`.
723
627
  <td>"Close" button is pressed.</td>
724
628
  <td>
725
629
 
726
- `document-reader`, `camera-snapshot`, `document-reader-device`
630
+ `document-reader`, `camera-snapshot`
727
631
 
728
632
  </td>
729
633
  <td>
@@ -830,25 +734,6 @@ This event available only in `document-reader`.
830
734
  }
831
735
  ```
832
736
 
833
- </td>
834
- <td></td>
835
- </tr>
836
- <tr>
837
- <td>Document processing has started.</td>
838
- <td>
839
-
840
- `document-reader-device`
841
-
842
- </td>
843
- <td>
844
-
845
- ```javascript
846
- {
847
- action: 'PROCESS_STARTED',
848
- data: null,
849
- }
850
- ```
851
-
852
737
  </td>
853
738
  <td></td>
854
739
  </tr>
@@ -856,7 +741,7 @@ This event available only in `document-reader`.
856
741
  <td>The work of the component is completed successfully.</td>
857
742
  <td>
858
743
 
859
- `document-reader`, `camera-snapshot`, `document-reader-device`
744
+ `document-reader`, `camera-snapshot`
860
745
 
861
746
  </td>
862
747
  <td>
@@ -904,7 +789,7 @@ This event available only in `document-reader`.
904
789
  <td>The work of the component failed.</td>
905
790
  <td>
906
791
 
907
- `document-reader`, `camera-snapshot`, `document-reader-device`
792
+ `document-reader`, `camera-snapshot`
908
793
 
909
794
  </td>
910
795
  <td>
@@ -997,48 +882,77 @@ This method gives more flexibility in setup, in addition, all new parameters in
997
882
 
998
883
  See all component's settings and attributes in the following table.
999
884
 
1000
- | Setting name | Attribute name | Description | Data type | Default value | Values | Available in |
1001
- |:------------------------------------------|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------:|:-----------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------------------------------------------------------------:|
1002
- | **locale** | **locale** | The language of the component interface. If empty, the language is selected from the browser settings, if it is not found, the system language is taken. | string | `en` | `ru`, `en`, `de`, `pl`, `it`, `hu`, `zh`, `sk`, `uk`, `fr`, `es`, `pt`, `ar`, `nl`, `id`, `vi`, `ko`, `ms`, `ro`, `el`, `tr`, `ja`, `cs`, `th`, `hi`, `bn`, `he`, `fi`, `sv`, `da`, `hr`, `no` | `document-reader`, `document-reader-device`, `camera-snapshot` |
1003
- | **internalScenario** | **internal-scenario** | The component document verification scenario. | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` | `document-reader` |
1004
- | **multipageProcessing** | **multipage-processing** | Whether to allow processing of two pages in cases when the component detects an ID1-sized document. Multipage processing is not triggered for documents of other formats. If `true`, the component asks for the second page and processes it. If `false`, only one page/side of the document is processed regardless the document format. | boolean | `false` | `true`, `false` | `document-reader` |
1005
- | **startScreen** | **start-screen** | Whether to show the start screen with two options for the document image uploading: From camera and From gallery. If `true`, the start screen is shown. If `false`, no start screen is shown and instead the camera of the device is turned on automatically to capture the image of the document. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
1006
- | **multipleFileInput** | **multiple** | Whether to allow uploading more than one file via the file system. Can be set to `true` only if `startScreen` is `true`. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
1007
- | **cameraId** | **camera-id** | Ability to select a camera. You can get the device ID using [navigator.mediaDevices.enumerateDevices()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices). | string | `undefined` | `camera id string value` | `document-reader`, `camera-snapshot` |
1008
- | **devLicense** | **license** | To use the component on test environments, set the base64 license value to the `license` attribute. | string | `undefined` | `base64 license value` | `document-reader` |
1009
- | **regulaLogo** | **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
1010
- | **changeCameraButton** | **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
1011
- | **closeButton** | **close-button** | Show the close button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
1012
- | **captureButton** | **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` | `document-reader` |
1013
- | **skipButton** | | Show the skip button for the second page. | boolean | `true` | `true`, `false` | `document-reader` |
1014
- | **captureMode** | | Sets the capture mode. Mode `auto` - recognition starts immediately after the camera starts working. Mode `captureFrame` - recognition of the frame received after pressing the capture button. Mode `captureVideo` - recognition begins after pressing the button, pressing the button again will send the received frame for processing. | string | `auto` | `auto`, `captureVideo`, `captureFrame` | `document-reader` |
1015
- | **resolution** | | Sets the resolution of the video stream from the camera. | object | `{ width: 1920, height: 1080 }` | `{ width: number, height: number }` | `document-reader`, `camera-snapshot` |
1016
- | **cameraMode** | | Selects the front or rear camera of the device. | object | `environment` | `environment`, `user` | `document-reader`, `camera-snapshot` |
1017
- | **flipFrontIcon** | | Sets the front side of the document flip icon. You can set link (`https://example.link.com/icon.png`), image in base64 string (`data:image/svg+xml;base64,PHN2ZyBjbGF...`) or imported image if you use module bundler. | string | `undefined` | `link to image`, `base64 string`, `imported image` | `document-reader` |
1018
- | **flipBackIcon** | | Sets the back side of the document flip icon. You can set link (`https://example.link.com/icon.png`), image in base64 string (`data:image/svg+xml;base64,PHN2ZyBjbGF...`) or imported image if you use module bundler. | string | `undefined` | `link to image`, `base64 string`, `imported image` | `document-reader` |
1019
- | **cameraFrameBorderWidth** | | Sets the thickness of the document capture frame. | number | 5 | `any number` | `document-reader` |
1020
- | **backgroundMaskAlpha** | | Sets the transparency of the background outside the frame. | number | 0.5 | `from 0 to 1` | `document-reader` |
1021
- | **cameraFrameLandscapeAspectRatio** | | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | `any number` | `document-reader` |
1022
- | **cameraFramePortraitAspectRatio** | | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | `any number` | `document-reader` |
1023
- | **statusIcon** | | Show status icon. | boolean | `true` | `true`, `false` | `document-reader` |
1024
- | **statusPositionMultiplier** | | Sets the vertical position of the status message. | number | `undefined` | `from 0 to 2` | `document-reader` |
1025
- | **cameraFrameOffsetWidth** | | Sets the offset of the capture frame. | number | `undefined` | `any number` | `document-reader` |
1026
- | **cameraFrameVerticalPositionMultiplier** | | Sets the offset of the capture frame from the top edge. | number | `undefined` | `from 0 to 2` | `document-reader` |
1027
- | **cameraFrameShapeType** | | Sets the capture frame shape type. | string | `line` | `line`, `corners` | `document-reader` |
1028
- | **cameraFrameLineCap** | | Sets the style of the end of the capture frame line when `cameraFrameShapeType='corners'` | string | `butt` | `butt`, `round`, `square` | `document-reader` |
1029
- | **cameraFrameLineLength** | | Sets the length of the capture frame line when `cameraFrameShapeType='corners'` | number | 5 | `any number` | `document-reader` |
1030
- | **cameraFrameCornerRadius** | | Sets the radius of rounding of the capture frame. | number | 15 | `any number` | `document-reader` |
1031
- | **cameraFrameDefaultColor** | | Sets the color of the capture frame. | string | `rgba(255, 255, 255, 0.9)` | `any color string` | `document-reader` |
1032
- | **cameraFrameActiveColor** | | Sets the capture frame color when a document is detected. | string | `rgba(30, 130, 76, 0.9)` | `any color string` | `document-reader` |
1033
- | **statusTextColor** | | Sets the color of the text message status. | string | `white` | `any color string` | `document-reader`, `camera-snapshot` |
1034
- | **statusBackgroundColor** | | Sets the background color of the message status. | string | `rgba(27, 16, 31, 0.5)` | `any color string` | `document-reader`, `camera-snapshot` |
1035
- | **cameraFrame** | | Show the capture frame. | boolean | `true` | `true`, `false` | `document-reader` |
1036
- | **captureButtonDelay** | | Show the capture button after delay. | number | `undefined` | `any number` | `document-reader` |
1037
- | **nonce** | | Sets the unique nonce value to maintain the CSP policy. | string | `undefined` | `unique nonce value` | `document-reader`, `document-reader-device`, `camera-snapshot` |
1038
- | **serviceUrl** | | Sets the address of the Regula Document Reader Web Service. | string | | `any URL` | `document-reader-device` |
1039
- | **properties** | | Sets an object with processing parameters. | object | `undefined` | `{ propertyName: 'value' }` | `document-reader-device` |
1040
- | **videoRecord** | | Sets the ability to record a video of the document scanning process. If set to true it records the entire process. You can also set the recording delay and recording duration. The video will be available in the component response. | boolean or object | `undefined` | `true`, `false`, `{ delay: number, duration: number }` | `document-reader` |
1041
- | **videoCaptureMotionControl** | | Enables device shaking control. | boolean | `false` | `true`, `false` | `document-reader` |
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` |
925
+
926
+ ### Backend reprocessing
927
+
928
+ You can send the results to the backend for further processing:
929
+
930
+ **1.** Set `backendProcessing`, `serviceURL` and `httpHeaders` (optional) in processParam:
931
+ ```javascript
932
+ window.RegulaDocumentSDK.recognizerProcessParam = {
933
+ processParam: {
934
+ backendProcessing: true,
935
+ serviceURL: 'YOUR_SERVICE_URL',
936
+ httpHeaders: { // you can set http headers if necessary
937
+ key1: 'header1',
938
+ key2: 'header2',
939
+ key3: 'header3'
940
+ }
941
+ },
942
+ };
943
+ ```
944
+ **2.** Send the data to the backend after receiving the processing results:
945
+ ```javascript
946
+ const component = document.querySelector('document-reader');
947
+
948
+ function listener(event) {
949
+ if (event.detail.action === 'PROCESS_FINISHED' && event.detail.data.status === 1) {
950
+ window.RegulaDocumentSDK.finalizePackage();
951
+ }
952
+ }
953
+
954
+ component.addEventListener('document-reader', listener);
955
+ ```
1042
956
 
1043
957
  ### Appearance Customization
1044
958
 
@@ -1125,7 +1039,6 @@ See the following table with localized labels, used in the components.
1125
1039
  | **timeout** | Timeout | `document-reader` |
1126
1040
  | **processing** | Processing... | `document-reader` |
1127
1041
  | **preparingService** | Preparing the service... | `document-reader` |
1128
- | **detectingDocument** | Detecting a document... | `document-reader` |
1129
1042
  | **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
1130
1043
  | **noFocus** | No camera focus | `document-reader` |
1131
1044
  | **moveCloser** | Move closer | `document-reader` |
@@ -1139,12 +1052,6 @@ See the following table with localized labels, used in the components.
1139
1052
  | **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
1140
1053
  | **uploadPhoto** | Upload a photo | `camera-snapshot` |
1141
1054
  | **useCameraOrGallery** | Use your device camera or select a photo from the gallery | `camera-snapshot` |
1142
- | **process** | Process | `document-reader-device` |
1143
- | **autoScan** | Auto scan | `document-reader-device` |
1144
- | **disconnect** | Disconnect | `document-reader-device` |
1145
- | **connect** | Connect | `document-reader-device` |
1146
- | **service** | Service | `document-reader-device` |
1147
- | **Device** | Device | `document-reader-device` |
1148
1055
 
1149
1056
  ## Document Reader Processor
1150
1057
 
@@ -1193,11 +1100,13 @@ try {
1193
1100
  ```
1194
1101
 
1195
1102
  In the preceding example, the `DocumentReaderProcessor` object is created using the HTML element with the ID `yourVideoElement`.
1196
- After that, `processor` needs to be initialized with the license. There are two licensing variants:
1103
+ After that, `processor` needs to be initialized. There are two licensing variants:
1197
1104
 
1198
- **1.** License file (for **production** environment).
1105
+ **1.** <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">Domain name licensing</a> (for **production** environment).
1199
1106
 
1200
- Get Regula license file, put it into the specific directory, and then asynchronously call the `initialize` method without parameters:
1107
+ To get your website domain licensed, <a href="https://explore.regula.app/docs-support-request" target="_blank">contact our sales team</a>.
1108
+
1109
+ Then asynchronously call the `initialize` method without parameters:
1201
1110
  ```javascript
1202
1111
  await processor.initialize();
1203
1112
  ```
@@ -1255,9 +1164,11 @@ For example:
1255
1164
  In the preceding example, the `DocumentReaderProcessor` object is created using the HTML element with ID `yourVideoElement`.
1256
1165
  After that, `processor` needs to be initialized with the license. There are two licensing variants:
1257
1166
 
1258
- **1.** License file (for **production** environment).
1167
+ **1.** <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing">Domain name licensing</a> (for **production** environment).
1168
+
1169
+ To get your website domain licensed, <a href="https://explore.regula.app/docs-support-request" target="_blank">contact our sales team</a>.
1259
1170
 
1260
- You need to get Regula license file, put it into the specific directory, and then asynchronously call `initialize` method without parameters:
1171
+ Then asynchronously call the `initialize` method without parameters:
1261
1172
  ```javascript
1262
1173
  await processor.initialize();
1263
1174
  ```
@@ -1278,7 +1189,7 @@ For more information about licensing, see the <a href="https://docs.regulaforens
1278
1189
 
1279
1190
  Initializes the DocumentReaderProcessor object. Accepts an object with a Base64 encoded license string.
1280
1191
 
1281
- **Note:** Base64 license string is applied only to test environments, production mode must use the binary license file.
1192
+ **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>.
1282
1193
 
1283
1194
  ```javascript
1284
1195
  await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
@@ -1448,208 +1359,6 @@ Read-only property. `true` if document recognition is still in progress.
1448
1359
  processor.isProcessing;
1449
1360
  ```
1450
1361
 
1451
- ## Document Reader Controller
1452
-
1453
- DocumentReaderController serves as a proxy, delegating the entire processing to external Document Reader Web Service.
1454
- The `document-reader-device` component is created on its basis.
1455
-
1456
- ### npm Controller Integration
1457
-
1458
- **Step 1.** Install the package `@regulaforensics/vp-frontend-document-components`
1459
-
1460
- ```console
1461
- npm i @regulaforensics/vp-frontend-document-components
1462
- ```
1463
-
1464
- **Step 2.** Import the class `DocumentReaderController` into your `.js` file.
1465
-
1466
- Using module bundler:
1467
- ```javascript
1468
- import { DocumentReaderController } from '@regulaforensics/vp-frontend-document-components';
1469
- ```
1470
-
1471
- Without module bundler:
1472
- ```javascript
1473
- import { DocumentReaderController } from '/node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
1474
- ```
1475
-
1476
- **Step 3.** Set the Document Reader Web Service URL and initialize the service:
1477
- ```javascript
1478
- const service = new DocumentReaderController();
1479
-
1480
- service.serviceUrl = 'SERVICE_URL';
1481
-
1482
- await service.initRegulaReader();
1483
- ```
1484
-
1485
- In the previous code fragment you need to replace `SERVICE_URL` placeholder with your actual service URL.
1486
-
1487
- To get the processing results, you need to subscribe to the `OnProcessingFinished` event and use `getLastResults` method:
1488
-
1489
- ```javascript
1490
- const responseListener = async () => {
1491
- const response = await service.getLastResults();
1492
- console.log(response);
1493
- };
1494
-
1495
- service.hubProxy?.on('OnProcessingFinished', responseListener);
1496
- ```
1497
-
1498
- ### CDN Controller Integration
1499
-
1500
- **Step 1.** Connect the script to your `.html` file.
1501
-
1502
- Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
1503
-
1504
- For example:
1505
- ```html
1506
- <script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
1507
- ```
1508
-
1509
- **Note:** You can find all available script versions in corresponding section of npm, using the same link from the previous example.
1510
-
1511
- **Step 2.** Set the Document Reader Web Service URL and initialize the service.
1512
-
1513
- `DocumentReaderController` is available in the global variable `window.Regula`.
1514
- See the following code snippet with example of `DocumentReaderController` initialization.
1515
-
1516
- ```javascript
1517
- const { DocumentReaderController } = window.Regula;
1518
-
1519
- const service = new DocumentReaderController();
1520
-
1521
- service.serviceUrl = 'SERVICE_URL';
1522
-
1523
- await service.initRegulaReader();
1524
- ```
1525
-
1526
- To get the processing results, you need to subscribe to the `OnProcessingFinished` event and use `getLastResults` method:
1527
-
1528
- ```javascript
1529
- const responseListener = async () => {
1530
- const response = await service.getLastResults();
1531
- console.log(response);
1532
- };
1533
-
1534
- service.hubProxy?.on('OnProcessingFinished', responseListener);
1535
- ```
1536
-
1537
- ### Controller Methods
1538
-
1539
- #### initRegulaReader
1540
-
1541
- Initializes the controller.
1542
-
1543
- ```javascript
1544
- await service.initRegulaReader();
1545
- ```
1546
-
1547
- #### getLastResults
1548
-
1549
- Returns the last processing result.
1550
-
1551
- ```javascript
1552
- const response = await service.getLastResults();
1553
- ```
1554
-
1555
- #### getImages
1556
-
1557
- Starts processing document manually.
1558
-
1559
- ```javascript
1560
- await service.getImages();
1561
- ```
1562
-
1563
- #### setProperty
1564
-
1565
- Sets one specific device's property.
1566
-
1567
- ```javascript
1568
- await service.setProperty('AutoScan', false);
1569
- ```
1570
-
1571
- #### getProperty
1572
-
1573
- Gets one specific device's property.
1574
-
1575
- ```javascript
1576
- const property = await service.getProperty('AutoScan');
1577
- ```
1578
-
1579
- #### getAvailableDevices(index)
1580
-
1581
- Returns device name specified by `index` argument from the list of available devices.
1582
-
1583
- ```javascript
1584
- const device = await service.getAvailableDevices(0);
1585
- ```
1586
-
1587
- #### clearResults
1588
-
1589
- Clears all previous scanning results.
1590
-
1591
- ```javascript
1592
- await service.clearResults();
1593
- ```
1594
-
1595
- #### healthCheck
1596
-
1597
- Returns the device status.
1598
-
1599
- ```javascript
1600
- const status = await service.healthCheck();
1601
- ```
1602
-
1603
- #### disconnect
1604
-
1605
- Disconnects from the service.
1606
-
1607
- ```javascript
1608
- service.disconnect();
1609
- ```
1610
-
1611
- ### Controller Parameters
1612
-
1613
- #### isInitialized
1614
-
1615
- Read-only property. true` if the controller has been initialized.
1616
-
1617
- ```javascript
1618
- service.isInitialized;
1619
- ```
1620
-
1621
- #### serviceUrl
1622
-
1623
- The Document Reader Web Service URL.
1624
-
1625
- ```javascript
1626
- service.serviceUrl = 'https://service.com';
1627
- ```
1628
-
1629
- #### hubProxy
1630
-
1631
- The object for setting/unsetting Sets event listeners.
1632
-
1633
- Example of subscribing to events:
1634
-
1635
- ```javascript
1636
- const onStartListener = () => console.log('Process started');
1637
- const onFinishListener = () => console.log('Process finished');
1638
-
1639
- service.hubProxy?.on('OnProcessingStarted', onStartListener);
1640
- service.hubProxy?.on('OnProcessingFinished', onFinishListener);
1641
- ```
1642
-
1643
- Example of unsubscribing from events:
1644
-
1645
- ```javascript
1646
- const onStartListener = () => console.log('Process started');
1647
- const onFinishListener = () => console.log('Process finished');
1648
-
1649
- service.hubProxy?.off('OnProcessingStarted', onStartListener);
1650
- service.hubProxy?.off('OnProcessingFinished', onFinishListener);
1651
- ```
1652
-
1653
1362
  ## Package Resources
1654
1363
 
1655
1364
  Document reader requires WASM (`ProcMgr.wasm`, `ProcMgr.data`) and worker (`ProcMgr.worker.js`) files to work.