@regulaforensics/vp-frontend-document-components 7.5.1876-nightly → 7.5.1877-rc

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 (5) hide show
  1. package/README.md +123 -206
  2. package/dist/index.d.ts +12 -35
  3. package/dist/main.iife.js +674 -56
  4. package/dist/main.js +11682 -15936
  5. package/package.json +2 -4
package/README.md CHANGED
@@ -11,17 +11,14 @@
11
11
  * [Events](#events)
12
12
  * [Action Types](#action-types)
13
13
  * [Action Data](#action-data)
14
- * [Remote action data](#remote-action-data)
15
14
  * [Action Statuses](#action-statuses)
16
15
  * [Action Failure Reasons](#action-failure-reasons)
17
16
  * [Event Generation Logic](#event-generation-logic)
18
17
  * [Event Response](#event-response)
19
18
  * [Settings and Attributes](#settings-and-attributes)
20
19
  * [Backend reprocessing](#backend-reprocessing)
21
- * [Delegating scan to device with better camera](#delegating-scan-to-device-with-better-camera)
22
20
  * [Appearance Customization](#appearance-customization)
23
21
  * [Font and Colors](#font-and-colors)
24
- * [Inserting component in Flex and Grid layouts](#inserting-component-in-flex-and-grid-layouts)
25
22
  * [Localized Messages](#localized-messages)
26
23
  * [Document Reader Processor](#document-reader-processor)
27
24
  * [npm Processor Integration](#npm-processor-integration)
@@ -44,8 +41,8 @@ The Document Reader Web Components let you add document verification to your web
44
41
  * Capture a document from the device's camera
45
42
  * Process an uploaded image
46
43
  * Crop the image by document boundaries
47
- * Detect the presence of a machine-readable zone (MRZ), recognize it, and parse into text text fields
48
- * Read barcodes, and parse them into text fields
44
+ * Detect the presence of a machine-readable zone (MRZ)
45
+ * Recognize and return the values of MRZ text fields
49
46
 
50
47
  The Document Reader Web Components package contains:
51
48
 
@@ -235,14 +232,7 @@ After adding `DocumentReaderService` to the global variable, you can change the
235
232
  },
236
233
  };
237
234
  ```
238
-
239
- **Session ID** for video processing:
240
- ```javascript
241
- window.RegulaDocumentSDK.recognizerProcessParam = {
242
- tag: 'your session id',
243
- };
244
- ```
245
-
235
+
246
236
  **Image processing** default settings. The functionality is available via the gallery button.
247
237
  ```javascript
248
238
  window.RegulaDocumentSDK.imageProcessParam = {
@@ -334,29 +324,26 @@ The fields of the `event.detail` object:
334
324
 
335
325
  #### Action Types
336
326
 
337
- | Type of action | Description of the action | Components and events, where present |
338
- |:------------------------------|:------------------------------------------------------------------|:------------------------------------:|
339
- | `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot` |
340
- | `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
341
- | `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
342
- | `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot` |
343
- | `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
344
- | `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
345
- | `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
346
- | `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
347
- | `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
348
- | `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
349
- | `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot` |
350
- | `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
351
- | `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
352
- | `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
353
- | `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
354
- | `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
355
- | `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot` |
356
- | `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
357
- | `PRESS_REMOTE_DEVICE_BUTTON` | The "From other phone" button is pressed. | `document-reader` |
358
- | `REMOTE_TRANSACTION_UPLOADED` | Remote transaction with current tag was uploaded | `document-reader` |
359
- | `REMOTE_PROCESS_FINISHED` | Remote transaction with current tag was processed | `document-reader` |
327
+ | Type of action | Description of the action | Components and events, where present |
328
+ |:-----------------------------|:------------------------------------------------------------------|:------------------------------------:|
329
+ | `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot` |
330
+ | `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
331
+ | `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
332
+ | `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot` |
333
+ | `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
334
+ | `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
335
+ | `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
336
+ | `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
337
+ | `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
338
+ | `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
339
+ | `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot` |
340
+ | `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
341
+ | `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
342
+ | `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
343
+ | `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
344
+ | `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
345
+ | `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot` |
346
+ | `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
360
347
 
361
348
 
362
349
  #### Action Data
@@ -408,38 +395,21 @@ Available fields of `event.detail.data` object:
408
395
 
409
396
  #### Action Failure Reasons
410
397
 
411
- | Reason | Description of the reason |
412
- |:---------------------------|:-------------------------------------------------------|
413
- | `WASM_ERROR` | Error in WASM |
414
- | `WASM_LICENSE` | Missing or incorrect license |
415
- | `FILE_SIZE` | The file size is too large |
416
- | `INCORRECT_FILE` | Problems with reading the file |
417
- | `INCORRECT_SCENARIO` | Scenario is not supported |
418
- | `MISSING_SCENARIO` | Scenario is missing |
419
- | `UNKNOWN_ERROR` | Unknown error |
420
- | `NOT_SUPPORTED` | The browser is not supported |
421
- | `HTTP_NOT_SUPPORTED` | The web component does not work over the http protocol |
422
- | `INSECURE_PAGE_CONTEXT` | The web component does not work in insecure context |
423
- | `CAMERA_UNKNOWN_ERROR` | Unknown camera error |
424
- | `CAMERA_PERMISSION_DENIED` | Access to the camera is prohibited |
425
- | `NO_CAMERA` | There is no camera available |
426
- | `INCORRECT_CAMERA_ID` | Camera with this ID was not found |
427
- | `CONNECTION_ERROR` | Connection errors |
428
-
429
- #### Remote action data
430
-
431
- **1.** In case of remote scan scenario REMOTE_TRANSACTION_UPLOADED `event.detail` will contain the following data:
432
- ```javascript
433
- {
434
- action: EventActions.REMOTE_TRANSACTION_UPLOADED,
435
- data: {
436
- id: 1,
437
- state: 1,
438
- updatedAt: 'dateStr'
439
- },
440
- }
441
- ```
442
- Transaction id can be used to trigger reprocessing.
398
+ | Reason | Description of the reason |
399
+ |:---------------------------|:-----------------------------------|
400
+ | `WASM_ERROR` | Error in WASM |
401
+ | `WASM_LICENSE` | Missing or incorrect license |
402
+ | `FILE_SIZE` | The file size is too large |
403
+ | `INCORRECT_FILE` | Problems with reading the file |
404
+ | `INCORRECT_SCENARIO` | Scenario is not supported |
405
+ | `MISSING_SCENARIO` | Scenario is missing |
406
+ | `UNKNOWN_ERROR` | Unknown error |
407
+ | `NOT_SUPPORTED` | The browser is not supported |
408
+ | `CAMERA_UNKNOWN_ERROR` | Unknown camera error |
409
+ | `CAMERA_PERMISSION_DENIED` | Access to the camera is prohibited |
410
+ | `NO_CAMERA` | There is no camera available |
411
+ | `INCORRECT_CAMERA_ID` | Camera with this ID was not found |
412
+ | `CONNECTION_ERROR` | Connection errors |
443
413
 
444
414
  #### Event Generation Logic
445
415
 
@@ -934,50 +904,46 @@ This method gives more flexibility in setup, in addition, all new parameters in
934
904
 
935
905
  See all component's settings and attributes in the following table.
936
906
 
937
- | Setting name | Attribute name | Description | Data type | Default value | Values | Available in |
938
- |:------------------------------------------|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------:|:----------------------------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------:|
939
- | **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` |
940
- | **internalScenario** | **internal-scenario** | The component document verification scenario. | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` | `document-reader` |
941
- | **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` |
942
- | **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` |
943
- | **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` |
944
- | **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` |
945
- | **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` |
946
- | **regulaLogo** | **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
947
- | **changeCameraButton** | **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
948
- | **closeButton** | **close-button** | Show the close button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
949
- | **captureButton** | **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` | `document-reader` |
950
- | **skipButton** | | Show the skip button for the second page. | boolean | `true` | `true`, `false` | `document-reader` |
951
- | **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` |
952
- | **resolution** | | Sets the resolution of the video stream from the camera. | object | `{ width: 1920, height: 1080 }` | `{ width: number, height: number }` | `document-reader`, `camera-snapshot` |
953
- | **cameraMode** | | Selects the front or rear camera of the device. | object | `environment` | `environment`, `user` | `document-reader`, `camera-snapshot` |
954
- | **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` |
955
- | **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` |
956
- | **cameraFrameBorderWidth** | | Sets the thickness of the document capture frame. | number | 5 | `any number` | `document-reader` |
957
- | **backgroundMaskAlpha** | | Sets the transparency of the background outside the frame. | number | 0.5 | `from 0 to 1` | `document-reader` |
958
- | **cameraFrameLandscapeAspectRatio** | | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | `any number` | `document-reader` |
959
- | **cameraFramePortraitAspectRatio** | | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | `any number` | `document-reader` |
960
- | **statusIcon** | | Show status icon. | boolean | `true` | `true`, `false` | `document-reader` |
961
- | **statusPositionMultiplier** | | Sets the vertical position of the status message. | number | `undefined` | `from 0 to 2` | `document-reader` |
962
- | **cameraFrameOffsetWidth** | | Sets the offset of the capture frame. | number | `undefined` | `any number` | `document-reader` |
963
- | **cameraFrameVerticalPositionMultiplier** | | Sets the offset of the capture frame from the top edge. | number | `undefined` | `from 0 to 2` | `document-reader` |
964
- | **cameraFrameShapeType** | | Sets the capture frame shape type. | string | `line` | `line`, `corners` | `document-reader` |
965
- | **cameraFrameLineCap** | | Sets the style of the end of the capture frame line when `cameraFrameShapeType='corners'` | string | `butt` | `butt`, `round`, `square` | `document-reader` |
966
- | **cameraFrameLineLength** | | Sets the length of the capture frame line when `cameraFrameShapeType='corners'` | number | 5 | `any number` | `document-reader` |
967
- | **cameraFrameCornerRadius** | | Sets the radius of rounding of the capture frame. | number | 15 | `any number` | `document-reader` |
968
- | **cameraFrameDefaultColor** | | Sets the color of the capture frame. | string | `rgba(255, 255, 255, 0.9)` | `any color string` | `document-reader` |
969
- | **cameraFrameActiveColor** | | Sets the capture frame color when a document is detected. | string | `rgba(30, 130, 76, 0.9)` | `any color string` | `document-reader` |
970
- | **statusTextColor** | | Sets the color of the text message status. | string | `white` | `any color string` | `document-reader`, `camera-snapshot` |
971
- | **statusBackgroundColor** | | Sets the background color of the message status. | string | `rgba(27, 16, 31, 0.5)` | `any color string` | `document-reader`, `camera-snapshot` |
972
- | **cameraFrame** | | Show the capture frame. | boolean | `true` | `true`, `false` | `document-reader` |
973
- | **captureButtonDelay** | | Show the capture button after delay. | number | `undefined` | `any number` | `document-reader` |
974
- | **nonce** | | Sets the unique nonce value to maintain the CSP policy. | string | `undefined` | `unique nonce value` | `document-reader`, `camera-snapshot` |
975
- | **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` |
976
- | **videoCaptureMotionControl** | | Enables device shaking control. | boolean | `false` | `true`, `false` | `document-reader` |
977
- | **fromCameraButton** | | Show the camera button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
978
- | **uploadFileButton** | | Show the files button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
979
- | **mirrorButton** | | Show the mirroring button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
980
- | **mirrorType** | | Sets the initial value of video mirroring. | string | `mirror` - for front camera, `noMirror` - for back camera, | `mirror`, `noMirror` | `document-reader`, `camera-snapshot` |
907
+ | Setting name | Attribute name | Description | Data type | Default value | Values | Available in |
908
+ |:------------------------------------------|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------:|:-----------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------:|
909
+ | **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` |
910
+ | **internalScenario** | **internal-scenario** | The component document verification scenario. | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` | `document-reader` |
911
+ | **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` |
912
+ | **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` |
913
+ | **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` |
914
+ | **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` |
915
+ | **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` |
916
+ | **regulaLogo** | **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
917
+ | **changeCameraButton** | **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
918
+ | **closeButton** | **close-button** | Show the close button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
919
+ | **captureButton** | **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` | `document-reader` |
920
+ | **skipButton** | | Show the skip button for the second page. | boolean | `true` | `true`, `false` | `document-reader` |
921
+ | **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` |
922
+ | **resolution** | | Sets the resolution of the video stream from the camera. | object | `{ width: 1920, height: 1080 }` | `{ width: number, height: number }` | `document-reader`, `camera-snapshot` |
923
+ | **cameraMode** | | Selects the front or rear camera of the device. | object | `environment` | `environment`, `user` | `document-reader`, `camera-snapshot` |
924
+ | **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` |
925
+ | **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` |
926
+ | **cameraFrameBorderWidth** | | Sets the thickness of the document capture frame. | number | 5 | `any number` | `document-reader` |
927
+ | **backgroundMaskAlpha** | | Sets the transparency of the background outside the frame. | number | 0.5 | `from 0 to 1` | `document-reader` |
928
+ | **cameraFrameLandscapeAspectRatio** | | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | `any number` | `document-reader` |
929
+ | **cameraFramePortraitAspectRatio** | | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | `any number` | `document-reader` |
930
+ | **statusIcon** | | Show status icon. | boolean | `true` | `true`, `false` | `document-reader` |
931
+ | **statusPositionMultiplier** | | Sets the vertical position of the status message. | number | `undefined` | `from 0 to 2` | `document-reader` |
932
+ | **cameraFrameOffsetWidth** | | Sets the offset of the capture frame. | number | `undefined` | `any number` | `document-reader` |
933
+ | **cameraFrameVerticalPositionMultiplier** | | Sets the offset of the capture frame from the top edge. | number | `undefined` | `from 0 to 2` | `document-reader` |
934
+ | **cameraFrameShapeType** | | Sets the capture frame shape type. | string | `line` | `line`, `corners` | `document-reader` |
935
+ | **cameraFrameLineCap** | | Sets the style of the end of the capture frame line when `cameraFrameShapeType='corners'` | string | `butt` | `butt`, `round`, `square` | `document-reader` |
936
+ | **cameraFrameLineLength** | | Sets the length of the capture frame line when `cameraFrameShapeType='corners'` | number | 5 | `any number` | `document-reader` |
937
+ | **cameraFrameCornerRadius** | | Sets the radius of rounding of the capture frame. | number | 15 | `any number` | `document-reader` |
938
+ | **cameraFrameDefaultColor** | | Sets the color of the capture frame. | string | `rgba(255, 255, 255, 0.9)` | `any color string` | `document-reader` |
939
+ | **cameraFrameActiveColor** | | Sets the capture frame color when a document is detected. | string | `rgba(30, 130, 76, 0.9)` | `any color string` | `document-reader` |
940
+ | **statusTextColor** | | Sets the color of the text message status. | string | `white` | `any color string` | `document-reader`, `camera-snapshot` |
941
+ | **statusBackgroundColor** | | Sets the background color of the message status. | string | `rgba(27, 16, 31, 0.5)` | `any color string` | `document-reader`, `camera-snapshot` |
942
+ | **cameraFrame** | | Show the capture frame. | boolean | `true` | `true`, `false` | `document-reader` |
943
+ | **captureButtonDelay** | | Show the capture button after delay. | number | `undefined` | `any number` | `document-reader` |
944
+ | **nonce** | | Sets the unique nonce value to maintain the CSP policy. | string | `undefined` | `unique nonce value` | `document-reader`, `camera-snapshot` |
945
+ | **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` |
946
+ | **videoCaptureMotionControl** | | Enables device shaking control. | boolean | `false` | `true`, `false` | `document-reader` |
981
947
 
982
948
  ### Backend reprocessing
983
949
 
@@ -1010,41 +976,6 @@ function listener(event) {
1010
976
 
1011
977
  component.addEventListener('document-reader', listener);
1012
978
  ```
1013
- ### Delegating scan to device with better camera
1014
-
1015
- For cases when user's main device lacks camera or does not succeed to scan with given camera quality,
1016
- you have an option to delegate scanning to another available device (i.e. phone).
1017
-
1018
- #### 1. "From other phone" action may be configured on the start screen:
1019
- - configure [backend reprocessing](#backend-reprocessing)
1020
- - add 'delegateURL' and 'tag':
1021
- ```javascript
1022
- processor.recognizerProcessParam = {
1023
- delegateURL: 'https://your-page.com?tag={tag}', // the page which will be used by other device
1024
- tag: 123 // your session id, will be added to delegateURL in place of {tag} substring
1025
- }
1026
- ```
1027
- - these settings will unlock "From other phone" option
1028
- that shows the user QR Code with url (i.e. `https://your-page.com?tag=123`)
1029
- - the component will emit **REMOTE_TRANSACTION_UPLOADED** event with the most recent transaction uploaded with your session tag.
1030
- Transaction id may be used to trigger full process backend reprocessing (i.e use [Document Reader Webclient](https://www.npmjs.com/package/@regulaforensics/document-reader-webclient))
1031
- - the component will emit **REMOTE_PROCESS_FINISHED** event with a result of the most recent processed transaction.
1032
- It is similar to **PROCESS_FINISHED** event but may contain more data due to backend reprocessing
1033
-
1034
- #### 2. Configure Delegate page component on delegateURL:
1035
- - configure [backend reprocessing](#backend-reprocessing)
1036
- - use the same tag as on the main page
1037
- ```javascript
1038
- window.RegulaDocumentSDK.recognizerProcessParam = {
1039
- tag: 123 // your session id, i.e. it can be extracted from your delegate page URL
1040
- };
1041
-
1042
- element.settings = {
1043
- startScreen: false, // From camera recognition is expected
1044
- }
1045
- ```
1046
- - use finalizePackage() to send the data for further reprocessing
1047
-
1048
979
 
1049
980
  ### Appearance Customization
1050
981
 
@@ -1056,7 +987,7 @@ Using CSS variables, you can change the font and the main colors of the componen
1056
987
  |:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------:|
1057
988
  | **--font-family** | The font family of all text elements. If you change the font family, make sure to adjust the font size so the message on the start screen would fit the frame. | `Noto Sans, sans-serif` |
1058
989
  | **--font-size** | The font size for the text elements. | `16px` |
1059
- | **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | `#7E57C5` |
990
+ | **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | `#bd7dff` |
1060
991
  | **--hover-color** | Buttons hover color. | `#c994ff` |
1061
992
  | **--active-color** | Buttons active color. | `#bd7dff` |
1062
993
 
@@ -1076,19 +1007,6 @@ HTML:
1076
1007
  ```html
1077
1008
  <document-reader class="my-custom-style"></document-reader>
1078
1009
  ```
1079
- #### Inserting component in Flex and Grid layouts
1080
-
1081
- document-reader and camera-snapshot components have **width** and **height** set to **100%** by default and therefore try to fit their container element.
1082
- This should not affect correct CSS Grid positioning, but for Flexbox make sure to style document-reader dimensions and set **flex-basis**, i.e.:
1083
-
1084
- ```css
1085
- document-reader.flex-item {
1086
- width: auto;
1087
- height: auto;
1088
- flex-basis: 500px; // distinct width of your choice
1089
- }
1090
- ```
1091
-
1092
1010
 
1093
1011
  #### Localized Messages
1094
1012
 
@@ -1115,50 +1033,48 @@ body.append(element);
1115
1033
 
1116
1034
  See the following table with localized labels, used in the components.
1117
1035
 
1118
- | Label | Default message in `en` locale | Used in |
1119
- |:---------------------------------|:-------------------------------------------------------------------------------------------------------|:------------------------------------:|
1120
- | **done** | Done! | `document-reader`, `camera-snapshot` |
1121
- | **fileCorrupt** | This file is corrupt or not supported | `document-reader`, `camera-snapshot` |
1122
- | **somethingWentWrong** | Something went wrong | `document-reader`, `camera-snapshot` |
1123
- | **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
1124
- | **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
1125
- | **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
1126
- | **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
1127
- | **incorrectCameraId** | No camera with the specified ID found. | `document-reader`, `camera-snapshot` |
1128
- | **gallery** | Gallery | `document-reader`, `camera-snapshot` |
1129
- | **files** | Files | `document-reader`, `camera-snapshot` |
1130
- | **camera** | Camera | `document-reader`, `camera-snapshot` |
1131
- | **largeFile** | This file is too large to be uploaded | `document-reader` |
1132
- | **versionNotSupported** | Your browser version is not supported | `document-reader` |
1133
- | **httpNotSupported** | HTTPS is not used | `document-reader` |
1134
- | **insecurePageContext** | Insecure page context | `document-reader` |
1135
- | **timeout** | Timeout | `document-reader` |
1136
- | **preparingService** | Preparing the service... | `document-reader` |
1137
- | **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
1138
- | **noFocus** | No camera focus | `document-reader` |
1139
- | **moveCloser** | Move closer | `document-reader` |
1140
- | **glaresOnDocument** | Avoid glare on the document | `document-reader` |
1141
- | **holdDocumentStraight** | Hold the document straight | `document-reader` |
1142
- | **documentProcessing** | Document processing... | `document-reader` |
1143
- | **flipDocument** | Flip the document | `document-reader` |
1144
- | **keepDeviceStill** | Hold the device still | `document-reader` |
1145
- | **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
1146
- | **uploadPhoto** | Upload a photo | `camera-snapshot` |
1147
- | **scanQRCode** | Scan QR code | `document-reader` |
1148
- | **openPhoneCamera** | Open the camera on your mobile device, scan the QR code, and follow the link | `document-reader` |
1149
- | **pleaseWait** | Please wait... | `document-reader` |
1150
- | **mobileDevice** | Mobile device | `document-reader` |
1151
- | **verifyYourIdentity** | Verify your identity document | `document-reader` |
1152
- | **fromCameraFilesMobileDesktop** | Capture a document using the computer’s camera, or upload it from files, or scan it on a mobile device | `document-reader` |
1153
- | **fromCameraGalleryMobile** | Capture a document using the computer’s camera, or upload it from gallery | `document-reader` |
1154
- | **badLicense** | The license cannot be found or has expired | `document-reader` |
1155
- | **fromCameraFilesDesktop** | Capture a document using the computer’s camera, or upload it from files | `document-reader` |
1156
- | **fromCameraMobileDesktop** | Capture a document using the computer’s camera, or scan it on a mobile device | `document-reader` |
1157
- | **fromFilesMobileDesktop** | Upload a document from files, or scan it on a mobile device | `document-reader` |
1158
- | **fromCameraDesktop** | Use the computer's camera to capture a document | `document-reader` |
1159
- | **fromFilesDesktop** | Pick a document from the files and upload it | `document-reader` |
1160
- | **fromMobileDesktop** | Use your mobile camera to capture a document | `document-reader` |
1161
- | **fromGalleryMobile** | Pick a document from the gallery and upload it | `document-reader` |
1036
+ | Label | Default message in `en` locale | Used in |
1037
+ |:------------------------------|:---------------------------------------------------------------------------------------------|:------------------------------------:|
1038
+ | **success** | Success! | `document-reader`, `camera-snapshot` |
1039
+ | **fileCorrupt** | This file is corrupt or not supported | `document-reader`, `camera-snapshot` |
1040
+ | **selectAnotherFile** | Please select another file | `document-reader`, `camera-snapshot` |
1041
+ | **error** | Error! | `document-reader`, `camera-snapshot` |
1042
+ | **somethingWentWrong** | Something went wrong | `document-reader`, `camera-snapshot` |
1043
+ | **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
1044
+ | **fromCamera** | From camera | `document-reader`, `camera-snapshot` |
1045
+ | **fromGallery** | From gallery | `document-reader`, `camera-snapshot` |
1046
+ | **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
1047
+ | **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
1048
+ | **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
1049
+ | **incorrectCameraId** | No camera with the specified ID found. | `document-reader`, `camera-snapshot` |
1050
+ | **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | `document-reader`, `camera-snapshot` |
1051
+ | **cameraConnection** | Make sure the camera is connected correctly. | `document-reader`, `camera-snapshot` |
1052
+ | **checkCameraId** | Check if the specified camera ID is correct. | `document-reader`, `camera-snapshot` |
1053
+ | **scanIDInBrowser** | Scan an ID in your browser | `document-reader` |
1054
+ | **useYourDeviceCamera** | Use your device camera to scan a document or select a photo of the document from the gallery | `document-reader` |
1055
+ | **processingFinished** | Processing finished. | `document-reader` |
1056
+ | **largeFile** | This file is too large to be uploaded | `document-reader` |
1057
+ | **selectSmallerFile** | Please select a smaller file | `document-reader` |
1058
+ | **versionNotSupported** | Your browser version is not supported | `document-reader` |
1059
+ | **updateBrowser** | Update your browser version | `document-reader` |
1060
+ | **licenseError** | A license error has occurred | `document-reader` |
1061
+ | **licenseExpired** | The license cannot be found or has expired | `document-reader` |
1062
+ | **timeout** | Timeout | `document-reader` |
1063
+ | **processing** | Processing... | `document-reader` |
1064
+ | **preparingService** | Preparing the service... | `document-reader` |
1065
+ | **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
1066
+ | **noFocus** | No camera focus | `document-reader` |
1067
+ | **moveCloser** | Move closer | `document-reader` |
1068
+ | **glaresOnDocument** | Avoid glare on the document | `document-reader` |
1069
+ | **holdDocumentStraight** | Hold the document straight | `document-reader` |
1070
+ | **documentProcessing** | Document processing... | `document-reader` |
1071
+ | **flipDocument** | Flip the document | `document-reader` |
1072
+ | **verified** | Verified! | `document-reader` |
1073
+ | **keepDeviceStill** | Hold the device still | `document-reader` |
1074
+ | **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
1075
+ | **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
1076
+ | **uploadPhoto** | Upload a photo | `camera-snapshot` |
1077
+ | **useCameraOrGallery** | Use your device camera or select a photo from the gallery | `camera-snapshot` |
1162
1078
 
1163
1079
  ## Document Reader Processor
1164
1080
 
@@ -1493,7 +1409,8 @@ By default, these files are downloaded from Regula servers, but you can set your
1493
1409
 
1494
1410
  **1.** To download these files from our server to local machine, you can get the link in the `window.RegulaDocumentSDK.workerPath` field.
1495
1411
 
1496
- **2.** Upload all three files (`ProcMgr.worker.js`, `ProcMgr.wasm`, `ProcMgr.data`) to the location you specified. Also, change the address in `windows.RegulaDocumentSDK`.
1412
+ **2.** Then, in the `ProcMgr.worker.js` file, use the search to find `https://wasm.regulaforensics.com` and replace the full link with your custom URL.
1413
+ Upload all three files (`ProcMgr.worker.js`, `ProcMgr.wasm`, `ProcMgr.data`) to the location you specified. Also, change the address in `windows.RegulaDocumentSDK`.
1497
1414
 
1498
1415
  For Predefined UI Components:
1499
1416