@regulaforensics/vp-frontend-document-components 7.4.1824-nightly → 7.4.1832-nightly
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +131 -65
- package/dist/index.d.ts +29 -4
- package/dist/main.iife.js +58 -674
- package/dist/main.js +16337 -11962
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -11,12 +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)
|
|
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)
|
|
22
24
|
* [Inserting component in Flex and Grid layouts](#inserting-component-in-flex-and-grid-layouts)
|
|
@@ -233,7 +235,14 @@ After adding `DocumentReaderService` to the global variable, you can change the
|
|
|
233
235
|
},
|
|
234
236
|
};
|
|
235
237
|
```
|
|
236
|
-
|
|
238
|
+
|
|
239
|
+
**Session ID** for video processing:
|
|
240
|
+
```javascript
|
|
241
|
+
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
242
|
+
tag: 'your session id',
|
|
243
|
+
};
|
|
244
|
+
```
|
|
245
|
+
|
|
237
246
|
**Image processing** default settings. The functionality is available via the gallery button.
|
|
238
247
|
```javascript
|
|
239
248
|
window.RegulaDocumentSDK.imageProcessParam = {
|
|
@@ -325,26 +334,29 @@ The fields of the `event.detail` object:
|
|
|
325
334
|
|
|
326
335
|
#### Action Types
|
|
327
336
|
|
|
328
|
-
| Type of action
|
|
329
|
-
|
|
330
|
-
| `ELEMENT_VISIBLE`
|
|
331
|
-
| `PRESS_CAMERA_BUTTON`
|
|
332
|
-
| `PRESS_FILE_BUTTON`
|
|
333
|
-
| `PRESS_RETRY_BUTTON`
|
|
334
|
-
| `PRESS_SKIP_BUTTON`
|
|
335
|
-
| `PRESS_CAPTURE_BUTTON`
|
|
336
|
-
| `PRESS_CHANGE_CAMERA_BUTTON`
|
|
337
|
-
| `PRESS_MIRRORING_BUTTON`
|
|
338
|
-
| `NEW_PAGE_AVAILABLE`
|
|
339
|
-
| `NEW_PAGE_STARTED`
|
|
340
|
-
| `CLOSE`
|
|
341
|
-
| `CAMERA_PROCESS_CLOSED`
|
|
342
|
-
| `CAMERA_PROCESS_STARTED`
|
|
343
|
-
| `VIDEO_STARTED`
|
|
344
|
-
| `VIDEO_STOPPED`
|
|
345
|
-
| `FILE_PROCESS_STARTED`
|
|
346
|
-
| `PROCESS_FINISHED`
|
|
347
|
-
| `SERVICE_INITIALIZED`
|
|
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` |
|
|
348
360
|
|
|
349
361
|
|
|
350
362
|
#### Action Data
|
|
@@ -414,6 +426,21 @@ Available fields of `event.detail.data` object:
|
|
|
414
426
|
| `INCORRECT_CAMERA_ID` | Camera with this ID was not found |
|
|
415
427
|
| `CONNECTION_ERROR` | Connection errors |
|
|
416
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.
|
|
443
|
+
|
|
417
444
|
#### Event Generation Logic
|
|
418
445
|
|
|
419
446
|
The cases of event generation are described in the following table.
|
|
@@ -979,6 +1006,41 @@ function listener(event) {
|
|
|
979
1006
|
|
|
980
1007
|
component.addEventListener('document-reader', listener);
|
|
981
1008
|
```
|
|
1009
|
+
### Delegating scan to device with better camera
|
|
1010
|
+
|
|
1011
|
+
For cases when user's main device lacks camera or does not succeed to scan with given camera quality,
|
|
1012
|
+
you have an option to delegate scanning to another available device (i.e. phone).
|
|
1013
|
+
|
|
1014
|
+
#### 1. "From other phone" action may be configured on the start screen:
|
|
1015
|
+
- configure [backend reprocessing](#backend-reprocessing)
|
|
1016
|
+
- add 'delegateURL' and 'tag':
|
|
1017
|
+
```javascript
|
|
1018
|
+
processor.recognizerProcessParam = {
|
|
1019
|
+
delegateURL: 'https://your-page.com?tag={tag}', // the page which will be used by other device
|
|
1020
|
+
tag: 123 // your session id, will be added to delegateURL in place of {tag} substring
|
|
1021
|
+
}
|
|
1022
|
+
```
|
|
1023
|
+
- these settings will unlock "From other phone" option
|
|
1024
|
+
that shows the user QR Code with url (i.e. `https://your-page.com?tag=123`)
|
|
1025
|
+
- the component will emit **REMOTE_TRANSACTION_UPLOADED** event with the most recent transaction uploaded with your session tag.
|
|
1026
|
+
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))
|
|
1027
|
+
- the component will emit **REMOTE_PROCESS_FINISHED** event with a result of the most recent processed transaction.
|
|
1028
|
+
It is similar to **PROCESS_FINISHED** event but may contain more data due to backend reprocessing
|
|
1029
|
+
|
|
1030
|
+
#### 2. Configure Delegate page component on delegateURL:
|
|
1031
|
+
- configure [backend reprocessing](#backend-reprocessing)
|
|
1032
|
+
- use the same tag as on the main page
|
|
1033
|
+
```javascript
|
|
1034
|
+
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
1035
|
+
tag: 123 // your session id, i.e. it can be extracted from your delegate page URL
|
|
1036
|
+
};
|
|
1037
|
+
|
|
1038
|
+
element.settings = {
|
|
1039
|
+
startScreen: false, // From camera recognition is expected
|
|
1040
|
+
}
|
|
1041
|
+
```
|
|
1042
|
+
- use finalizePackage() to send the data for further reprocessing
|
|
1043
|
+
|
|
982
1044
|
|
|
983
1045
|
### Appearance Customization
|
|
984
1046
|
|
|
@@ -1049,50 +1111,54 @@ body.append(element);
|
|
|
1049
1111
|
|
|
1050
1112
|
See the following table with localized labels, used in the components.
|
|
1051
1113
|
|
|
1052
|
-
| Label | Default message in `en` locale
|
|
1053
|
-
|
|
1054
|
-
| **success** | Success!
|
|
1055
|
-
| **fileCorrupt** | This file is corrupt or not supported
|
|
1056
|
-
| **selectAnotherFile** | Please select another file
|
|
1057
|
-
| **error** | Error!
|
|
1058
|
-
| **somethingWentWrong** | Something went wrong
|
|
1059
|
-
| **tryAgain** | Try again
|
|
1060
|
-
| **fromCamera** | From camera
|
|
1061
|
-
| **fromGallery** | From gallery
|
|
1062
|
-
| **
|
|
1063
|
-
| **
|
|
1064
|
-
| **
|
|
1065
|
-
| **
|
|
1066
|
-
| **
|
|
1067
|
-
| **
|
|
1068
|
-
| **
|
|
1069
|
-
| **
|
|
1070
|
-
| **
|
|
1071
|
-
| **
|
|
1072
|
-
| **
|
|
1073
|
-
| **
|
|
1074
|
-
| **
|
|
1075
|
-
| **
|
|
1076
|
-
| **
|
|
1077
|
-
| **
|
|
1078
|
-
| **
|
|
1079
|
-
| **
|
|
1080
|
-
| **
|
|
1081
|
-
| **
|
|
1082
|
-
| **
|
|
1083
|
-
| **
|
|
1084
|
-
| **
|
|
1085
|
-
| **
|
|
1086
|
-
| **
|
|
1087
|
-
| **
|
|
1088
|
-
| **
|
|
1089
|
-
| **
|
|
1090
|
-
| **
|
|
1091
|
-
| **
|
|
1092
|
-
| **
|
|
1093
|
-
| **
|
|
1094
|
-
| **
|
|
1095
|
-
| **
|
|
1114
|
+
| Label | Default message in `en` locale | Used in |
|
|
1115
|
+
|:------------------------------|:---------------------------------------------------------------------------------------------|:------------------------------------:|
|
|
1116
|
+
| **success** | Success! | `document-reader`, `camera-snapshot` |
|
|
1117
|
+
| **fileCorrupt** | This file is corrupt or not supported | `document-reader`, `camera-snapshot` |
|
|
1118
|
+
| **selectAnotherFile** | Please select another file | `document-reader`, `camera-snapshot` |
|
|
1119
|
+
| **error** | Error! | `document-reader`, `camera-snapshot` |
|
|
1120
|
+
| **somethingWentWrong** | Something went wrong | `document-reader`, `camera-snapshot` |
|
|
1121
|
+
| **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
|
|
1122
|
+
| **fromCamera** | From camera | `document-reader`, `camera-snapshot` |
|
|
1123
|
+
| **fromGallery** | From gallery | `document-reader`, `camera-snapshot` |
|
|
1124
|
+
| **fromOtherPhone** | From other phone | `document-reader`, `camera-snapshot` |
|
|
1125
|
+
| **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
|
|
1126
|
+
| **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
|
|
1127
|
+
| **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
|
|
1128
|
+
| **incorrectCameraId** | No camera with the specified ID found. | `document-reader`, `camera-snapshot` |
|
|
1129
|
+
| **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | `document-reader`, `camera-snapshot` |
|
|
1130
|
+
| **cameraConnection** | Make sure the camera is connected correctly. | `document-reader`, `camera-snapshot` |
|
|
1131
|
+
| **checkCameraId** | Check if the specified camera ID is correct. | `document-reader`, `camera-snapshot` |
|
|
1132
|
+
| **scanIDInBrowser** | Scan an ID in your browser | `document-reader` |
|
|
1133
|
+
| **useYourDeviceCamera** | Use your device camera to scan a document or select a photo of the document from the gallery | `document-reader` |
|
|
1134
|
+
| **processingFinished** | Processing finished. | `document-reader` |
|
|
1135
|
+
| **largeFile** | This file is too large to be uploaded | `document-reader` |
|
|
1136
|
+
| **selectSmallerFile** | Please select a smaller file | `document-reader` |
|
|
1137
|
+
| **versionNotSupported** | Your browser version is not supported | `document-reader` |
|
|
1138
|
+
| **httpNotSupported** | HTTPS is not used. | `document-reader` |
|
|
1139
|
+
| **insecurePageContext** | Insecure page context. | `document-reader` |
|
|
1140
|
+
| **updateBrowser** | Update your browser version | `document-reader` |
|
|
1141
|
+
| **licenseError** | A license error has occurred | `document-reader` |
|
|
1142
|
+
| **licenseExpired** | The license cannot be found or has expired | `document-reader` |
|
|
1143
|
+
| **timeout** | Timeout | `document-reader` |
|
|
1144
|
+
| **processing** | Processing... | `document-reader` |
|
|
1145
|
+
| **preparingService** | Preparing the service... | `document-reader` |
|
|
1146
|
+
| **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
|
|
1147
|
+
| **noFocus** | No camera focus | `document-reader` |
|
|
1148
|
+
| **moveCloser** | Move closer | `document-reader` |
|
|
1149
|
+
| **glaresOnDocument** | Avoid glare on the document | `document-reader` |
|
|
1150
|
+
| **holdDocumentStraight** | Hold the document straight | `document-reader` |
|
|
1151
|
+
| **documentProcessing** | Document processing... | `document-reader` |
|
|
1152
|
+
| **flipDocument** | Flip the document | `document-reader` |
|
|
1153
|
+
| **verified** | Verified! | `document-reader` |
|
|
1154
|
+
| **keepDeviceStill** | Hold the device still | `document-reader` |
|
|
1155
|
+
| **otherDeviceCardTitle** | Continue on your phone | `document-reader` |
|
|
1156
|
+
| **otherDeviceCardSubtitle** | The camera quality on the phone is better | `document-reader` |
|
|
1157
|
+
| **otherDeviceCardNote** | Scan QR on your phone | `document-reader` |
|
|
1158
|
+
| **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
|
|
1159
|
+
| **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
|
|
1160
|
+
| **uploadPhoto** | Upload a photo | `camera-snapshot` |
|
|
1161
|
+
| **useCameraOrGallery** | Use your device camera or select a photo from the gallery | `camera-snapshot` |
|
|
1096
1162
|
|
|
1097
1163
|
## Document Reader Processor
|
|
1098
1164
|
|
package/dist/index.d.ts
CHANGED
|
@@ -27,7 +27,7 @@ declare enum CameraSnapshotAttributes {
|
|
|
27
27
|
closeButton = "close-button"
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
export declare type CameraSnapshotDetailType = DetailEvent<EventActions, CameraSnapshotResponseType>;
|
|
30
|
+
export declare type CameraSnapshotDetailType = DetailEvent<Exclude<EventActions, EventActions.REMOTE_TRANSACTION_UPLOADED>, CameraSnapshotResponseType>;
|
|
31
31
|
|
|
32
32
|
export declare type CameraSnapshotResponseType = Array<{
|
|
33
33
|
raw: string;
|
|
@@ -118,7 +118,7 @@ export declare class DocumentReaderCaptureWebComponent extends HTMLElement {
|
|
|
118
118
|
disconnectedCallback(): void;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
export declare type DocumentReaderDetailType = DetailEvent<EventActions, DocumentReaderResponseType>;
|
|
121
|
+
export declare type DocumentReaderDetailType = DetailEvent<Exclude<EventActions, EventActions.REMOTE_TRANSACTION_UPLOADED>, DocumentReaderResponseType>;
|
|
122
122
|
|
|
123
123
|
export declare interface DocumentReaderImage {
|
|
124
124
|
data: string;
|
|
@@ -386,6 +386,7 @@ export declare enum EventActions {
|
|
|
386
386
|
PRESS_SKIP_BUTTON = "PRESS_SKIP_BUTTON",
|
|
387
387
|
PRESS_CAPTURE_BUTTON = "PRESS_CAPTURE_BUTTON",
|
|
388
388
|
PRESS_CHANGE_CAMERA_BUTTON = "PRESS_CHANGE_CAMERA_BUTTON",
|
|
389
|
+
PRESS_REMOTE_DEVICE_BUTTON = "PRESS_REMOTE_DEVICE_BUTTON",
|
|
389
390
|
PRESS_MIRRORING_BUTTON = "PRESS_MIRRORING_BUTTON",
|
|
390
391
|
PRESS_CONNECT_BUTTON = "PRESS_CONNECT_BUTTON",
|
|
391
392
|
PRESS_DISCONNECT_BUTTON = "PRESS_DISCONNECT_BUTTON",
|
|
@@ -401,7 +402,9 @@ export declare enum EventActions {
|
|
|
401
402
|
FILE_PROCESS_STARTED = "FILE_PROCESS_STARTED",
|
|
402
403
|
PROCESS_STARTED = "PROCESS_STARTED",
|
|
403
404
|
PROCESS_FINISHED = "PROCESS_FINISHED",
|
|
404
|
-
SERVICE_INITIALIZED = "SERVICE_INITIALIZED"
|
|
405
|
+
SERVICE_INITIALIZED = "SERVICE_INITIALIZED",
|
|
406
|
+
REMOTE_TRANSACTION_UPLOADED = "REMOTE_TRANSACTION_UPLOADED",
|
|
407
|
+
REMOTE_PROCESS_FINISHED = "REMOTE_PROCESS_FINISHED"
|
|
405
408
|
}
|
|
406
409
|
|
|
407
410
|
export declare enum FrameLineCap {
|
|
@@ -509,6 +512,7 @@ export declare interface PackageParams {
|
|
|
509
512
|
|
|
510
513
|
export declare interface ProcessingRequest extends BaseRequest {
|
|
511
514
|
metadata?: Record<string, any>;
|
|
515
|
+
delegateURL?: string;
|
|
512
516
|
processParam: DocumentReaderProcessParam;
|
|
513
517
|
imagesList?: Array<DocumentReaderImage>;
|
|
514
518
|
imageInputParam?: ImageInputParamType;
|
|
@@ -545,11 +549,32 @@ declare type TProcessingListener = ({ isProcessing }: {
|
|
|
545
549
|
isProcessing: boolean;
|
|
546
550
|
}) => void;
|
|
547
551
|
|
|
552
|
+
export declare interface TransactionEvent {
|
|
553
|
+
action: EventActions.REMOTE_TRANSACTION_UPLOADED;
|
|
554
|
+
data: TransactionStatusInfo;
|
|
555
|
+
}
|
|
556
|
+
|
|
548
557
|
export declare interface TransactionInfo {
|
|
549
558
|
tag: string;
|
|
550
559
|
transactionId: string;
|
|
551
560
|
}
|
|
552
561
|
|
|
562
|
+
export declare type TransactionsListResponse = {
|
|
563
|
+
items: TransactionStatusInfo[];
|
|
564
|
+
};
|
|
565
|
+
|
|
566
|
+
export declare enum TransactionStateStatus {
|
|
567
|
+
STARTED = 0,
|
|
568
|
+
UPLOADED = 1,
|
|
569
|
+
PROCESSED = 2
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
export declare type TransactionStatusInfo = {
|
|
573
|
+
id: number;
|
|
574
|
+
state: TransactionStateStatus;
|
|
575
|
+
updatedAt: string;
|
|
576
|
+
};
|
|
577
|
+
|
|
553
578
|
export declare type TScenarioParams = {
|
|
554
579
|
name: string;
|
|
555
580
|
desc: string;
|
|
@@ -587,7 +612,7 @@ export { }
|
|
|
587
612
|
|
|
588
613
|
declare global {
|
|
589
614
|
interface HTMLElementEventMap {
|
|
590
|
-
'document-reader': CustomEvent<DocumentReaderDetailType>;
|
|
615
|
+
'document-reader': CustomEvent<DocumentReaderDetailType | TransactionEvent>;
|
|
591
616
|
'camera-snapshot': CustomEvent<CameraSnapshotDetailType>;
|
|
592
617
|
}
|
|
593
618
|
interface Window {
|