@regulaforensics/vp-frontend-document-components 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +213 -36
  2. package/dist/main.js +1 -1
  3. package/esm/main.js +1 -1
  4. package/lib/common/Message.d.ts +2 -1
  5. package/lib/common/NoGlareIconLivenessDetection.d.ts +5 -0
  6. package/lib/common/NoSmilingIconLivenessDetection.d.ts +5 -0
  7. package/lib/common/PortraitOrientationOnlyIcon.d.ts +6 -0
  8. package/lib/common/RegulaLogoLivenessDetection.d.ts +5 -0
  9. package/lib/components/ButtonFaceLiveness.d.ts +7 -0
  10. package/lib/components/DocumentReaderLayout.d.ts +4 -6
  11. package/lib/components/FaceCapture.d.ts +15 -6
  12. package/lib/components/FaceFullScreenOverlay.d.ts +2 -3
  13. package/lib/components/FaceHintAnimaition.d.ts +16 -0
  14. package/lib/components/FaceLayout.d.ts +10 -5
  15. package/lib/components/InfoScreenFaceLiveness.d.ts +11 -0
  16. package/lib/components/InstructionVideoScreen.d.ts +9 -0
  17. package/lib/components/ProcessScreenFaceLiveness.d.ts +6 -0
  18. package/lib/components/RetryScreenFaceLiveness.d.ts +7 -0
  19. package/lib/components/SectorAnimationSvg.d.ts +11 -0
  20. package/lib/constants.d.ts +88 -11
  21. package/lib/contexts/DocumentAttributesContext.d.ts +5 -2
  22. package/lib/contexts/DocumentSDKContext.d.ts +3 -1
  23. package/lib/contexts/FaceAttributesContext.d.ts +6 -3
  24. package/lib/hoc/withLocalize.d.ts +5 -4
  25. package/lib/hooks/useDocumentReaderSeries.d.ts +2 -5
  26. package/lib/hooks/useFaceLiveness.d.ts +13 -3
  27. package/lib/hooks/useStateCallback.d.ts +1 -0
  28. package/lib/i18n/dictionaries/_dictionaries.d.ts +2212 -2052
  29. package/lib/index-document.d.ts +3 -4
  30. package/lib/media-resources/resourcesBase64.d.ts +7 -0
  31. package/lib/services/DebugService.d.ts +4 -0
  32. package/lib/services/DocumentReaderProcessor.d.ts +4 -3
  33. package/lib/services/DocumentReaderService.d.ts +2 -2
  34. package/lib/services/FaceLivenessService.d.ts +35 -16
  35. package/lib/services/FaceService.d.ts +31 -6
  36. package/lib/types.d.ts +132 -75
  37. package/lib/web-components/CameraSnapshot.d.ts +6 -3
  38. package/lib/web-components/DocumentReader.d.ts +6 -3
  39. package/lib/web-components/FaceDetection.d.ts +2 -3
  40. package/lib/web-components/FaceLiveness.d.ts +6 -4
  41. package/lib/web-components/FullScreenContainer.d.ts +1 -1
  42. package/package.json +6 -4
  43. package/lib/common/InstructionIconFaceDetection.d.ts +0 -5
  44. package/lib/common/InstructionIconFaceLiveness.d.ts +0 -5
  45. package/lib/common/NoGlareIcon.d.ts +0 -5
  46. package/lib/common/NoSmilingIcon.d.ts +0 -5
  47. package/lib/components/InstructionScreen.d.ts +0 -9
  48. package/lib/components/RetryScreen.d.ts +0 -7
package/README.md CHANGED
@@ -117,7 +117,7 @@ window.RegulaDocumentSDK.recognizerProcessParam = {
117
117
  returnUncroppedImage: true,
118
118
  scenario: 'MrzAndLocate',
119
119
  multipageProcessing: false,
120
- returnPackagesForReprocess: false,
120
+ returnPackageForReprocess: false,
121
121
  timeout: 20000,
122
122
  resultTypeOutput: [],
123
123
  imageQa: {
@@ -137,26 +137,51 @@ window.RegulaDocumentSDK.imageProcessParam = {
137
137
  processParam: {
138
138
  scenario: 'MrzAndLocate',
139
139
  returnUncroppedImage: true,
140
- returnPackagesForReprocess: false,
140
+ returnPackageForReprocess: false,
141
141
  },
142
142
  };
143
143
  ```
144
144
 
145
- ## Descriptions of settings
146
-
147
- | Setting | Info | Data type | Default value | Values |
148
- |:-------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
149
- | **returnUncroppedImage** | When enabled, returns input images in output. | boolean | ```true``` | ```true```, ```false``` |
150
- | **scenario** | Recognition scenario. | string | ```MrzAndLocate``` | ```'MrzAndLocate'```, ```'MrzOrLocate'```, ```'Mrz'```, ```'Locate'``` |
151
- | **multipageProcessing** | Enables multi-page document processing mode. | boolean | ```true``` | ```true```, ```false``` |
152
- | **timeout** | Recognition timeout in milliseconds. After this time process will be finished. | number | 2000 | numbers > 0 |
153
- | **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 |
154
- | **returnPackagesForReprocess** | Enable returning the package for reprocessing on the backend. | boolean | ```false``` | ```true```, ```false``` |
155
- | **imageQa** | When enabled, image quality checks status affects document optical and overall status. | | | |
156
- | **expectedPass** | Activated image quality checks. | string[] | ['dpiThreshold', 'glaresCheck', 'focusCheck'] | ```dpiThreshold```, ```glaresCheck```, ```focusCheck``` |
157
- | **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 |
158
- | **glaresCheck** | This option enables glares check while performing image quality validation. | boolean | ```true``` | ```true```, ```false``` |
159
- | **glaresCheckParams** | Settings for glare check. | | | |
145
+ #### Descriptions of settings
146
+
147
+ | Setting | Info | Data type | Default value | Values |
148
+ |:----------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
149
+ | **returnUncroppedImage** | When enabled, returns input images in output. | boolean | ```true``` | ```true```, ```false``` |
150
+ | **scenario** | Recognition scenario. | string | 'MrzAndLocate' | 'MrzAndLocate', 'MrzOrLocate', 'Mrz', 'Locate' |
151
+ | **multipageProcessing** | Enables multi-page document processing mode. | boolean | ```true``` | ```true```, ```false``` |
152
+ | **timeout** | Recognition timeout in milliseconds. After this time process will be finished. | number | 2000 | numbers > 0 |
153
+ | **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 |
154
+ | **returnPackageForReprocess** | Enable returning the package for reprocessing on the backend. | boolean | ```false``` | ```true```, ```false``` |
155
+ | **imageQa** | When enabled, image quality checks status affects document optical and overall status. | | | |
156
+ | **expectedPass** | Activated image quality checks. | string[] | ['dpiThreshold', 'glaresCheck', 'focusCheck'] | 'dpiThreshold', 'glaresCheck', 'focusCheck' |
157
+ | **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 |
158
+ | **glaresCheck** | This option enables glares check while performing image quality validation. | boolean | ```true``` | ```true```, ```false``` |
159
+ | **glaresCheckParams** | Settings for glare check. | | | |
160
+ | **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 |
161
+ | **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 |
162
+ | **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. It makes sense to use it for documents that have meaningful information on both pages, like Russian domestic passport, or some others. | boolean | ```false``` | ```true```, ```false``` |
163
+ | **generateDoublePageSpreadImage** | When enabled together with "doublePageSpread" and there is a passport with two pages spread in the image, pages will be cropped, straightened and aligned together, as if the document was captured on a flatbed scanner. | boolean | ```false``` | ```true```, ```false``` |
164
+ | **fieldTypesFilter** | List of text field types to extract. If empty, all text fields from template will be extracted. Narrowing the list can shorten processing time. | number[] | [] | |
165
+ | **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' |
166
+ | **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 |
167
+ | **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 |
168
+ | **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``` |
169
+ | **customParams** | This option allows passing custom processing parameters that can be implemented in future without changing API. | Object | {} | |
170
+ | **fastDocDetect** | 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``` |
171
+ | **updateOCRValidityByGlare** | When enabled, fail OCR field validity, if there is a glare over the text field on the image. | boolean | ```false``` | ```true```, ```false``` |
172
+ | **returnCroppedBarcode** | When enabled, returns cropped barcode images for unknown documents. | boolean | ```false``` | ```true```, ```false``` |
173
+ | **respectImageQuality** | When enabled, image quality checks status affects document optical and overall status. | boolean | ```false``` | ```true```, ```false``` |
174
+ | **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... |
175
+ | **noGraphics** | When enabled, no graphic fields will be cropped from document image. | boolean | ```false``` | ```true```, ```false``` |
176
+ | **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 |
177
+ | **depersonalizeLog** | When enabled, all personal data will be forcibly removed from the logs. | boolean | ```false``` | ```true```, ```false``` |
178
+ | **multiDocOnImage** | This option allows locating and cropping multiple documents from one image if enabled. | boolean | ```false``` | ```true```, ```false``` |
179
+ | **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 |
180
+ | **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 |
181
+ | **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 |
182
+ | **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``` |
183
+ | **parseBarcodes** | This option can be disabled to stop parsing after barcode is read. | boolean | ```true``` | ```true```, ```false``` |
184
+ | **splitNames** | When enabled, the Surname and GivenNames field will be divided into ft_First_Name, ft_Second_Name, ft_Third_Name, ft_Fourth_Name, ft_Last_Name fields. | boolean | ```false``` | ```true```, ```false``` |
160
185
 
161
186
  **Attention!** If the ```multipage-processing``` or ```internal-scenario``` attributes are set, the ```multipageProcessing``` and ```scenario``` settings will be ignored.
162
187
 
@@ -188,23 +213,25 @@ The generated event object (```event.detail```) contains three fields that descr
188
213
 
189
214
  Type of actions:
190
215
 
191
- | Type of action | Description of the action | In which component is present |
192
- |:--------------------------|:-------------------------------------:|:--------------------------------------------:|
193
- | ```ELEMENT_VISIBLE``` | Component is appended in the DOM. | ```document-reader```, ```camera-snapshot``` |
194
- | ```PRESS_CAMERA_BUTTON``` | The "From camera" button is pressed. | ```document-reader```, ```camera-snapshot``` |
195
- | ```PRESS_FILE_BUTTON``` | The "From gallery" button is pressed. | ```document-reader```, ```camera-snapshot``` |
196
- | ```PRESS_RETRY_BUTTON``` | The "Retry" button is pressed. | ```document-reader```, ```camera-snapshot``` |
197
- | ```PRESS_SKIP_BUTTON``` | The "Skip" button is pressed. | ```document-reader``` |
198
- | ```CLOSE``` | The "Close" button is pressed. | ```document-reader```, ```camera-snapshot``` |
199
- | ```PROCESS_FINISHED``` | The component has finished its work. | ```document-reader```, ```camera-snapshot``` |
200
- | ```SERVICE_INITIALIZED``` | The component has started its work. | ```document-reader``` |
216
+ | Type of action | Description of the action | In which component is present |
217
+ |:-----------------------------|:-----------------------------------------------------------------:|:--------------------------------------------:|
218
+ | ```ELEMENT_VISIBLE``` | Component is appended in the DOM. | ```document-reader```, ```camera-snapshot``` |
219
+ | ```PRESS_CAMERA_BUTTON``` | The "From camera" button is pressed. | ```document-reader```, ```camera-snapshot``` |
220
+ | ```PRESS_FILE_BUTTON``` | The "From gallery" button is pressed. | ```document-reader```, ```camera-snapshot``` |
221
+ | ```PRESS_RETRY_BUTTON``` | The "Retry" button is pressed. | ```document-reader```, ```camera-snapshot``` |
222
+ | ```PRESS_SKIP_BUTTON``` | The "Skip" button is pressed. | ```document-reader``` |
223
+ | ```CLOSE``` | The "Close" button is pressed. | ```document-reader```, ```camera-snapshot``` |
224
+ | ```CAMERA_PROCESS_STARTED``` | Recognition from the camera has started. | ```document-reader```, ```camera-snapshot``` |
225
+ | ```FILE_PROCESS_STARTED``` | File processing has started. | ```document-reader```, ```camera-snapshot``` |
226
+ | ```PROCESS_FINISHED``` | The component has finished its work. | ```document-reader```, ```camera-snapshot``` |
227
+ | ```SERVICE_INITIALIZED``` | The component has started its work. | ```document-reader``` |
201
228
 
202
229
  In cases of successful operation of the components, the ```data``` field will contain the following fields:
203
230
 
204
231
  ```javascript
205
232
  {
206
233
  response: { ... }, // component result
207
- status: 1 // 1 for successful work and 0 for unsuccessful
234
+ status: 1
208
235
  }
209
236
  ```
210
237
 
@@ -217,6 +244,14 @@ In cases of unsuccessful work, the ```data``` field will contain the following f
217
244
  }
218
245
  ```
219
246
 
247
+ Description of statuses:
248
+
249
+ | Status | Description of the status |
250
+ |:-------|:----------------------------------:|
251
+ | 0 | Process failed. |
252
+ | 1 | Process is completed successfully. |
253
+ | 2 | Process is completed by timeout. |
254
+
220
255
  Table of error causes:
221
256
 
222
257
  | Reason | Description of the reason |
@@ -399,6 +434,54 @@ For camera-snapshot:
399
434
  }
400
435
  ```
401
436
 
437
+ </td>
438
+ <td></td>
439
+ </tr>
440
+ <tr>
441
+ <td>Recognition from the camera has started.</td>
442
+ <td>
443
+
444
+ For document-reader:
445
+ ```document-reader```
446
+
447
+ For camera-snapshot:
448
+ ```camera-snapshot```
449
+
450
+ </td>
451
+ <td>
452
+
453
+ ```javascript
454
+ {
455
+ action: "CAMERA_PROCESS_STARTED",
456
+ data: null,
457
+ manual: true
458
+ }
459
+ ```
460
+
461
+ </td>
462
+ <td></td>
463
+ </tr>
464
+ <tr>
465
+ <td>File processing has started.</td>
466
+ <td>
467
+
468
+ For document-reader:
469
+ ```document-reader```
470
+
471
+ For camera-snapshot:
472
+ ```camera-snapshot```
473
+
474
+ </td>
475
+ <td>
476
+
477
+ ```javascript
478
+ {
479
+ action: "FILE_PROCESS_STARTED",
480
+ data: null,
481
+ manual: true
482
+ }
483
+ ```
484
+
402
485
  </td>
403
486
  <td></td>
404
487
  </tr>
@@ -430,6 +513,33 @@ For camera-snapshot:
430
513
  <td></td>
431
514
  </tr>
432
515
  <tr>
516
+ <td>The work of the component is completed by timeout.</td>
517
+ <td>
518
+
519
+ ```document-reader```
520
+
521
+ </td>
522
+ <td>
523
+
524
+ ```javascript
525
+ {
526
+ action: "PROCESS_FINISHED",
527
+ data: {
528
+ response: { ... },
529
+ status: 2
530
+ },
531
+ manual: false
532
+ }
533
+ ```
534
+
535
+ </td>
536
+ <td>
537
+
538
+ This event available only in ```document-reader```.
539
+
540
+ </td>
541
+ </tr>
542
+ <tr>
433
543
  <td>The work of the component failed.</td>
434
544
  <td>
435
545
 
@@ -508,7 +618,7 @@ component.addEventListener('document-reader', listener);
508
618
 
509
619
  | Attribute | Info | Data type | Default value | Values |
510
620
  |:-------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
511
- | **locale** | The language of the component interface. If empty, the language is selected from the browser settings, if it is not found, the system language is taken. | string | ```en``` | ```ru```, ```en```, ```de```, ```pl```, ```it```, ```hu```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
621
+ | **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``` |
512
622
  | **internal-scenario** | The component document verification scenario. For more details, see the [Web components documentation](https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/getting-started#processing-scenarios). | string | ```MrzAndLocate``` | ```MrzAndLocate```, ```MrzOrLocate```, ```Mrz```, ```Locate``` |
513
623
  | **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``` |
514
624
  | **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``` |
@@ -523,7 +633,7 @@ component.addEventListener('document-reader', listener);
523
633
 
524
634
  | Attribute | Info | Data type | Default value | Values |
525
635
  |:------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
526
- | **locale** | The language of the component interface. If empty, the language is selected from the browser settings, if it is not found, the system language is taken. | string | ```en``` | ```ru```, ```en```, ```de```, ```pl```, ```it```, ```hu```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
636
+ | **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``` |
527
637
  | **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``` |
528
638
  | **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``` |
529
639
  | **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``` |
@@ -533,15 +643,17 @@ component.addEventListener('document-reader', listener);
533
643
 
534
644
  ### Customization
535
645
 
646
+ #### Font and colors
647
+
536
648
  Using CSS variables, you can change the font and the main colors of the components.
537
649
 
538
650
  | Variable | Info | Default value |
539
651
  |:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------:|
540
652
  | **--font-family** | The font family of all text elements. If you change the font family, make sure to adjust the fond size so the message on the start screen would fit the frame. | ```Noto Sans, sans-serif``` |
541
653
  | **--font-size** | The font size for the text elements. | ```16px``` |
542
- | **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | ```#663399``` |
543
- | **--hover-color** | Buttons hover color. | ```#7c45b4``` |
544
- | **--active-color** | Buttons active color. | ```#663399``` |
654
+ | **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | ```#bd7dff``` |
655
+ | **--hover-color** | Buttons hover color. | ```#c994ff``` |
656
+ | **--active-color** | Buttons active color. | ```#bd7dff``` |
545
657
 
546
658
  For example:
547
659
 
@@ -560,6 +672,71 @@ HTML:
560
672
  <document-reader class="my-custom-style"></document-reader>
561
673
  ```
562
674
 
675
+ #### Messages
676
+
677
+ To change the standard component messages or any text, specify the language you are using (or add your own) and the label you want to change (you can see the list of available languages in the [attribute](#attributes) descriptions section, ```locale``` attribute):
678
+
679
+ ```javascript
680
+ const element = document.querySelector('document-reader');
681
+
682
+ element.translations = {
683
+ en: {
684
+ fromCamera: 'Use your camera',
685
+ },
686
+ };
687
+ ```
688
+
689
+ **Note**: to see the changes, don't forget to set the language you changed to the ```locale``` attribute.
690
+
691
+ ```html
692
+ <document-reader locale="en"></document-reader>
693
+ ```
694
+
695
+ List of labels used in the component:
696
+
697
+ | Label | Default message in ```en``` locale | Used in |
698
+ |:------------------------------|:---------------------------------------------------------------------------------------------|:--------------------------------------------:|
699
+ | **success** | Success! | ```document-reader```, ```camera-snapshot``` |
700
+ | **fileCorrupt** | This file is corrupt or not supported | ```document-reader```, ```camera-snapshot``` |
701
+ | **selectAnotherFile** | Please select another file | ```document-reader```, ```camera-snapshot``` |
702
+ | **error** | Error! | ```document-reader```, ```camera-snapshot``` |
703
+ | **somethingWentWrong** | Something went wrong | ```document-reader```, ```camera-snapshot``` |
704
+ | **tryAgain** | Try again | ```document-reader```, ```camera-snapshot``` |
705
+ | **fromCamera** | From camera | ```document-reader```, ```camera-snapshot``` |
706
+ | **fromGallery** | From gallery | ```document-reader```, ```camera-snapshot``` |
707
+ | **cameraUnavailable** | Camera unavailable! | ```document-reader```, ```camera-snapshot``` |
708
+ | **preparingCamera** | Preparing the camera... | ```document-reader```, ```camera-snapshot``` |
709
+ | **noCameraAvailable** | No camera available | ```document-reader```, ```camera-snapshot``` |
710
+ | **incorrectCameraId** | No camera with the specified ID found. | ```document-reader```, ```camera-snapshot``` |
711
+ | **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | ```document-reader```, ```camera-snapshot``` |
712
+ | **cameraConnection** | Make sure the camera is connected correctly. | ```document-reader```, ```camera-snapshot``` |
713
+ | **checkCameraId** | Check if the specified camera ID is correct. | ```document-reader```, ```camera-snapshot``` |
714
+ | **scanIDInBrowser** | Scan an ID in your browser | ```document-reader``` |
715
+ | **useYourDeviceCamera** | Use your device camera to scan a document or select a photo of the document from the gallery | ```document-reader``` |
716
+ | **processingFinished** | Processing finished. | ```document-reader``` |
717
+ | **largeFile** | This file is too large to be uploaded | ```document-reader``` |
718
+ | **selectSmallerFile** | Please select a smaller file | ```document-reader``` |
719
+ | **versionNotSupported** | Your browser version is not supported | ```document-reader``` |
720
+ | **updateBrowser** | Update your browser version | ```document-reader``` |
721
+ | **licenseError** | A license error has occurred | ```document-reader``` |
722
+ | **licenseExpired** | The license cannot be found or has expired | ```document-reader``` |
723
+ | **timeout** | Timeout | ```document-reader``` |
724
+ | **processing** | Processing... | ```document-reader``` |
725
+ | **preparingService** | Preparing the service... | ```document-reader``` |
726
+ | **detectingDocument** | Detecting a document... | ```document-reader``` |
727
+ | **placeDocumentIntoFrame** | Fit the document into the frame | ```document-reader``` |
728
+ | **noFocus** | No camera focus | ```document-reader``` |
729
+ | **moveCloser** | Move closer | ```document-reader``` |
730
+ | **glaresOnDocument** | Avoid glare on the document | ```document-reader``` |
731
+ | **holdDocumentStraight** | Hold the document straight | ```document-reader``` |
732
+ | **documentProcessing** | Document processing... | ```document-reader``` |
733
+ | **flipDocument** | Flip the document | ```document-reader``` |
734
+ | **verified** | Verified! | ```document-reader``` |
735
+ | **positionDocumentCenter** | Position the document in the center | ```camera-snapshot``` |
736
+ | **photoCapturedSuccessfully** | The photo is captured successfully. | ```camera-snapshot``` |
737
+ | **uploadPhoto** | Upload a photo | ```camera-snapshot``` |
738
+ | **useCameraOrGallery** | Use your device camera or select a photo from the gallery | ```camera-snapshot``` |
739
+
563
740
  ## Document reader SDK
564
741
 
565
742
  You can use the document-reader SDK to create your own UI interface.
@@ -705,7 +882,7 @@ Sets the video stream settings:
705
882
 
706
883
  ```javascript
707
884
  processor.streamParam = {
708
- cameraMode: 'user', // Camera facing mode. Can be 'environment' or 'user'. By default 'user'.
885
+ cameraMode: 'environment', // Camera facing mode. Can be 'environment' or 'user'. By default 'environment'.
709
886
  preferredCameraId: '', // Selecting a camera by ID. The camera ID can be obtained using navigator.mediaDevices.enumerateDevices();. Not set by default.
710
887
  resolution: { // Video resolution. By default 1280x720.
711
888
  width: 1280,
@@ -724,7 +901,7 @@ processor.recognizerProcessParam = {
724
901
  processParam: {
725
902
  scenario: 'MrzAndLocate',
726
903
  returnUncroppedImage: true,
727
- returnPackagesForReprocess: false,
904
+ returnPackageForReprocess: false,
728
905
  },
729
906
  };
730
907
  ```
@@ -740,7 +917,7 @@ processor.imageProcessParam = {
740
917
  processParam: {
741
918
  scenario: 'MrzAndLocate',
742
919
  returnUncroppedImage: true,
743
- returnPackagesForReprocess: false,
920
+ returnPackageForReprocess: false,
744
921
  },
745
922
  }
746
923
  ```