@regulaforensics/vp-frontend-document-components 7.2.1712-nightly → 7.2.1713-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 +134 -67
- package/dist/index.d.ts +609 -0
- package/dist/main.iife.js +103 -0
- package/dist/main.js +22075 -2
- package/docs/document-reader-delegate-button.jpg +0 -0
- package/docs/document-reader-delegate-mode.jpg +0 -0
- package/package.json +17 -9
- package/dist/main.js.LICENSE.txt +0 -41
- package/esm/main.js +0 -2
- package/esm/main.js.LICENSE.txt +0 -41
- package/lib/index.d.ts +0 -496
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
* [Event Response](#event-response)
|
|
18
18
|
* [Settings and Attributes](#settings-and-attributes)
|
|
19
19
|
* [Backend reprocessing](#backend-reprocessing)
|
|
20
|
+
* [Delegating scan to device with better camera](#delegating-scan-to-device-with-better-camera)
|
|
20
21
|
* [Appearance Customization](#appearance-customization)
|
|
21
22
|
* [Font and Colors](#font-and-colors)
|
|
22
23
|
* [Localized Messages](#localized-messages)
|
|
@@ -93,7 +94,7 @@ import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-fro
|
|
|
93
94
|
```
|
|
94
95
|
Without module bundler:
|
|
95
96
|
```javascript
|
|
96
|
-
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/
|
|
97
|
+
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';
|
|
97
98
|
```
|
|
98
99
|
|
|
99
100
|
**Step 3.** Define the components, depending on the functionality that you need.
|
|
@@ -148,7 +149,7 @@ Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
|
|
|
148
149
|
|
|
149
150
|
For example:
|
|
150
151
|
```html
|
|
151
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
152
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.iife.js"></script>
|
|
152
153
|
```
|
|
153
154
|
|
|
154
155
|
**Note:** You can find all available script versions in the corresponding section of npm, using the same link from the previous example.
|
|
@@ -211,7 +212,14 @@ After adding `DocumentReaderService` to the global variable, you can change the
|
|
|
211
212
|
},
|
|
212
213
|
};
|
|
213
214
|
```
|
|
214
|
-
|
|
215
|
+
|
|
216
|
+
**Session ID** for video processing:
|
|
217
|
+
```javascript
|
|
218
|
+
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
219
|
+
tag: 'your session id',
|
|
220
|
+
};
|
|
221
|
+
```
|
|
222
|
+
|
|
215
223
|
**Image processing** default settings. The functionality is available via the gallery button.
|
|
216
224
|
```javascript
|
|
217
225
|
window.RegulaDocumentSDK.imageProcessParam = {
|
|
@@ -303,26 +311,29 @@ The fields of the `event.detail` object:
|
|
|
303
311
|
|
|
304
312
|
#### Action Types
|
|
305
313
|
|
|
306
|
-
| Type of action
|
|
307
|
-
|
|
308
|
-
| `ELEMENT_VISIBLE`
|
|
309
|
-
| `PRESS_CAMERA_BUTTON`
|
|
310
|
-
| `PRESS_FILE_BUTTON`
|
|
311
|
-
| `PRESS_RETRY_BUTTON`
|
|
312
|
-
| `PRESS_SKIP_BUTTON`
|
|
313
|
-
| `PRESS_CAPTURE_BUTTON`
|
|
314
|
-
| `PRESS_CHANGE_CAMERA_BUTTON`
|
|
315
|
-
| `PRESS_MIRRORING_BUTTON`
|
|
316
|
-
| `NEW_PAGE_AVAILABLE`
|
|
317
|
-
| `NEW_PAGE_STARTED`
|
|
318
|
-
| `CLOSE`
|
|
319
|
-
| `CAMERA_PROCESS_CLOSED`
|
|
320
|
-
| `CAMERA_PROCESS_STARTED`
|
|
321
|
-
| `VIDEO_STARTED`
|
|
322
|
-
| `VIDEO_STOPPED`
|
|
323
|
-
| `FILE_PROCESS_STARTED`
|
|
324
|
-
| `PROCESS_FINISHED`
|
|
325
|
-
| `SERVICE_INITIALIZED`
|
|
314
|
+
| Type of action | Description of the action | Components and events, where present |
|
|
315
|
+
|:------------------------------|:------------------------------------------------------------------|:------------------------------------:|
|
|
316
|
+
| `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot` |
|
|
317
|
+
| `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
318
|
+
| `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
319
|
+
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
320
|
+
| `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
|
|
321
|
+
| `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
322
|
+
| `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
323
|
+
| `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
324
|
+
| `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
|
|
325
|
+
| `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
|
|
326
|
+
| `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
327
|
+
| `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
|
|
328
|
+
| `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
|
|
329
|
+
| `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
|
|
330
|
+
| `VIDEO_STOPPED` | Video stream stopped. | `document-reader`, `camera-snapshot` |
|
|
331
|
+
| `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
|
|
332
|
+
| `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot` |
|
|
333
|
+
| `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
|
|
334
|
+
| `PRESS_REMOTE_DEVICE_BUTTON` | The "From other phone" button is pressed. | `document-reader` |
|
|
335
|
+
| `REMOTE_TRANSACTION_UPLOADED` | Remote transaction with current tag was uploaded | `document-reader` |
|
|
336
|
+
| `REMOTE_PROCESS_FINISHED` | Remote transaction with current tag was processed | `document-reader` |
|
|
326
337
|
|
|
327
338
|
|
|
328
339
|
#### Action Data
|
|
@@ -389,6 +400,21 @@ Available fields of `event.detail.data` object:
|
|
|
389
400
|
| `INCORRECT_CAMERA_ID` | Camera with this ID was not found |
|
|
390
401
|
| `CONNECTION_ERROR` | Connection errors |
|
|
391
402
|
|
|
403
|
+
#### Remote action data
|
|
404
|
+
|
|
405
|
+
**1.** In case of remote scan scenario REMOTE_TRANSACTION_UPLOADED `event.detail` will contain the following data:
|
|
406
|
+
```javascript
|
|
407
|
+
{
|
|
408
|
+
action: EventActions.REMOTE_TRANSACTION_UPLOADED,
|
|
409
|
+
data: {
|
|
410
|
+
id: 1,
|
|
411
|
+
state: 1,
|
|
412
|
+
updatedAt: 'dateStr'
|
|
413
|
+
},
|
|
414
|
+
}
|
|
415
|
+
```
|
|
416
|
+
Transaction id can be used to trigger reprocessing.
|
|
417
|
+
|
|
392
418
|
#### Event Generation Logic
|
|
393
419
|
|
|
394
420
|
The cases of event generation are described in the following table.
|
|
@@ -954,6 +980,46 @@ function listener(event) {
|
|
|
954
980
|
|
|
955
981
|
component.addEventListener('document-reader', listener);
|
|
956
982
|
```
|
|
983
|
+
### Delegating scan to device with better camera
|
|
984
|
+
|
|
985
|
+
For cases when user's main device lacks camera or does not succeed to scan with given camera quality,
|
|
986
|
+
you have an option to delegate scanning to another available device (i.e. phone).
|
|
987
|
+
|
|
988
|
+
#### 1. "From other phone" action may be configured on the start screen:
|
|
989
|
+
- configure [backend reprocessing](#backend-reprocessing)
|
|
990
|
+
- add 'delegateURL' and 'tag':
|
|
991
|
+
```javascript
|
|
992
|
+
processor.recognizerProcessParam = {
|
|
993
|
+
delegateURL: 'https://your-page.com?tag={tag}', // the page which will be used by other device
|
|
994
|
+
tag: 123 // your session id, will be added to delegateURL in place of {tag} substring
|
|
995
|
+
}
|
|
996
|
+
```
|
|
997
|
+
- these settings will unlock "From other phone" option
|
|
998
|
+
|
|
999
|
+
|
|
1000
|
+
|
|
1001
|
+
that shows the user QR Code with url (i.e. `https://your-page.com?tag=123`)
|
|
1002
|
+
|
|
1003
|
+
|
|
1004
|
+
- the component will emit **REMOTE_TRANSACTION_UPLOADED** event with the most recent transaction uploaded with your session tag.
|
|
1005
|
+
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))
|
|
1006
|
+
- the component will emit **REMOTE_PROCESS_FINISHED** event with a result of the most recent processed transaction.
|
|
1007
|
+
It is similar to **PROCESS_FINISHED** event but may contain more data due to backend reprocessing
|
|
1008
|
+
|
|
1009
|
+
#### 2. Configure Delegate page component on delegateURL:
|
|
1010
|
+
- configure [backend reprocessing](#backend-reprocessing)
|
|
1011
|
+
- use the same tag as on the main page
|
|
1012
|
+
```javascript
|
|
1013
|
+
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
1014
|
+
tag: 123 // your session id, i.e. it can be extracted from your delegate page URL
|
|
1015
|
+
};
|
|
1016
|
+
|
|
1017
|
+
element.settings = {
|
|
1018
|
+
startScreen: false, // From camera recognition is expected
|
|
1019
|
+
}
|
|
1020
|
+
```
|
|
1021
|
+
- use finalizePackage() to send the data for further reprocessing
|
|
1022
|
+
|
|
957
1023
|
|
|
958
1024
|
### Appearance Customization
|
|
959
1025
|
|
|
@@ -1011,48 +1077,49 @@ body.append(element);
|
|
|
1011
1077
|
|
|
1012
1078
|
See the following table with localized labels, used in the components.
|
|
1013
1079
|
|
|
1014
|
-
| Label
|
|
1015
|
-
|
|
1016
|
-
| **success**
|
|
1017
|
-
| **fileCorrupt**
|
|
1018
|
-
| **selectAnotherFile**
|
|
1019
|
-
| **error**
|
|
1020
|
-
| **somethingWentWrong**
|
|
1021
|
-
| **tryAgain**
|
|
1022
|
-
| **fromCamera**
|
|
1023
|
-
| **fromGallery**
|
|
1024
|
-
| **
|
|
1025
|
-
| **
|
|
1026
|
-
| **
|
|
1027
|
-
| **
|
|
1028
|
-
| **
|
|
1029
|
-
| **
|
|
1030
|
-
| **
|
|
1031
|
-
| **
|
|
1032
|
-
| **
|
|
1033
|
-
| **
|
|
1034
|
-
| **
|
|
1035
|
-
| **
|
|
1036
|
-
| **
|
|
1037
|
-
| **
|
|
1038
|
-
| **
|
|
1039
|
-
| **
|
|
1040
|
-
| **
|
|
1041
|
-
| **
|
|
1042
|
-
| **
|
|
1043
|
-
| **
|
|
1044
|
-
| **
|
|
1045
|
-
| **
|
|
1046
|
-
| **
|
|
1047
|
-
| **
|
|
1048
|
-
| **
|
|
1049
|
-
| **
|
|
1050
|
-
| **
|
|
1051
|
-
| **
|
|
1052
|
-
| **
|
|
1053
|
-
| **
|
|
1054
|
-
| **
|
|
1055
|
-
| **
|
|
1080
|
+
| Label | Default message in `en` locale | Used in |
|
|
1081
|
+
|:-------------------------------|:---------------------------------------------------------------------------------------------|:------------------------------------:|
|
|
1082
|
+
| **success** | Success! | `document-reader`, `camera-snapshot` |
|
|
1083
|
+
| **fileCorrupt** | This file is corrupt or not supported | `document-reader`, `camera-snapshot` |
|
|
1084
|
+
| **selectAnotherFile** | Please select another file | `document-reader`, `camera-snapshot` |
|
|
1085
|
+
| **error** | Error! | `document-reader`, `camera-snapshot` |
|
|
1086
|
+
| **somethingWentWrong** | Something went wrong | `document-reader`, `camera-snapshot` |
|
|
1087
|
+
| **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
|
|
1088
|
+
| **fromCamera** | From camera | `document-reader`, `camera-snapshot` |
|
|
1089
|
+
| **fromGallery** | From gallery | `document-reader`, `camera-snapshot` |
|
|
1090
|
+
| **fromOtherPhone** | From other phone | `document-reader`, `camera-snapshot` |
|
|
1091
|
+
| **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
|
|
1092
|
+
| **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
|
|
1093
|
+
| **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
|
|
1094
|
+
| **incorrectCameraId** | No camera with the specified ID found. | `document-reader`, `camera-snapshot` |
|
|
1095
|
+
| **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | `document-reader`, `camera-snapshot` |
|
|
1096
|
+
| **cameraConnection** | Make sure the camera is connected correctly. | `document-reader`, `camera-snapshot` |
|
|
1097
|
+
| **checkCameraId** | Check if the specified camera ID is correct. | `document-reader`, `camera-snapshot` |
|
|
1098
|
+
| **scanIDInBrowser** | Scan an ID in your browser | `document-reader` |
|
|
1099
|
+
| **useYourDeviceCamera** | Use your device camera to scan a document or select a photo of the document from the gallery | `document-reader` |
|
|
1100
|
+
| **processingFinished** | Processing finished. | `document-reader` |
|
|
1101
|
+
| **largeFile** | This file is too large to be uploaded | `document-reader` |
|
|
1102
|
+
| **selectSmallerFile** | Please select a smaller file | `document-reader` |
|
|
1103
|
+
| **versionNotSupported** | Your browser version is not supported | `document-reader` |
|
|
1104
|
+
| **updateBrowser** | Update your browser version | `document-reader` |
|
|
1105
|
+
| **licenseError** | A license error has occurred | `document-reader` |
|
|
1106
|
+
| **licenseExpired** | The license cannot be found or has expired | `document-reader` |
|
|
1107
|
+
| **timeout** | Timeout | `document-reader` |
|
|
1108
|
+
| **processing** | Processing... | `document-reader` |
|
|
1109
|
+
| **preparingService** | Preparing the service... | `document-reader` |
|
|
1110
|
+
| **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
|
|
1111
|
+
| **noFocus** | No camera focus | `document-reader` |
|
|
1112
|
+
| **moveCloser** | Move closer | `document-reader` |
|
|
1113
|
+
| **glaresOnDocument** | Avoid glare on the document | `document-reader` |
|
|
1114
|
+
| **holdDocumentStraight** | Hold the document straight | `document-reader` |
|
|
1115
|
+
| **documentProcessing** | Document processing... | `document-reader` |
|
|
1116
|
+
| **flipDocument** | Flip the document | `document-reader` |
|
|
1117
|
+
| **verified** | Verified! | `document-reader` |
|
|
1118
|
+
| **keepDeviceStill** | Hold the device still | `document-reader` |
|
|
1119
|
+
| **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
|
|
1120
|
+
| **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
|
|
1121
|
+
| **uploadPhoto** | Upload a photo | `camera-snapshot` |
|
|
1122
|
+
| **useCameraOrGallery** | Use your device camera or select a photo from the gallery | `camera-snapshot` |
|
|
1056
1123
|
|
|
1057
1124
|
## Document Reader Processor
|
|
1058
1125
|
|
|
@@ -1074,7 +1141,7 @@ import { DocumentReaderProcessor } from '@regulaforensics/vp-frontend-document-c
|
|
|
1074
1141
|
|
|
1075
1142
|
Without module bundler:
|
|
1076
1143
|
```javascript
|
|
1077
|
-
import { DocumentReaderProcessor } from '/node_modules/@regulaforensics/vp-frontend-document-components/
|
|
1144
|
+
import { DocumentReaderProcessor } from '/node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';
|
|
1078
1145
|
```
|
|
1079
1146
|
|
|
1080
1147
|
**Step 3.** Add a video tag to the `.html` file, then prepare and initialize `DocumentReaderProcessor`.
|
|
@@ -1130,7 +1197,7 @@ Use the CDN link in a format as follows: `unpkg.com/:package@:version/:file`
|
|
|
1130
1197
|
|
|
1131
1198
|
For example:
|
|
1132
1199
|
```html
|
|
1133
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
1200
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.iife.js"></script>
|
|
1134
1201
|
```
|
|
1135
1202
|
|
|
1136
1203
|
**Note:** You can find all available script versions in the corresponding section of npm, using the same link from the previous example.
|