@regulaforensics/vp-frontend-document-components 7.5.1839-nightly → 7.5.1853-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.
- package/README.md +40 -123
- package/dist/index.d.ts +5 -31
- package/dist/main.iife.js +674 -56
- package/dist/main.js +11335 -16231
- 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)
|
|
48
|
-
*
|
|
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
|
|
338
|
-
|
|
339
|
-
| `ELEMENT_VISIBLE`
|
|
340
|
-
| `PRESS_CAMERA_BUTTON`
|
|
341
|
-
| `PRESS_FILE_BUTTON`
|
|
342
|
-
| `PRESS_RETRY_BUTTON`
|
|
343
|
-
| `PRESS_SKIP_BUTTON`
|
|
344
|
-
| `PRESS_CAPTURE_BUTTON`
|
|
345
|
-
| `PRESS_CHANGE_CAMERA_BUTTON`
|
|
346
|
-
| `PRESS_MIRRORING_BUTTON`
|
|
347
|
-
| `NEW_PAGE_AVAILABLE`
|
|
348
|
-
| `NEW_PAGE_STARTED`
|
|
349
|
-
| `CLOSE`
|
|
350
|
-
| `CAMERA_PROCESS_CLOSED`
|
|
351
|
-
| `CAMERA_PROCESS_STARTED`
|
|
352
|
-
| `VIDEO_STARTED`
|
|
353
|
-
| `VIDEO_STOPPED`
|
|
354
|
-
| `FILE_PROCESS_STARTED`
|
|
355
|
-
| `PROCESS_FINISHED`
|
|
356
|
-
| `SERVICE_INITIALIZED`
|
|
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
|
-
| `
|
|
422
|
-
| `
|
|
423
|
-
| `
|
|
424
|
-
| `
|
|
425
|
-
| `
|
|
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
|
|
|
@@ -1006,41 +976,6 @@ function listener(event) {
|
|
|
1006
976
|
|
|
1007
977
|
component.addEventListener('document-reader', listener);
|
|
1008
978
|
```
|
|
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
|
-
|
|
1044
979
|
|
|
1045
980
|
### Appearance Customization
|
|
1046
981
|
|
|
@@ -1072,19 +1007,6 @@ HTML:
|
|
|
1072
1007
|
```html
|
|
1073
1008
|
<document-reader class="my-custom-style"></document-reader>
|
|
1074
1009
|
```
|
|
1075
|
-
#### Inserting component in Flex and Grid layouts
|
|
1076
|
-
|
|
1077
|
-
document-reader and camera-snapshot components have **width** and **height** set to **100%** by default and therefore try to fit their container element.
|
|
1078
|
-
This should not affect correct CSS Grid positioning, but for Flexbox make sure to style document-reader dimensions and set **flex-basis**, i.e.:
|
|
1079
|
-
|
|
1080
|
-
```css
|
|
1081
|
-
document-reader.flex-item {
|
|
1082
|
-
width: auto;
|
|
1083
|
-
height: auto;
|
|
1084
|
-
flex-basis: 500px; // distinct width of your choice
|
|
1085
|
-
}
|
|
1086
|
-
```
|
|
1087
|
-
|
|
1088
1010
|
|
|
1089
1011
|
#### Localized Messages
|
|
1090
1012
|
|
|
@@ -1121,7 +1043,6 @@ See the following table with localized labels, used in the components.
|
|
|
1121
1043
|
| **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
|
|
1122
1044
|
| **fromCamera** | From camera | `document-reader`, `camera-snapshot` |
|
|
1123
1045
|
| **fromGallery** | From gallery | `document-reader`, `camera-snapshot` |
|
|
1124
|
-
| **fromOtherPhone** | From other phone | `document-reader`, `camera-snapshot` |
|
|
1125
1046
|
| **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
|
|
1126
1047
|
| **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
|
|
1127
1048
|
| **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
|
|
@@ -1135,8 +1056,6 @@ See the following table with localized labels, used in the components.
|
|
|
1135
1056
|
| **largeFile** | This file is too large to be uploaded | `document-reader` |
|
|
1136
1057
|
| **selectSmallerFile** | Please select a smaller file | `document-reader` |
|
|
1137
1058
|
| **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
1059
|
| **updateBrowser** | Update your browser version | `document-reader` |
|
|
1141
1060
|
| **licenseError** | A license error has occurred | `document-reader` |
|
|
1142
1061
|
| **licenseExpired** | The license cannot be found or has expired | `document-reader` |
|
|
@@ -1152,9 +1071,6 @@ See the following table with localized labels, used in the components.
|
|
|
1152
1071
|
| **flipDocument** | Flip the document | `document-reader` |
|
|
1153
1072
|
| **verified** | Verified! | `document-reader` |
|
|
1154
1073
|
| **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
1074
|
| **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
|
|
1159
1075
|
| **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
|
|
1160
1076
|
| **uploadPhoto** | Upload a photo | `camera-snapshot` |
|
|
@@ -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.**
|
|
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
|
|
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<
|
|
30
|
+
export declare type CameraSnapshotDetailType = DetailEvent<EventActions, 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<
|
|
121
|
+
export declare type DocumentReaderDetailType = DetailEvent<EventActions, DocumentReaderResponseType>;
|
|
122
122
|
|
|
123
123
|
export declare interface DocumentReaderImage {
|
|
124
124
|
data: string;
|
|
@@ -320,8 +320,6 @@ export declare interface DocumentTranslations {
|
|
|
320
320
|
largeFile?: string;
|
|
321
321
|
selectSmallerFile?: string;
|
|
322
322
|
versionNotSupported?: string;
|
|
323
|
-
httpNotSupported?: string;
|
|
324
|
-
insecurePageContext?: string;
|
|
325
323
|
updateBrowser?: string;
|
|
326
324
|
licenseError?: string;
|
|
327
325
|
licenseExpired?: string;
|
|
@@ -386,7 +384,6 @@ export declare enum EventActions {
|
|
|
386
384
|
PRESS_SKIP_BUTTON = "PRESS_SKIP_BUTTON",
|
|
387
385
|
PRESS_CAPTURE_BUTTON = "PRESS_CAPTURE_BUTTON",
|
|
388
386
|
PRESS_CHANGE_CAMERA_BUTTON = "PRESS_CHANGE_CAMERA_BUTTON",
|
|
389
|
-
PRESS_REMOTE_DEVICE_BUTTON = "PRESS_REMOTE_DEVICE_BUTTON",
|
|
390
387
|
PRESS_MIRRORING_BUTTON = "PRESS_MIRRORING_BUTTON",
|
|
391
388
|
PRESS_CONNECT_BUTTON = "PRESS_CONNECT_BUTTON",
|
|
392
389
|
PRESS_DISCONNECT_BUTTON = "PRESS_DISCONNECT_BUTTON",
|
|
@@ -402,9 +399,7 @@ export declare enum EventActions {
|
|
|
402
399
|
FILE_PROCESS_STARTED = "FILE_PROCESS_STARTED",
|
|
403
400
|
PROCESS_STARTED = "PROCESS_STARTED",
|
|
404
401
|
PROCESS_FINISHED = "PROCESS_FINISHED",
|
|
405
|
-
SERVICE_INITIALIZED = "SERVICE_INITIALIZED"
|
|
406
|
-
REMOTE_TRANSACTION_UPLOADED = "REMOTE_TRANSACTION_UPLOADED",
|
|
407
|
-
REMOTE_PROCESS_FINISHED = "REMOTE_PROCESS_FINISHED"
|
|
402
|
+
SERVICE_INITIALIZED = "SERVICE_INITIALIZED"
|
|
408
403
|
}
|
|
409
404
|
|
|
410
405
|
export declare enum FrameLineCap {
|
|
@@ -512,7 +507,6 @@ export declare interface PackageParams {
|
|
|
512
507
|
|
|
513
508
|
export declare interface ProcessingRequest extends BaseRequest {
|
|
514
509
|
metadata?: Record<string, any>;
|
|
515
|
-
delegateURL?: string;
|
|
516
510
|
processParam: DocumentReaderProcessParam;
|
|
517
511
|
imagesList?: Array<DocumentReaderImage>;
|
|
518
512
|
imageInputParam?: ImageInputParamType;
|
|
@@ -549,32 +543,11 @@ declare type TProcessingListener = ({ isProcessing }: {
|
|
|
549
543
|
isProcessing: boolean;
|
|
550
544
|
}) => void;
|
|
551
545
|
|
|
552
|
-
export declare interface TransactionEvent {
|
|
553
|
-
action: EventActions.REMOTE_TRANSACTION_UPLOADED;
|
|
554
|
-
data: TransactionStatusInfo;
|
|
555
|
-
}
|
|
556
|
-
|
|
557
546
|
export declare interface TransactionInfo {
|
|
558
547
|
tag: string;
|
|
559
548
|
transactionId: string;
|
|
560
549
|
}
|
|
561
550
|
|
|
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
|
-
|
|
578
551
|
export declare type TScenarioParams = {
|
|
579
552
|
name: string;
|
|
580
553
|
desc: string;
|
|
@@ -612,10 +585,11 @@ export { }
|
|
|
612
585
|
|
|
613
586
|
declare global {
|
|
614
587
|
interface HTMLElementEventMap {
|
|
615
|
-
'document-reader': CustomEvent<DocumentReaderDetailType
|
|
588
|
+
'document-reader': CustomEvent<DocumentReaderDetailType>;
|
|
616
589
|
'camera-snapshot': CustomEvent<CameraSnapshotDetailType>;
|
|
617
590
|
}
|
|
618
591
|
interface Window {
|
|
619
592
|
RegulaDocumentSDK: DocumentReaderService;
|
|
620
593
|
}
|
|
621
594
|
}
|
|
595
|
+
|