@regulaforensics/vp-frontend-document-components 7.5.1871-rc → 7.5.1872-nightly

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +208 -123
  2. package/dist/index.d.ts +25 -6
  3. package/dist/main.iife.js +57 -675
  4. package/dist/main.js +16061 -11554
  5. package/package.json +4 -2
package/README.md CHANGED
@@ -11,14 +11,17 @@
11
11
  * [Events](#events)
12
12
  * [Action Types](#action-types)
13
13
  * [Action Data](#action-data)
14
+ * [Remote action data](#remote-action-data)
14
15
  * [Action Statuses](#action-statuses)
15
16
  * [Action Failure Reasons](#action-failure-reasons)
16
17
  * [Event Generation Logic](#event-generation-logic)
17
18
  * [Event Response](#event-response)
18
19
  * [Settings and Attributes](#settings-and-attributes)
19
20
  * [Backend reprocessing](#backend-reprocessing)
21
+ * [Delegating scan to device with better camera](#delegating-scan-to-device-with-better-camera)
20
22
  * [Appearance Customization](#appearance-customization)
21
23
  * [Font and Colors](#font-and-colors)
24
+ * [Inserting component in Flex and Grid layouts](#inserting-component-in-flex-and-grid-layouts)
22
25
  * [Localized Messages](#localized-messages)
23
26
  * [Document Reader Processor](#document-reader-processor)
24
27
  * [npm Processor Integration](#npm-processor-integration)
@@ -41,8 +44,8 @@ The Document Reader Web Components let you add document verification to your web
41
44
  * Capture a document from the device's camera
42
45
  * Process an uploaded image
43
46
  * Crop the image by document boundaries
44
- * Detect the presence of a machine-readable zone (MRZ)
45
- * Recognize and return the values of MRZ text fields
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
46
49
 
47
50
  The Document Reader Web Components package contains:
48
51
 
@@ -232,7 +235,14 @@ After adding `DocumentReaderService` to the global variable, you can change the
232
235
  },
233
236
  };
234
237
  ```
235
-
238
+
239
+ **Session ID** for video processing:
240
+ ```javascript
241
+ window.RegulaDocumentSDK.recognizerProcessParam = {
242
+ tag: 'your session id',
243
+ };
244
+ ```
245
+
236
246
  **Image processing** default settings. The functionality is available via the gallery button.
237
247
  ```javascript
238
248
  window.RegulaDocumentSDK.imageProcessParam = {
@@ -324,26 +334,29 @@ The fields of the `event.detail` object:
324
334
 
325
335
  #### Action Types
326
336
 
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` |
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` |
347
360
 
348
361
 
349
362
  #### Action Data
@@ -395,21 +408,38 @@ Available fields of `event.detail.data` object:
395
408
 
396
409
  #### Action Failure Reasons
397
410
 
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 |
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.
413
443
 
414
444
  #### Event Generation Logic
415
445
 
@@ -904,46 +934,48 @@ This method gives more flexibility in setup, in addition, all new parameters in
904
934
 
905
935
  See all component's settings and attributes in the following table.
906
936
 
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` |
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` |
947
979
 
948
980
  ### Backend reprocessing
949
981
 
@@ -976,6 +1008,41 @@ function listener(event) {
976
1008
 
977
1009
  component.addEventListener('document-reader', listener);
978
1010
  ```
1011
+ ### Delegating scan to device with better camera
1012
+
1013
+ For cases when user's main device lacks camera or does not succeed to scan with given camera quality,
1014
+ you have an option to delegate scanning to another available device (i.e. phone).
1015
+
1016
+ #### 1. "From other phone" action may be configured on the start screen:
1017
+ - configure [backend reprocessing](#backend-reprocessing)
1018
+ - add 'delegateURL' and 'tag':
1019
+ ```javascript
1020
+ processor.recognizerProcessParam = {
1021
+ delegateURL: 'https://your-page.com?tag={tag}', // the page which will be used by other device
1022
+ tag: 123 // your session id, will be added to delegateURL in place of {tag} substring
1023
+ }
1024
+ ```
1025
+ - these settings will unlock "From other phone" option
1026
+ that shows the user QR Code with url (i.e. `https://your-page.com?tag=123`)
1027
+ - the component will emit **REMOTE_TRANSACTION_UPLOADED** event with the most recent transaction uploaded with your session tag.
1028
+ 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))
1029
+ - the component will emit **REMOTE_PROCESS_FINISHED** event with a result of the most recent processed transaction.
1030
+ It is similar to **PROCESS_FINISHED** event but may contain more data due to backend reprocessing
1031
+
1032
+ #### 2. Configure Delegate page component on delegateURL:
1033
+ - configure [backend reprocessing](#backend-reprocessing)
1034
+ - use the same tag as on the main page
1035
+ ```javascript
1036
+ window.RegulaDocumentSDK.recognizerProcessParam = {
1037
+ tag: 123 // your session id, i.e. it can be extracted from your delegate page URL
1038
+ };
1039
+
1040
+ element.settings = {
1041
+ startScreen: false, // From camera recognition is expected
1042
+ }
1043
+ ```
1044
+ - use finalizePackage() to send the data for further reprocessing
1045
+
979
1046
 
980
1047
  ### Appearance Customization
981
1048
 
@@ -987,7 +1054,7 @@ Using CSS variables, you can change the font and the main colors of the componen
987
1054
  |:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------:|
988
1055
  | **--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` |
989
1056
  | **--font-size** | The font size for the text elements. | `16px` |
990
- | **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | `#bd7dff` |
1057
+ | **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | `#7E57C5` |
991
1058
  | **--hover-color** | Buttons hover color. | `#c994ff` |
992
1059
  | **--active-color** | Buttons active color. | `#bd7dff` |
993
1060
 
@@ -1007,6 +1074,19 @@ HTML:
1007
1074
  ```html
1008
1075
  <document-reader class="my-custom-style"></document-reader>
1009
1076
  ```
1077
+ #### Inserting component in Flex and Grid layouts
1078
+
1079
+ document-reader and camera-snapshot components have **width** and **height** set to **100%** by default and therefore try to fit their container element.
1080
+ This should not affect correct CSS Grid positioning, but for Flexbox make sure to style document-reader dimensions and set **flex-basis**, i.e.:
1081
+
1082
+ ```css
1083
+ document-reader.flex-item {
1084
+ width: auto;
1085
+ height: auto;
1086
+ flex-basis: 500px; // distinct width of your choice
1087
+ }
1088
+ ```
1089
+
1010
1090
 
1011
1091
  #### Localized Messages
1012
1092
 
@@ -1033,48 +1113,54 @@ body.append(element);
1033
1113
 
1034
1114
  See the following table with localized labels, used in the components.
1035
1115
 
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` |
1116
+ | Label | Default message in `en` locale | Used in |
1117
+ |:---------------------------------|:-------------------------------------------------------------------------------------------------------|:------------------------------------:|
1118
+ | **done** | Done! | `document-reader`, `camera-snapshot` |
1119
+ | **fileCorrupt** | This file is corrupt or not supported | `document-reader`, `camera-snapshot` |
1120
+ | **somethingWentWrong** | Something went wrong | `document-reader`, `camera-snapshot` |
1121
+ | **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
1122
+ | **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
1123
+ | **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
1124
+ | **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
1125
+ | **incorrectCameraId** | No camera with the specified ID found. | `document-reader`, `camera-snapshot` |
1126
+ | **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | `document-reader`, `camera-snapshot` |
1127
+ | **cameraConnection** | Make sure the camera is connected correctly. | `document-reader`, `camera-snapshot` |
1128
+ | **checkCameraId** | Check if the specified camera ID is correct. | `document-reader`, `camera-snapshot` |
1129
+ | **gallery** | Gallery | `document-reader`, `camera-snapshot` |
1130
+ | **files** | Files | `document-reader`, `camera-snapshot` |
1131
+ | **camera** | Camera | `document-reader`, `camera-snapshot` |
1132
+ | **largeFile** | This file is too large to be uploaded | `document-reader` |
1133
+ | **versionNotSupported** | Your browser version is not supported | `document-reader` |
1134
+ | **httpNotSupported** | HTTPS is not used | `document-reader` |
1135
+ | **insecurePageContext** | Insecure page context | `document-reader` |
1136
+ | **timeout** | Timeout | `document-reader` |
1137
+ | **processing** | Processing... | `document-reader` |
1138
+ | **preparingService** | Preparing the service... | `document-reader` |
1139
+ | **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
1140
+ | **noFocus** | No camera focus | `document-reader` |
1141
+ | **moveCloser** | Move closer | `document-reader` |
1142
+ | **glaresOnDocument** | Avoid glare on the document | `document-reader` |
1143
+ | **holdDocumentStraight** | Hold the document straight | `document-reader` |
1144
+ | **documentProcessing** | Document processing... | `document-reader` |
1145
+ | **flipDocument** | Flip the document | `document-reader` |
1146
+ | **keepDeviceStill** | Hold the device still | `document-reader` |
1147
+ | **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
1148
+ | **uploadPhoto** | Upload a photo | `camera-snapshot` |
1149
+ | **scanQRCode** | Scan QR code | `document-reader` |
1150
+ | **openPhoneCamera** | Open the camera on your mobile device, scan the QR code, and follow the link | `document-reader` |
1151
+ | **pleaseWait** | Please wait... | `document-reader` |
1152
+ | **mobileDevice** | Mobile device | `document-reader` |
1153
+ | **verifyYourIdentity** | Verify your identity document | `document-reader` |
1154
+ | **fromCameraFilesMobileDesktop** | Capture a document using the computer’s camera, or upload it from files, or scan it on a mobile device | `document-reader` |
1155
+ | **fromCameraGalleryMobile** | Capture a document using the computer’s camera, or upload it from gallery | `document-reader` |
1156
+ | **badLicense** | The license cannot be found or has expired | `document-reader` |
1157
+ | **fromCameraFilesDesktop** | Capture a document using the computer’s camera, or upload it from files | `document-reader` |
1158
+ | **fromCameraMobileDesktop** | Capture a document using the computer’s camera, or scan it on a mobile device | `document-reader` |
1159
+ | **fromFilesMobileDesktop** | Upload a document from files, or scan it on a mobile device | `document-reader` |
1160
+ | **fromCameraDesktop** | Use the computer's camera to capture a document | `document-reader` |
1161
+ | **fromFilesDesktop** | Pick a document from the files and upload it | `document-reader` |
1162
+ | **fromMobileDesktop** | Use your mobile camera to capture a document | `document-reader` |
1163
+ | **fromGalleryMobile** | Pick a document from the gallery and upload it | `document-reader` |
1078
1164
 
1079
1165
  ## Document Reader Processor
1080
1166
 
@@ -1409,8 +1495,7 @@ By default, these files are downloaded from Regula servers, but you can set your
1409
1495
 
1410
1496
  **1.** To download these files from our server to local machine, you can get the link in the `window.RegulaDocumentSDK.workerPath` field.
1411
1497
 
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`.
1498
+ **2.** Upload all three files (`ProcMgr.worker.js`, `ProcMgr.wasm`, `ProcMgr.data`) to the location you specified. Also, change the address in `windows.RegulaDocumentSDK`.
1414
1499
 
1415
1500
  For Predefined UI Components:
1416
1501