@regulaforensics/vp-frontend-document-components 2.2.0 → 2.4.0
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 +385 -252
- package/dist/main.js +1 -1
- package/dist/main.js.LICENSE.txt +10 -0
- package/esm/main.js +1 -1
- package/esm/main.js.LICENSE.txt +10 -0
- package/lib/index.d.ts +2369 -0
- package/package.json +4 -83
- package/lib/common/BackCameraIcon.d.ts +0 -6
- package/lib/common/Button.d.ts +0 -7
- package/lib/common/CameraChangeIcon.d.ts +0 -6
- package/lib/common/CameraIcon.d.ts +0 -6
- package/lib/common/CheckIcon.d.ts +0 -6
- package/lib/common/CrossIcon.d.ts +0 -6
- package/lib/common/DocReaderCameraDisabled.d.ts +0 -5
- package/lib/common/DocReaderCameraPreparing.d.ts +0 -5
- package/lib/common/DocReaderFlip.d.ts +0 -5
- package/lib/common/DocReaderProcessing.d.ts +0 -5
- package/lib/common/DocReaderProcessingError.d.ts +0 -5
- package/lib/common/DocReaderProcessingFinished.d.ts +0 -6
- package/lib/common/DocReaderSearch.d.ts +0 -5
- package/lib/common/ErrorIcon.d.ts +0 -6
- package/lib/common/FromCameraIcon.d.ts +0 -5
- package/lib/common/FromGalleryIcon.d.ts +0 -5
- package/lib/common/FrontCameraIcon.d.ts +0 -6
- package/lib/common/FullscreenExitIcon.d.ts +0 -6
- package/lib/common/FullscreenIcon.d.ts +0 -6
- package/lib/common/Icon.d.ts +0 -7
- package/lib/common/Message.d.ts +0 -8
- package/lib/common/NoGlareIconLivenessDetection.d.ts +0 -5
- package/lib/common/NoSmilingIconLivenessDetection.d.ts +0 -5
- package/lib/common/PortraitOrientationOnlyIcon.d.ts +0 -6
- package/lib/common/RegulaLogo.d.ts +0 -6
- package/lib/common/RegulaLogoLivenessDetection.d.ts +0 -5
- package/lib/common/SnapshotIcon.d.ts +0 -6
- package/lib/common/Spinner.d.ts +0 -3
- package/lib/common/SquareIcon.d.ts +0 -6
- package/lib/common/StopIcon.d.ts +0 -6
- package/lib/common/VerifiedIcon.d.ts +0 -6
- package/lib/components/ButtonFaceLiveness.d.ts +0 -7
- package/lib/components/CameraCapture.d.ts +0 -9
- package/lib/components/CameraSnapshot.d.ts +0 -2
- package/lib/components/CameraSnapshotFileCapture.d.ts +0 -10
- package/lib/components/DocumentCapture.d.ts +0 -10
- package/lib/components/DocumentFullScreenOverlay.d.ts +0 -11
- package/lib/components/DocumentReader.d.ts +0 -2
- package/lib/components/DocumentReaderFileCapture.d.ts +0 -12
- package/lib/components/DocumentReaderLayout.d.ts +0 -20
- package/lib/components/DocumentReaderStartScreen.d.ts +0 -10
- package/lib/components/ErrorBoundary.d.ts +0 -18
- package/lib/components/FaceCapture.d.ts +0 -24
- package/lib/components/FaceDetection.d.ts +0 -2
- package/lib/components/FaceFullScreenOverlay.d.ts +0 -10
- package/lib/components/FaceHintAnimaition.d.ts +0 -16
- package/lib/components/FaceLayout.d.ts +0 -23
- package/lib/components/FaceLiveness.d.ts +0 -2
- package/lib/components/InfoScreen.d.ts +0 -10
- package/lib/components/InfoScreenFaceLiveness.d.ts +0 -11
- package/lib/components/InstructionVideoScreen.d.ts +0 -9
- package/lib/components/ProcessScreen.d.ts +0 -6
- package/lib/components/ProcessScreenFaceLiveness.d.ts +0 -6
- package/lib/components/RetryScreenFaceLiveness.d.ts +0 -7
- package/lib/components/SectorAnimationSvg.d.ts +0 -11
- package/lib/components/WebCamera.d.ts +0 -19
- package/lib/constants.d.ts +0 -683
- package/lib/contexts/DocumentAttributesContext.d.ts +0 -26
- package/lib/contexts/DocumentSDKContext.d.ts +0 -8
- package/lib/contexts/FaceAttributesContext.d.ts +0 -24
- package/lib/hoc/withDocumentAttributesContext.d.ts +0 -4
- package/lib/hoc/withDocumentSDKContext.d.ts +0 -3
- package/lib/hoc/withFaceAttributesContext.d.ts +0 -4
- package/lib/hoc/withLocalize.d.ts +0 -8
- package/lib/hooks/useDocumentReaderSeries.d.ts +0 -22
- package/lib/hooks/useDocumentReaderSingle.d.ts +0 -15
- package/lib/hooks/useFaceLiveness.d.ts +0 -40
- package/lib/hooks/useImageInputParam.d.ts +0 -9
- package/lib/hooks/useOrientationChange.d.ts +0 -10
- package/lib/hooks/useStateCallback.d.ts +0 -1
- package/lib/hooks/useStream.d.ts +0 -10
- package/lib/hooks/useUserAgent.d.ts +0 -3
- package/lib/hooks/useWindowBlur.d.ts +0 -2
- package/lib/i18n/dictionaries/_dictionaries.d.ts +0 -2275
- package/lib/index-document.d.ts +0 -4
- package/lib/media-resources/resourcesBase64.d.ts +0 -7
- package/lib/models/CameraModel.d.ts +0 -9
- package/lib/models/CustomError.d.ts +0 -7
- package/lib/models/DocReaderWebclient/ext/authenticity/authenticity.d.ts +0 -32
- package/lib/models/DocReaderWebclient/ext/authenticity/fiber.d.ts +0 -7
- package/lib/models/DocReaderWebclient/ext/authenticity/ident.d.ts +0 -8
- package/lib/models/DocReaderWebclient/ext/authenticity/image-ident.d.ts +0 -7
- package/lib/models/DocReaderWebclient/ext/authenticity/index.d.ts +0 -5
- package/lib/models/DocReaderWebclient/ext/authenticity/ocr-security-text.d.ts +0 -7
- package/lib/models/DocReaderWebclient/ext/authenticity/security-feature.d.ts +0 -8
- package/lib/models/DocReaderWebclient/ext/images.d.ts +0 -16
- package/lib/models/DocReaderWebclient/ext/index.d.ts +0 -6
- package/lib/models/DocReaderWebclient/ext/process-request-image.d.ts +0 -5
- package/lib/models/DocReaderWebclient/ext/process-request.d.ts +0 -38
- package/lib/models/DocReaderWebclient/ext/process-response.d.ts +0 -36
- package/lib/models/DocReaderWebclient/ext/text-field.d.ts +0 -40
- package/lib/models/DocReaderWebclient/ext/text.d.ts +0 -14
- package/lib/models/DocReaderWebclient/models/area-array.d.ts +0 -32
- package/lib/models/DocReaderWebclient/models/area-container.d.ts +0 -38
- package/lib/models/DocReaderWebclient/models/authenticity-check-list.d.ts +0 -31
- package/lib/models/DocReaderWebclient/models/authenticity-check-result-item.d.ts +0 -38
- package/lib/models/DocReaderWebclient/models/authenticity-check-result.d.ts +0 -43
- package/lib/models/DocReaderWebclient/models/authenticity-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/authenticity-result-type.d.ts +0 -33
- package/lib/models/DocReaderWebclient/models/authenticity-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/bc-pdf417-info.d.ts +0 -54
- package/lib/models/DocReaderWebclient/models/bc-roidetect.d.ts +0 -42
- package/lib/models/DocReaderWebclient/models/check-diagnose.d.ts +0 -98
- package/lib/models/DocReaderWebclient/models/check-result.d.ts +0 -30
- package/lib/models/DocReaderWebclient/models/chosen-document-type-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/chosen-document-type-result.d.ts +0 -19
- package/lib/models/DocReaderWebclient/models/chosen-document-type.d.ts +0 -74
- package/lib/models/DocReaderWebclient/models/container-list.d.ts +0 -45
- package/lib/models/DocReaderWebclient/models/critical.d.ts +0 -26
- package/lib/models/DocReaderWebclient/models/cross-source-value-comparison.d.ts +0 -38
- package/lib/models/DocReaderWebclient/models/data-module.d.ts +0 -48
- package/lib/models/DocReaderWebclient/models/details-optical.d.ts +0 -67
- package/lib/models/DocReaderWebclient/models/details-rfid.d.ts +0 -61
- package/lib/models/DocReaderWebclient/models/device-info.d.ts +0 -54
- package/lib/models/DocReaderWebclient/models/doc-bar-code-info-all-of.d.ts +0 -31
- package/lib/models/DocReaderWebclient/models/doc-bar-code-info.d.ts +0 -19
- package/lib/models/DocReaderWebclient/models/doc-visual-extended-field.d.ts +0 -70
- package/lib/models/DocReaderWebclient/models/doc-visual-extended-info.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/document-format.d.ts +0 -70
- package/lib/models/DocReaderWebclient/models/document-image-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/document-image-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/document-image.d.ts +0 -24
- package/lib/models/DocReaderWebclient/models/document-position-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/document-position-result.d.ts +0 -19
- package/lib/models/DocReaderWebclient/models/document-position.d.ts +0 -80
- package/lib/models/DocReaderWebclient/models/document-type-recognition-result.d.ts +0 -30
- package/lib/models/DocReaderWebclient/models/document-type.d.ts +0 -246
- package/lib/models/DocReaderWebclient/models/document-types-candidates-list.d.ts +0 -32
- package/lib/models/DocReaderWebclient/models/document-types-candidates-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/document-types-candidates-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/document-types-candidates.d.ts +0 -32
- package/lib/models/DocReaderWebclient/models/encrypted-rclresult-all-of.d.ts +0 -24
- package/lib/models/DocReaderWebclient/models/encrypted-rclresult.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/fdsidlist.d.ts +0 -80
- package/lib/models/DocReaderWebclient/models/fiber-result-all-of.d.ts +0 -74
- package/lib/models/DocReaderWebclient/models/fiber-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/graphic-field-type.d.ts +0 -118
- package/lib/models/DocReaderWebclient/models/graphic-field.d.ts +0 -63
- package/lib/models/DocReaderWebclient/models/graphic-fields-list.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/graphics-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/graphics-result.d.ts +0 -19
- package/lib/models/DocReaderWebclient/models/ident-result-all-of.d.ts +0 -65
- package/lib/models/DocReaderWebclient/models/ident-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/image-data.d.ts +0 -24
- package/lib/models/DocReaderWebclient/models/image-qa.d.ts +0 -54
- package/lib/models/DocReaderWebclient/models/image-quality-check-list.d.ts +0 -32
- package/lib/models/DocReaderWebclient/models/image-quality-check-type.d.ts +0 -50
- package/lib/models/DocReaderWebclient/models/image-quality-check.d.ts +0 -64
- package/lib/models/DocReaderWebclient/models/image-quality-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/image-quality-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/images-available-source.d.ts +0 -31
- package/lib/models/DocReaderWebclient/models/images-field-value.d.ts +0 -70
- package/lib/models/DocReaderWebclient/models/images-field.d.ts +0 -38
- package/lib/models/DocReaderWebclient/models/images-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/images-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/images.d.ts +0 -32
- package/lib/models/DocReaderWebclient/models/index.d.ts +0 -123
- package/lib/models/DocReaderWebclient/models/lcid.d.ts +0 -582
- package/lib/models/DocReaderWebclient/models/lexical-analysis-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/lexical-analysis-result.d.ts +0 -19
- package/lib/models/DocReaderWebclient/models/license-result-all-of.d.ts +0 -24
- package/lib/models/DocReaderWebclient/models/license-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/light.d.ts +0 -34
- package/lib/models/DocReaderWebclient/models/list-verified-fields.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/log-level.d.ts +0 -23
- package/lib/models/DocReaderWebclient/models/measure-system.d.ts +0 -26
- package/lib/models/DocReaderWebclient/models/mrzformat.d.ts +0 -24
- package/lib/models/DocReaderWebclient/models/ocrsecurity-text-result-all-of.d.ts +0 -81
- package/lib/models/DocReaderWebclient/models/ocrsecurity-text-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/one-candidate.d.ts +0 -74
- package/lib/models/DocReaderWebclient/models/original-symbol.d.ts +0 -37
- package/lib/models/DocReaderWebclient/models/parray-field.d.ts +0 -81
- package/lib/models/DocReaderWebclient/models/per-document-config.d.ts +0 -30
- package/lib/models/DocReaderWebclient/models/photo-ident-result-all-of.d.ts +0 -76
- package/lib/models/DocReaderWebclient/models/photo-ident-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/point-array.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/point.d.ts +0 -30
- package/lib/models/DocReaderWebclient/models/points-container.d.ts +0 -31
- package/lib/models/DocReaderWebclient/models/process-params.d.ts +0 -254
- package/lib/models/DocReaderWebclient/models/process-request-image.d.ts +0 -38
- package/lib/models/DocReaderWebclient/models/process-request.d.ts +0 -60
- package/lib/models/DocReaderWebclient/models/process-response.d.ts +0 -66
- package/lib/models/DocReaderWebclient/models/process-system-info.d.ts +0 -30
- package/lib/models/DocReaderWebclient/models/processing-status.d.ts +0 -30
- package/lib/models/DocReaderWebclient/models/raw-image-container-list.d.ts +0 -31
- package/lib/models/DocReaderWebclient/models/rectangle-coordinates.d.ts +0 -42
- package/lib/models/DocReaderWebclient/models/result-item.d.ts +0 -48
- package/lib/models/DocReaderWebclient/models/result.d.ts +0 -98
- package/lib/models/DocReaderWebclient/models/rfid-location.d.ts +0 -30
- package/lib/models/DocReaderWebclient/models/rfid-origin.d.ts +0 -42
- package/lib/models/DocReaderWebclient/models/scenario.d.ts +0 -36
- package/lib/models/DocReaderWebclient/models/security-feature-result-all-of.d.ts +0 -59
- package/lib/models/DocReaderWebclient/models/security-feature-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/security-feature-type.d.ts +0 -49
- package/lib/models/DocReaderWebclient/models/source-validity.d.ts +0 -32
- package/lib/models/DocReaderWebclient/models/source.d.ts +0 -23
- package/lib/models/DocReaderWebclient/models/status-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/status-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/status.d.ts +0 -63
- package/lib/models/DocReaderWebclient/models/string-recognition-result.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/symbol-candidate.d.ts +0 -30
- package/lib/models/DocReaderWebclient/models/symbol-recognition-result.d.ts +0 -32
- package/lib/models/DocReaderWebclient/models/text-available-source.d.ts +0 -38
- package/lib/models/DocReaderWebclient/models/text-data-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/text-data-result.d.ts +0 -19
- package/lib/models/DocReaderWebclient/models/text-field-type.d.ts +0 -2386
- package/lib/models/DocReaderWebclient/models/text-field-value.d.ts +0 -70
- package/lib/models/DocReaderWebclient/models/text-field.d.ts +0 -84
- package/lib/models/DocReaderWebclient/models/text-post-processing.d.ts +0 -22
- package/lib/models/DocReaderWebclient/models/text-result-all-of.d.ts +0 -25
- package/lib/models/DocReaderWebclient/models/text-result.d.ts +0 -18
- package/lib/models/DocReaderWebclient/models/text.d.ts +0 -51
- package/lib/models/DocReaderWebclient/models/transaction-info.d.ts +0 -42
- package/lib/models/DocReaderWebclient/models/verification-result.d.ts +0 -38
- package/lib/models/DocReaderWebclient/models/verified-field-map.d.ts +0 -63
- package/lib/models/DocReaderWebclient/models/visibility.d.ts +0 -23
- package/lib/models/ImageModel.d.ts +0 -7
- package/lib/services/DebugService.d.ts +0 -17
- package/lib/services/DocumentReaderProcessor.d.ts +0 -46
- package/lib/services/DocumentReaderService.d.ts +0 -50
- package/lib/services/EventEmitter.d.ts +0 -9
- package/lib/services/FaceLivenessService.d.ts +0 -97
- package/lib/services/FaceService.d.ts +0 -25
- package/lib/types.d.ts +0 -343
- package/lib/utils.d.ts +0 -30
- package/lib/web-components/CameraSnapshot.d.ts +0 -14
- package/lib/web-components/DocumentReader.d.ts +0 -14
- package/lib/web-components/FaceDetection.d.ts +0 -10
- package/lib/web-components/FaceLiveness.d.ts +0 -16
- package/lib/web-components/FullScreenContainer.d.ts +0 -4
package/README.md
CHANGED
|
@@ -1,28 +1,50 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
1
|
+
# Document Reader SDK Web Components
|
|
2
|
+
|
|
3
|
+
- [Overview](#overview)
|
|
4
|
+
- [Before you start](#before-you-start)
|
|
5
|
+
- [Compatibility](#compatibility)
|
|
6
|
+
- [UI components](#ui-components)
|
|
7
|
+
- [Integration via NPM](#integration-via-npm)
|
|
8
|
+
- [Integration via CDN](#integration-via-cdn)
|
|
9
|
+
- [Document reader settings](#document-reader-settings)
|
|
10
|
+
- [Events](#events)
|
|
11
|
+
- [Response](#response)
|
|
12
|
+
- [Attributes](#attributes)
|
|
13
|
+
- [Customization](#customization)
|
|
14
|
+
- [Document reader SDK](#document-reader-sdk)
|
|
15
|
+
- [SDK integration via NPM](#sdk-integration-via-npm)
|
|
16
|
+
- [SDK integration via CDN](#sdk-integration-via-cdn)
|
|
17
|
+
- [Available DocumentReaderProcessor methods](#available-documentreaderprocessor-methods)
|
|
18
|
+
- [DocumentReaderProcessor settings](#documentreaderprocessor-settings)
|
|
19
|
+
- [Problems](#problems)
|
|
20
|
+
- [Examples](#examples)
|
|
19
21
|
|
|
20
22
|
---
|
|
21
23
|
|
|
22
|
-
##
|
|
24
|
+
## Overview
|
|
25
|
+
|
|
26
|
+
The Document Reader web components let you add document verification to your web site. The components can capture a document from the device camera or process an uploaded image, crop the image by the document boundaries, detect the presence or absence of the machine readable zone (MRZ) and return the MRZ text fields.
|
|
27
|
+
|
|
28
|
+
The Document Reader web components package contains:
|
|
29
|
+
|
|
30
|
+
- _UI web components_ for document recognition.
|
|
31
|
+
- _the document reader SDK_ for creating your custom document reader UI interface.
|
|
32
|
+
|
|
33
|
+
The UI web components are:
|
|
34
|
+
|
|
35
|
+
- `document-reader` for documents recognition.
|
|
36
|
+
- `camera-snapshot` for capturing images from a camera or uploading from a gallery.
|
|
23
37
|
|
|
24
38
|
This package contains UI web components and SDK for documents recognition.
|
|
25
39
|
|
|
40
|
+
## Before you start
|
|
41
|
+
|
|
42
|
+
Please note that:
|
|
43
|
+
|
|
44
|
+
- The components work **only** under the HTTPS protocol on the web site.
|
|
45
|
+
- The components library does register the components on the web page itself, so make sure to import the library to your web site before adding the components to the web page code.
|
|
46
|
+
- The UI components and the SDK use the `getUserMedia` method to display the video stream from the camera. This feature is available only in secure contexts (HTTPS).
|
|
47
|
+
|
|
26
48
|
## Compatibility
|
|
27
49
|
|
|
28
50
|
| Devices |  |  |  |
|
|
@@ -35,13 +57,13 @@ This package contains UI web components and SDK for documents recognition.
|
|
|
35
57
|
|
|
36
58
|
### Integration via NPM
|
|
37
59
|
|
|
38
|
-
Install
|
|
60
|
+
Install `@regulaforensics/vp-frontend-document-components`:
|
|
39
61
|
|
|
40
62
|
```
|
|
41
63
|
npm i @regulaforensics/vp-frontend-document-components
|
|
42
64
|
```
|
|
43
65
|
|
|
44
|
-
Import
|
|
66
|
+
Import `defineComponents` and `DocumentReaderService` from `@regulaforensics/vp-frontend-document-components` into your `.js` file:
|
|
45
67
|
|
|
46
68
|
```javascript
|
|
47
69
|
// If you use module bundler
|
|
@@ -51,7 +73,7 @@ import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-fro
|
|
|
51
73
|
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
|
|
52
74
|
```
|
|
53
75
|
|
|
54
|
-
Add
|
|
76
|
+
Add `DocumentReaderService` to the global variable `RegulaDocumentSDK`, define the components and prepare the service:
|
|
55
77
|
|
|
56
78
|
```javascript
|
|
57
79
|
window.RegulaDocumentSDK = new DocumentReaderService();
|
|
@@ -63,27 +85,28 @@ defineComponents().then(async () => {
|
|
|
63
85
|
// Notice: If you use only the camera-snapshot component, then it is not necessary to create a global variable and prepare the service, use only defineComponents();
|
|
64
86
|
```
|
|
65
87
|
|
|
66
|
-
Add the component name to the
|
|
88
|
+
Add the component name to the `.html` file. The available components are:
|
|
67
89
|
|
|
68
90
|
```html
|
|
69
91
|
<document-reader></document-reader> <!-- for documents recognition -->
|
|
70
92
|
<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
|
|
71
93
|
```
|
|
72
94
|
|
|
73
|
-
|
|
95
|
+
!!! note
|
|
96
|
+
To use the `<document-reader></document-reader>` component on test environments, you have to set the base64 license value to the `license` attribute. For example, `<document-reader license="BASE64_LICENSE_KEY"></document-reader>`.
|
|
74
97
|
|
|
75
98
|
### Integration via CDN
|
|
76
99
|
|
|
77
|
-
Connect the script in your
|
|
100
|
+
Connect the script in your `.html` file. Here is the CDN link: `unpkg.com/:package@:version/:file`
|
|
78
101
|
|
|
79
102
|
For example:
|
|
80
103
|
|
|
81
104
|
```html
|
|
82
105
|
<!-- Replace <VERSION> with the package version. The list of versions is available on NPM in the versions section -->
|
|
83
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components
|
|
106
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
84
107
|
```
|
|
85
108
|
|
|
86
|
-
In your
|
|
109
|
+
In your `.js` file define the components and prepare the service. `DocumentReaderService` and `defineComponents` are available in the global variable `window.Regula`:
|
|
87
110
|
|
|
88
111
|
```javascript
|
|
89
112
|
const { defineComponents, DocumentReaderService } = window.Regula;
|
|
@@ -97,93 +120,102 @@ defineComponents().then(async () => {
|
|
|
97
120
|
// Notice: If you use only the camera-snapshot component, then it is not necessary to create a global variable and prepare the service, use only defineComponents();
|
|
98
121
|
```
|
|
99
122
|
|
|
100
|
-
Add the component name to the
|
|
123
|
+
Add the component name to the `.html` file. The available components are:
|
|
101
124
|
|
|
102
125
|
```html
|
|
103
126
|
<document-reader></document-reader> <!-- for documents recognition -->
|
|
104
127
|
<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
|
|
105
128
|
```
|
|
106
129
|
|
|
107
|
-
|
|
130
|
+
!!! note
|
|
131
|
+
To use the `<document-reader></document-reader>` component on test environments, you have to set the base64 license value to the `license` attribute. For example, `<document-reader license="BASE64_LICENSE_KEY"></document-reader>`.
|
|
108
132
|
|
|
109
|
-
###
|
|
133
|
+
### Document reader settings
|
|
110
134
|
|
|
111
|
-
After adding
|
|
135
|
+
After adding `DocumentReaderService` to the global variable, you can change the default document recognition settings:
|
|
112
136
|
|
|
113
137
|
```javascript
|
|
114
138
|
// Default settings for video capture (From camera button):
|
|
115
139
|
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
},
|
|
140
|
+
processParam: {
|
|
141
|
+
returnUncroppedImage: true,
|
|
142
|
+
scenario: 'MrzAndLocate',
|
|
143
|
+
multipageProcessing: false,
|
|
144
|
+
returnPackageForReprocess: false,
|
|
145
|
+
timeout: 20000,
|
|
146
|
+
resultTypeOutput: [],
|
|
147
|
+
imageQa: {
|
|
148
|
+
expectedPass: ['dpiThreshold', 'glaresCheck', 'focusCheck'],
|
|
149
|
+
dpiThreshold: 130,
|
|
150
|
+
glaresCheck: true,
|
|
151
|
+
glaresCheckParams: {
|
|
152
|
+
imgMarginPart: 0.05,
|
|
153
|
+
maxGlaringPart: 0.01,
|
|
131
154
|
},
|
|
132
|
-
|
|
155
|
+
},
|
|
156
|
+
},
|
|
133
157
|
};
|
|
134
158
|
|
|
135
159
|
// Default settings for image processing (From gallery button):
|
|
136
160
|
window.RegulaDocumentSDK.imageProcessParam = {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
161
|
+
processParam: {
|
|
162
|
+
scenario: 'MrzAndLocate',
|
|
163
|
+
returnUncroppedImage: true,
|
|
164
|
+
returnPackageForReprocess: false,
|
|
165
|
+
},
|
|
166
|
+
};
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
You can also set the session id:
|
|
170
|
+
|
|
171
|
+
```javascript
|
|
172
|
+
window.RegulaDocumentSDK.imageProcessParam = {
|
|
173
|
+
tag: 'your session id',
|
|
142
174
|
};
|
|
143
175
|
```
|
|
144
176
|
|
|
145
177
|
#### Descriptions of settings
|
|
146
178
|
|
|
147
|
-
| Setting | Info | Data type | Default value |
|
|
148
|
-
|
|
149
|
-
| **returnUncroppedImage** | When enabled, returns input images in output. | boolean |
|
|
150
|
-
| **scenario** | Recognition scenario. | string | 'MrzAndLocate' |
|
|
151
|
-
| **multipageProcessing** | Enables multi-page document processing mode. | boolean |
|
|
152
|
-
| **timeout** | Recognition timeout in milliseconds. After this time process will be finished. | number | 2000 |
|
|
153
|
-
| **resultTypeOutput** | Types of results to return in response. [] - all available types. | number[] | [] |
|
|
154
|
-
| **returnPackageForReprocess** | Enable returning the package for reprocessing on the backend. | boolean |
|
|
155
|
-
| **imageQa** | When enabled, image quality checks status affects document optical and overall status. | | |
|
|
156
|
-
| **expectedPass** | Activated image quality checks. | string[] | ['dpiThreshold', 'glaresCheck', 'focusCheck'] |
|
|
157
|
-
| **dpiThreshold** | This parameter sets threshold for Image QA check of the presented document physical dpi. If actual document dpi is below this threshold, check will fail. | number | 150 |
|
|
158
|
-
| **glaresCheck** | This option enables glares check while performing image quality validation. | boolean |
|
|
159
|
-
| **glaresCheckParams** | Settings for glare check. | | |
|
|
160
|
-
| **imageOutputMaxHeight** | This parameter allows setting maximum height in pixels of output images and thus reducing image size to desired. Does not change the aspect ratio. Changes disabled if equals to 0. | number | 0 |
|
|
161
|
-
| **imageOutputMaxWidth** | This parameter allows setting maximum width in pixels of output images and thus reducing image size to desired. Does not change the aspect ratio. Changes disabled if equals to 0. | number | 0 |
|
|
162
|
-
| **doublePageSpread** | Enable this option if the image you provide contains double page spread of the passport and you want to process both pages in one go. It makes sense to use it for documents that have meaningful information on both pages, like Russian domestic passport, or some others. | boolean |
|
|
163
|
-
| **generateDoublePageSpreadImage** | When enabled together with "doublePageSpread" and there is a passport with two pages spread in the image, pages will be cropped, straightened and aligned together, as if the document was captured on a flatbed scanner. | boolean |
|
|
164
|
-
| **fieldTypesFilter** | List of text field types to extract. If empty, all text fields from template will be extracted. Narrowing the list can shorten processing time. | number[] | [] |
|
|
165
|
-
| **dateFormat** | This option allows you to set dates format so that solution will return dates in this format. For example, if you supply 'MM/dd/yyyy', and document have printed date '09 JUL 2020' for the date os issue, you will get '07/09/2020' as a result. By default it is set to system locale default (where the service is running). | string | |
|
|
166
|
-
| **measureSystem** | This option allows you to set the system of measurement used for converting original values in document to output result values. Metric by default. | number | 0 |
|
|
167
|
-
| **imageDpiOutMax** | This parameter controls maximum resolution in dpi of output images. Resolution will remain original in case 0 is supplied. By default is set to return images in response with resolution not greater than 300 dpi for all scenarios except FullAuth. In FullAuth scenario this limit is 1000 dpi by default. | number | |
|
|
168
|
-
| **alreadyCropped** | This option can be enabled if you know for sure that the image you provide contains already cropped document by its edges. This was designed to process on the server side images captured and cropped on mobile. | boolean |
|
|
169
|
-
| **customParams** | This option allows passing custom processing parameters that can be implemented in future without changing API. | Object | {} |
|
|
170
|
-
| **fastDocDetect** | When enabled, shorten the list of candidates to process during document detection in a single image process mode. Reduces processing time for specific backgrounds. | boolean |
|
|
171
|
-
| **updateOCRValidityByGlare** | When enabled, fail OCR field validity, if there is a glare over the text field on the image. | boolean |
|
|
172
|
-
| **returnCroppedBarcode** | When enabled, returns cropped barcode images for unknown documents. | boolean |
|
|
173
|
-
| **respectImageQuality** | When enabled, image quality checks status affects document optical and overall status. | boolean |
|
|
174
|
-
| **forceDocFormat** | Force use of specified document format when locating and recognizing document to reduce the number of candidates. | number | |
|
|
175
|
-
| **noGraphics** | When enabled, no graphic fields will be cropped from document image. | boolean |
|
|
176
|
-
| **documentAreaMin** | Specifies minimal area of the image that document should cover to be treated as candidate when locating. Value should be in range from 0 to 1, where 1 is when document should fully cover the image. | number | 0 |
|
|
177
|
-
| **depersonalizeLog** | When enabled, all personal data will be forcibly removed from the logs. | boolean |
|
|
178
|
-
| **multiDocOnImage** | This option allows locating and cropping multiple documents from one image if enabled. | boolean |
|
|
179
|
-
| **shiftExpiryDate** | This option allows shifting the date of expiry into the future or past for number of months specified. This is useful, for example, in some cases when document might be still valid for some period after original expiration date to prevent negative validity status for such documents. Or by shifting the date to the past will set negative validity for the documents that is about to expire in a specified number of months. | number | 0 |
|
|
180
|
-
| **minimalHolderAge** | This options allows specifying the minimal age in years of the document holder for the document to be considered valid. | number | 0 |
|
|
181
|
-
| **mrzFormatsFilter** | This option allows limiting MRZ formats to be recognized by specifying them in array. | string[] | [] |
|
|
182
|
-
| **forceReadMrzBeforeLocate** | When enabled, make sure that in series processing MRZ is located fully inside the result document image, if present on the document. Enabling this option may add extra processing time, by disabling optimizations, but allows more stability in output image quality. | boolean |
|
|
183
|
-
| **parseBarcodes** | This option can be disabled to stop parsing after barcode is read. | boolean |
|
|
184
|
-
| **splitNames** | When enabled, the Surname and GivenNames field will be divided into ft_First_Name, ft_Second_Name, ft_Third_Name, ft_Fourth_Name, ft_Last_Name fields. | boolean |
|
|
185
|
-
|
|
186
|
-
**Attention!** If the
|
|
179
|
+
| Setting | Info | Data type | Default value | Values |
|
|
180
|
+
|:----------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
181
|
+
| **returnUncroppedImage** | When enabled, returns input images in output. | boolean | `true` | `true`, `false` |
|
|
182
|
+
| **scenario** | Recognition scenario. | string | 'MrzAndLocate' | 'MrzAndLocate', 'MrzOrLocate', 'Mrz', 'Locate' |
|
|
183
|
+
| **multipageProcessing** | Enables multi-page document processing mode. | boolean | `true` | `true`, `false` |
|
|
184
|
+
| **timeout** | Recognition timeout in milliseconds. After this time process will be finished. | number | 2000 | numbers > 0 |
|
|
185
|
+
| **resultTypeOutput** | Types of results to return in response. [] - all available types. | number[] | [] | `1` - DocumentImageResult, `3` - TextDataResult, `5` - DocBarCodeInfo, `6` - GraphicsResult, `8` - DocumentTypesCandidatesResult, `9` - ChosenDocumentTypeResult, `20` - AuthenticityResult, `15` - LexicalAnalysisResult, `17` - TextDataResult, `18` - TextDataResult, `19` - GraphicsResult, `30` - ImageQualityResult, `33` - StatusResult, `36` - TextResult, `37` - ImagesResult, `85` - DocumentPositionResult, `102` - TextDataResult, `103` - GraphicsResult, `50` - LicenseResult, `49` - EncryptedRCLResult |
|
|
186
|
+
| **returnPackageForReprocess** | Enable returning the package for reprocessing on the backend. | boolean | `false` | `true`, `false` |
|
|
187
|
+
| **imageQa** | When enabled, image quality checks status affects document optical and overall status. | | | |
|
|
188
|
+
| **expectedPass** | Activated image quality checks. | string[] | ['dpiThreshold', 'glaresCheck', 'focusCheck'] | 'dpiThreshold', 'glaresCheck', 'focusCheck' |
|
|
189
|
+
| **dpiThreshold** | This parameter sets threshold for Image QA check of the presented document physical dpi. If actual document dpi is below this threshold, check will fail. | number | 150 | numbers > 0 |
|
|
190
|
+
| **glaresCheck** | This option enables glares check while performing image quality validation. | boolean | `true` | `true`, `false` |
|
|
191
|
+
| **glaresCheckParams** | Settings for glare check. | | | |
|
|
192
|
+
| **imageOutputMaxHeight** | This parameter allows setting maximum height in pixels of output images and thus reducing image size to desired. Does not change the aspect ratio. Changes disabled if equals to 0. | number | 0 | numbers > 0 |
|
|
193
|
+
| **imageOutputMaxWidth** | This parameter allows setting maximum width in pixels of output images and thus reducing image size to desired. Does not change the aspect ratio. Changes disabled if equals to 0. | number | 0 | numbers > 0 |
|
|
194
|
+
| **doublePageSpread** | Enable this option if the image you provide contains double page spread of the passport and you want to process both pages in one go. It makes sense to use it for documents that have meaningful information on both pages, like Russian domestic passport, or some others. | boolean | `false` | `true`, `false` |
|
|
195
|
+
| **generateDoublePageSpreadImage** | When enabled together with "doublePageSpread" and there is a passport with two pages spread in the image, pages will be cropped, straightened and aligned together, as if the document was captured on a flatbed scanner. | boolean | `false` | `true`, `false` |
|
|
196
|
+
| **fieldTypesFilter** | List of text field types to extract. If empty, all text fields from template will be extracted. Narrowing the list can shorten processing time. | number[] | [] | |
|
|
197
|
+
| **dateFormat** | This option allows you to set dates format so that solution will return dates in this format. For example, if you supply 'MM/dd/yyyy', and document have printed date '09 JUL 2020' for the date os issue, you will get '07/09/2020' as a result. By default it is set to system locale default (where the service is running). | string | | 'MM/dd/yyyy' |
|
|
198
|
+
| **measureSystem** | This option allows you to set the system of measurement used for converting original values in document to output result values. Metric by default. | number | 0 | `0` - Metric, `1` - Imperial |
|
|
199
|
+
| **imageDpiOutMax** | This parameter controls maximum resolution in dpi of output images. Resolution will remain original in case 0 is supplied. By default is set to return images in response with resolution not greater than 300 dpi for all scenarios except FullAuth. In FullAuth scenario this limit is 1000 dpi by default. | number | | numbers > 0 |
|
|
200
|
+
| **alreadyCropped** | This option can be enabled if you know for sure that the image you provide contains already cropped document by its edges. This was designed to process on the server side images captured and cropped on mobile. | boolean | `false` | `true`, `false` |
|
|
201
|
+
| **customParams** | This option allows passing custom processing parameters that can be implemented in future without changing API. | Object | {} | |
|
|
202
|
+
| **fastDocDetect** | When enabled, shorten the list of candidates to process during document detection in a single image process mode. Reduces processing time for specific backgrounds. | boolean | `true` | `true`, `false` |
|
|
203
|
+
| **updateOCRValidityByGlare** | When enabled, fail OCR field validity, if there is a glare over the text field on the image. | boolean | `false` | `true`, `false` |
|
|
204
|
+
| **returnCroppedBarcode** | When enabled, returns cropped barcode images for unknown documents. | boolean | `false` | `true`, `false` |
|
|
205
|
+
| **respectImageQuality** | When enabled, image quality checks status affects document optical and overall status. | boolean | `false` | `true`, `false` |
|
|
206
|
+
| **forceDocFormat** | Force use of specified document format when locating and recognizing document to reduce the number of candidates. | number | | `0` - ID1 document format, `1` - ID2 document format, `2` - ID3 document format, `3` - Undefined document format, `4` - A4 document format, `5` - ID3 double document format, `10` - ID1 format document rotated 90°, `11` - ID1 format document rotated 180°, `12` - ID1 format document rotated 270°, `13` - ID2 format document rotated 90°, `14` - ID3 format document rotated 180°, `1000` - Arbitrary format, `1002` - Flexible format. Standard formats can be resized during cropping, depending on various factors: light, background... |
|
|
207
|
+
| **noGraphics** | When enabled, no graphic fields will be cropped from document image. | boolean | `false` | `true`, `false` |
|
|
208
|
+
| **documentAreaMin** | Specifies minimal area of the image that document should cover to be treated as candidate when locating. Value should be in range from 0 to 1, where 1 is when document should fully cover the image. | number | 0 | 0 - 1 |
|
|
209
|
+
| **depersonalizeLog** | When enabled, all personal data will be forcibly removed from the logs. | boolean | `false` | `true`, `false` |
|
|
210
|
+
| **multiDocOnImage** | This option allows locating and cropping multiple documents from one image if enabled. | boolean | `false` | `true`, `false` |
|
|
211
|
+
| **shiftExpiryDate** | This option allows shifting the date of expiry into the future or past for number of months specified. This is useful, for example, in some cases when document might be still valid for some period after original expiration date to prevent negative validity status for such documents. Or by shifting the date to the past will set negative validity for the documents that is about to expire in a specified number of months. | number | 0 | numbers > 0 |
|
|
212
|
+
| **minimalHolderAge** | This options allows specifying the minimal age in years of the document holder for the document to be considered valid. | number | 0 | numbers > 0 |
|
|
213
|
+
| **mrzFormatsFilter** | This option allows limiting MRZ formats to be recognized by specifying them in array. | string[] | [] | `'1x30'` - IDL, `'3x30'` - ID1, `'2x36'` - ID2, `'2x44'` - ID3, `'1x6'` - CAN, `'2x30'` - ID1 2x30 |
|
|
214
|
+
| **forceReadMrzBeforeLocate** | When enabled, make sure that in series processing MRZ is located fully inside the result document image, if present on the document. Enabling this option may add extra processing time, by disabling optimizations, but allows more stability in output image quality. | boolean | `false` | `true`, `false` |
|
|
215
|
+
| **parseBarcodes** | This option can be disabled to stop parsing after barcode is read. | boolean | `true` | `true`, `false` |
|
|
216
|
+
| **splitNames** | When enabled, the Surname and GivenNames field will be divided into ft_First_Name, ft_Second_Name, ft_Third_Name, ft_Fourth_Name, ft_Last_Name fields. | boolean | `false` | `true`, `false` |
|
|
217
|
+
|
|
218
|
+
**Attention!** If the `multipage-processing` or `internal-scenario` attributes are set, the `multipageProcessing` and `scenario` settings will be ignored.
|
|
187
219
|
|
|
188
220
|
### Events
|
|
189
221
|
|
|
@@ -199,9 +231,9 @@ documentReaderComponent.addEventListener('document-reader', (event) => console.l
|
|
|
199
231
|
cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.log(event.detail)); // Event listener for camera-snapshot component.
|
|
200
232
|
```
|
|
201
233
|
|
|
202
|
-
The
|
|
234
|
+
The `document-reader` type of event is generated for the document-reader component, and `camera-snapshot` type of event is generated for the camera-snapshot component.
|
|
203
235
|
|
|
204
|
-
The generated event object (
|
|
236
|
+
The generated event object (`event.detail`) contains three fields that describe the event:
|
|
205
237
|
|
|
206
238
|
```javascript
|
|
207
239
|
{
|
|
@@ -213,29 +245,30 @@ The generated event object (```event.detail```) contains three fields that descr
|
|
|
213
245
|
|
|
214
246
|
Type of actions:
|
|
215
247
|
|
|
216
|
-
| Type of action
|
|
217
|
-
|
|
218
|
-
|
|
|
219
|
-
|
|
|
220
|
-
|
|
|
221
|
-
|
|
|
222
|
-
|
|
|
223
|
-
|
|
|
224
|
-
|
|
|
225
|
-
|
|
|
226
|
-
|
|
|
227
|
-
|
|
|
228
|
-
|
|
229
|
-
|
|
248
|
+
| Type of action | Description of the action | In which component is present |
|
|
249
|
+
|:-------------------------|:-----------------------------------------------------------------:|:------------------------------------:|
|
|
250
|
+
| `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot` |
|
|
251
|
+
| `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
252
|
+
| `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
253
|
+
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
254
|
+
| `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
|
|
255
|
+
| `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
256
|
+
| `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
|
|
257
|
+
| `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader`, `camera-snapshot` |
|
|
258
|
+
| `FILE_PROCESS_STARTED` | File processing has started. | `document-reader`, `camera-snapshot` |
|
|
259
|
+
| `PROCESS_FINISHED` | The component has finished its work. | `document-reader`, `camera-snapshot` |
|
|
260
|
+
| `SERVICE_INITIALIZED` | The component has started its work. | `document-reader` |
|
|
261
|
+
|
|
262
|
+
In cases of successful operation of the components, the `data` field will contain the following fields:
|
|
230
263
|
|
|
231
264
|
```javascript
|
|
232
265
|
{
|
|
233
266
|
response: { ... }, // component result
|
|
234
|
-
status: 1 //
|
|
267
|
+
status: 1 // Or 2, if the process is completed by timeout
|
|
235
268
|
}
|
|
236
269
|
```
|
|
237
270
|
|
|
238
|
-
In cases of unsuccessful work, the
|
|
271
|
+
In cases of unsuccessful work, the `data` field will contain the following fields:
|
|
239
272
|
|
|
240
273
|
```javascript
|
|
241
274
|
{
|
|
@@ -244,20 +277,28 @@ In cases of unsuccessful work, the ```data``` field will contain the following f
|
|
|
244
277
|
}
|
|
245
278
|
```
|
|
246
279
|
|
|
280
|
+
Description of statuses:
|
|
281
|
+
|
|
282
|
+
| Status | Description of the status |
|
|
283
|
+
|:-------|:----------------------------------:|
|
|
284
|
+
| 0 | Process failed. |
|
|
285
|
+
| 1 | Process is completed successfully. |
|
|
286
|
+
| 2 | Process is completed by timeout. |
|
|
287
|
+
|
|
247
288
|
Table of error causes:
|
|
248
289
|
|
|
249
|
-
| Reason
|
|
250
|
-
|
|
251
|
-
|
|
|
252
|
-
|
|
|
253
|
-
|
|
|
254
|
-
|
|
|
255
|
-
|
|
|
256
|
-
|
|
|
257
|
-
|
|
|
258
|
-
|
|
|
259
|
-
|
|
|
260
|
-
|
|
|
290
|
+
| Reason | Description of the reason |
|
|
291
|
+
|:---------------------------|:-----------------------------------:|
|
|
292
|
+
| `WASM_ERROR` | Error in WASM. |
|
|
293
|
+
| `WASM_LICENSE` | Missing or incorrect license. |
|
|
294
|
+
| `FILE_SIZE` | The file size is too large. |
|
|
295
|
+
| `INCORRECT_FILE` | Problems with reading the file. |
|
|
296
|
+
| `UNKNOWN_ERROR` | Unknown error. |
|
|
297
|
+
| `NOT_SUPPORTED` | The browser is not supported. |
|
|
298
|
+
| `CAMERA_UNKNOWN_ERROR` | Unknown camera error. |
|
|
299
|
+
| `CAMERA_PERMISSION_DENIED` | Access to the camera is prohibited. |
|
|
300
|
+
| `NO_CAMERA` | There is no camera. |
|
|
301
|
+
| `CONNECTION_ERROR` | Connection errors. |
|
|
261
302
|
|
|
262
303
|
The table below describes the cases of event generation:
|
|
263
304
|
|
|
@@ -268,7 +309,7 @@ The table below describes the cases of event generation:
|
|
|
268
309
|
<th>Event type</th>
|
|
269
310
|
<th>
|
|
270
311
|
|
|
271
|
-
Event object
|
|
312
|
+
Event object `event.detail`
|
|
272
313
|
</th>
|
|
273
314
|
<th>Description</th>
|
|
274
315
|
</tr>
|
|
@@ -278,11 +319,7 @@ Event object ```event.detail```
|
|
|
278
319
|
<td>The component is mounted in the DOM.</td>
|
|
279
320
|
<td>
|
|
280
321
|
|
|
281
|
-
|
|
282
|
-
```document-reader```
|
|
283
|
-
|
|
284
|
-
For camera-snapshot:
|
|
285
|
-
```camera-snapshot```
|
|
322
|
+
`document-reader`, `camera-snapshot`
|
|
286
323
|
|
|
287
324
|
</td>
|
|
288
325
|
<td>
|
|
@@ -300,7 +337,8 @@ For camera-snapshot:
|
|
|
300
337
|
|
|
301
338
|
To receive this event, you must wrap the component in another element (for example, a div) and add an addEventListener to it. When the component appears in the DOM, the event will pop up.
|
|
302
339
|
|
|
303
|
-
|
|
340
|
+
For example:
|
|
341
|
+
|
|
304
342
|
```html
|
|
305
343
|
<div id="add-event-listener-to-this-element">
|
|
306
344
|
<document-reader></document-reader>
|
|
@@ -313,11 +351,7 @@ Example:
|
|
|
313
351
|
<td>The "From camera" button is pressed.</td>
|
|
314
352
|
<td>
|
|
315
353
|
|
|
316
|
-
|
|
317
|
-
```document-reader```
|
|
318
|
-
|
|
319
|
-
For camera-snapshot:
|
|
320
|
-
```camera-snapshot```
|
|
354
|
+
`document-reader`, `camera-snapshot`
|
|
321
355
|
|
|
322
356
|
</td>
|
|
323
357
|
<td>
|
|
@@ -337,11 +371,7 @@ For camera-snapshot:
|
|
|
337
371
|
<td>The "From gallery" button is pressed.</td>
|
|
338
372
|
<td>
|
|
339
373
|
|
|
340
|
-
|
|
341
|
-
```document-reader```
|
|
342
|
-
|
|
343
|
-
For camera-snapshot:
|
|
344
|
-
```camera-snapshot```
|
|
374
|
+
`document-reader`, `camera-snapshot`
|
|
345
375
|
|
|
346
376
|
</td>
|
|
347
377
|
<td>
|
|
@@ -361,11 +391,7 @@ For camera-snapshot:
|
|
|
361
391
|
<td>The "Retry" button is pressed.</td>
|
|
362
392
|
<td>
|
|
363
393
|
|
|
364
|
-
|
|
365
|
-
```document-reader```
|
|
366
|
-
|
|
367
|
-
For camera-snapshot:
|
|
368
|
-
```camera-snapshot```
|
|
394
|
+
`document-reader`, `camera-snapshot`
|
|
369
395
|
|
|
370
396
|
</td>
|
|
371
397
|
<td>
|
|
@@ -384,8 +410,8 @@ For camera-snapshot:
|
|
|
384
410
|
<tr>
|
|
385
411
|
<td>The "Skip page" button is pressed.</td>
|
|
386
412
|
<td>
|
|
387
|
-
|
|
388
|
-
|
|
413
|
+
|
|
414
|
+
`document-reader`
|
|
389
415
|
|
|
390
416
|
</td>
|
|
391
417
|
<td>
|
|
@@ -401,7 +427,7 @@ For camera-snapshot:
|
|
|
401
427
|
</td>
|
|
402
428
|
<td>
|
|
403
429
|
|
|
404
|
-
This event available only in
|
|
430
|
+
This event available only in `document-reader`.
|
|
405
431
|
|
|
406
432
|
</td>
|
|
407
433
|
</tr>
|
|
@@ -409,11 +435,7 @@ This event available only in ```document-reader```.
|
|
|
409
435
|
<td>The "Close" button is pressed.</td>
|
|
410
436
|
<td>
|
|
411
437
|
|
|
412
|
-
|
|
413
|
-
```document-reader```
|
|
414
|
-
|
|
415
|
-
For camera-snapshot:
|
|
416
|
-
```camera-snapshot```
|
|
438
|
+
`document-reader`, `camera-snapshot`
|
|
417
439
|
|
|
418
440
|
</td>
|
|
419
441
|
<td>
|
|
@@ -430,14 +452,70 @@ For camera-snapshot:
|
|
|
430
452
|
<td></td>
|
|
431
453
|
</tr>
|
|
432
454
|
<tr>
|
|
433
|
-
<td>The
|
|
455
|
+
<td>The "Close" button is pressed on the document recognition screen.</td>
|
|
434
456
|
<td>
|
|
435
457
|
|
|
436
|
-
|
|
437
|
-
|
|
458
|
+
`document-reader`, `camera-snapshot`
|
|
459
|
+
|
|
460
|
+
</td>
|
|
461
|
+
<td>
|
|
438
462
|
|
|
439
|
-
|
|
440
|
-
|
|
463
|
+
```javascript
|
|
464
|
+
{
|
|
465
|
+
action: "CAMERA_PROCESS_CLOSED",
|
|
466
|
+
data: null,
|
|
467
|
+
manual: true
|
|
468
|
+
}
|
|
469
|
+
```
|
|
470
|
+
|
|
471
|
+
</td>
|
|
472
|
+
<td></td>
|
|
473
|
+
</tr>
|
|
474
|
+
<tr>
|
|
475
|
+
<td>Recognition from the camera has started.</td>
|
|
476
|
+
<td>
|
|
477
|
+
|
|
478
|
+
`document-reader`, `camera-snapshot`
|
|
479
|
+
|
|
480
|
+
</td>
|
|
481
|
+
<td>
|
|
482
|
+
|
|
483
|
+
```javascript
|
|
484
|
+
{
|
|
485
|
+
action: "CAMERA_PROCESS_STARTED",
|
|
486
|
+
data: null,
|
|
487
|
+
manual: true
|
|
488
|
+
}
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
</td>
|
|
492
|
+
<td></td>
|
|
493
|
+
</tr>
|
|
494
|
+
<tr>
|
|
495
|
+
<td>File processing has started.</td>
|
|
496
|
+
<td>
|
|
497
|
+
|
|
498
|
+
`document-reader`, `camera-snapshot`
|
|
499
|
+
|
|
500
|
+
</td>
|
|
501
|
+
<td>
|
|
502
|
+
|
|
503
|
+
```javascript
|
|
504
|
+
{
|
|
505
|
+
action: "FILE_PROCESS_STARTED",
|
|
506
|
+
data: null,
|
|
507
|
+
manual: true
|
|
508
|
+
}
|
|
509
|
+
```
|
|
510
|
+
|
|
511
|
+
</td>
|
|
512
|
+
<td></td>
|
|
513
|
+
</tr>
|
|
514
|
+
<tr>
|
|
515
|
+
<td>The work of the component is completed successfully.</td>
|
|
516
|
+
<td>
|
|
517
|
+
|
|
518
|
+
`document-reader`, `camera-snapshot`
|
|
441
519
|
|
|
442
520
|
</td>
|
|
443
521
|
<td>
|
|
@@ -457,14 +535,37 @@ For camera-snapshot:
|
|
|
457
535
|
<td></td>
|
|
458
536
|
</tr>
|
|
459
537
|
<tr>
|
|
460
|
-
<td>The work of the component
|
|
538
|
+
<td>The work of the component is completed by timeout.</td>
|
|
539
|
+
<td>
|
|
540
|
+
|
|
541
|
+
`document-reader`
|
|
542
|
+
|
|
543
|
+
</td>
|
|
461
544
|
<td>
|
|
462
545
|
|
|
463
|
-
|
|
464
|
-
|
|
546
|
+
```javascript
|
|
547
|
+
{
|
|
548
|
+
action: "PROCESS_FINISHED",
|
|
549
|
+
data: {
|
|
550
|
+
response: { ... },
|
|
551
|
+
status: 2
|
|
552
|
+
},
|
|
553
|
+
manual: false
|
|
554
|
+
}
|
|
555
|
+
```
|
|
556
|
+
|
|
557
|
+
</td>
|
|
558
|
+
<td>
|
|
465
559
|
|
|
466
|
-
|
|
467
|
-
|
|
560
|
+
This event available only in `document-reader`.
|
|
561
|
+
|
|
562
|
+
</td>
|
|
563
|
+
</tr>
|
|
564
|
+
<tr>
|
|
565
|
+
<td>The work of the component failed.</td>
|
|
566
|
+
<td>
|
|
567
|
+
|
|
568
|
+
`document-reader`, `camera-snapshot`
|
|
468
569
|
|
|
469
570
|
</td>
|
|
470
571
|
<td>
|
|
@@ -473,7 +574,7 @@ For camera-snapshot:
|
|
|
473
574
|
{
|
|
474
575
|
action: "PROCESS_FINISHED",
|
|
475
576
|
data: {
|
|
476
|
-
reason: "
|
|
577
|
+
reason: "CAMERA_PERMISSION_DENIED",
|
|
477
578
|
status: 0
|
|
478
579
|
},
|
|
479
580
|
manual: false
|
|
@@ -487,7 +588,7 @@ For camera-snapshot:
|
|
|
487
588
|
<td>Component is initialized and ready to work.</td>
|
|
488
589
|
<td>
|
|
489
590
|
|
|
490
|
-
|
|
591
|
+
`document-reader`
|
|
491
592
|
|
|
492
593
|
</td>
|
|
493
594
|
<td>
|
|
@@ -503,7 +604,7 @@ For camera-snapshot:
|
|
|
503
604
|
</td>
|
|
504
605
|
<td>
|
|
505
606
|
|
|
506
|
-
This event available only in
|
|
607
|
+
This event available only in `document-reader`.
|
|
507
608
|
|
|
508
609
|
</td>
|
|
509
610
|
</tr>
|
|
@@ -512,7 +613,7 @@ This event available only in ```document-reader```.
|
|
|
512
613
|
|
|
513
614
|
### Response
|
|
514
615
|
|
|
515
|
-
You can get the response of the component in the
|
|
616
|
+
You can get the response of the component in the `detail.data.response` field of the event object.
|
|
516
617
|
|
|
517
618
|
For example:
|
|
518
619
|
|
|
@@ -533,30 +634,52 @@ component.addEventListener('document-reader', listener);
|
|
|
533
634
|
|
|
534
635
|
#### document-reader
|
|
535
636
|
|
|
536
|
-
| Attribute | Info
|
|
537
|
-
|
|
538
|
-
| **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.
|
|
539
|
-
| **internal-scenario** | The component document verification scenario. For more details, see the [Web components documentation](https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/getting-started#processing-scenarios).
|
|
540
|
-
| **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
|
|
541
|
-
| **start-screen** | Whether to show the start screen with two options for the document image uploading: From camera and From gallery. If
|
|
542
|
-
| **multiple** | Whether to allow uploading more than one file via the file system. Can be set to
|
|
543
|
-
| **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).
|
|
544
|
-
| **license** | To use the component on test environments, set the base64 license value to the
|
|
545
|
-
| **copyright** | Show Regula copyright footer.
|
|
546
|
-
| **
|
|
547
|
-
| **
|
|
637
|
+
| Attribute | Info | Data type | Default value | Values |
|
|
638
|
+
|:-------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
639
|
+
| **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` |
|
|
640
|
+
| **internal-scenario** | The component document verification scenario. For more details, see the [Web components documentation](https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/getting-started#processing-scenarios). | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` |
|
|
641
|
+
| **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` |
|
|
642
|
+
| **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` |
|
|
643
|
+
| **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` |
|
|
644
|
+
| **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` |
|
|
645
|
+
| **license** | To use the component on test environments, set the base64 license value to the `license` attribute. | string | `undefined` | `base64 license value` |
|
|
646
|
+
| **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` |
|
|
647
|
+
| **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` |
|
|
648
|
+
| **close-button** | Show the close button. | boolean | `true` | `true`, `false` |
|
|
649
|
+
| **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` |
|
|
548
650
|
|
|
549
651
|
#### camera-snapshot
|
|
550
652
|
|
|
551
|
-
| Attribute | Info
|
|
552
|
-
|
|
553
|
-
| **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.
|
|
554
|
-
| **start-screen** | Whether to show the start screen with two options for the document image uploading: From camera and From gallery. If
|
|
555
|
-
| **multiple** | Whether to allow uploading more than one file via the file system. Can be set to
|
|
556
|
-
| **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).
|
|
557
|
-
| **copyright** | Show Regula copyright footer.
|
|
558
|
-
| **
|
|
559
|
-
| **
|
|
653
|
+
| Attribute | Info | Data type | Default value | Values |
|
|
654
|
+
|:------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:-------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
655
|
+
| **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` |
|
|
656
|
+
| **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` |
|
|
657
|
+
| **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` |
|
|
658
|
+
| **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` |
|
|
659
|
+
| **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` |
|
|
660
|
+
| **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` |
|
|
661
|
+
| **close-button** | Show the close button. | boolean | `true` | `true`, `false` |
|
|
662
|
+
|
|
663
|
+
Instead of setting component attributes, you can use the `settings` property:
|
|
664
|
+
|
|
665
|
+
```javascript
|
|
666
|
+
const element = document.createElement('document-reader');
|
|
667
|
+
|
|
668
|
+
element.settings = {
|
|
669
|
+
startScreen: true, // start-screen attribute
|
|
670
|
+
locale: 'en', // locale attribute
|
|
671
|
+
internalScenario: 'MrzAndLocate', // internal-scenario attribute
|
|
672
|
+
multipageProcessing: true, // multipage-processing attribute
|
|
673
|
+
multipleFileInput: true, // multiple attribute
|
|
674
|
+
devLicense: 'YOUR_BASE64_LICENSE', // license attribute, use only on test environments
|
|
675
|
+
regulaLogo: true, // copyright attribute
|
|
676
|
+
cameraId: '', // camera-id attribute
|
|
677
|
+
changeCameraButton: true, // change-camera attribute
|
|
678
|
+
closeButton: true, // close-button attribute
|
|
679
|
+
};
|
|
680
|
+
|
|
681
|
+
body.append(element);
|
|
682
|
+
```
|
|
560
683
|
|
|
561
684
|
### Customization
|
|
562
685
|
|
|
@@ -564,13 +687,13 @@ component.addEventListener('document-reader', listener);
|
|
|
564
687
|
|
|
565
688
|
Using CSS variables, you can change the font and the main colors of the components.
|
|
566
689
|
|
|
567
|
-
| Variable | Info |
|
|
568
|
-
|
|
569
|
-
| **--font-family** | The font family of all text elements. If you change the font family, make sure to adjust the fond size so the message on the start screen would fit the frame. |
|
|
570
|
-
| **--font-size** | The font size for the text elements. |
|
|
571
|
-
| **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. |
|
|
572
|
-
| **--hover-color** | Buttons hover color. |
|
|
573
|
-
| **--active-color** | Buttons active color. |
|
|
690
|
+
| Variable | Info | Default value |
|
|
691
|
+
|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------:|
|
|
692
|
+
| **--font-family** | The font family of all text elements. If you change the font family, make sure to adjust the fond size so the message on the start screen would fit the frame. | `Noto Sans, sans-serif` |
|
|
693
|
+
| **--font-size** | The font size for the text elements. | `16px` |
|
|
694
|
+
| **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | `#bd7dff` |
|
|
695
|
+
| **--hover-color** | Buttons hover color. | `#c994ff` |
|
|
696
|
+
| **--active-color** | Buttons active color. | `#bd7dff` |
|
|
574
697
|
|
|
575
698
|
For example:
|
|
576
699
|
|
|
@@ -591,19 +714,21 @@ HTML:
|
|
|
591
714
|
|
|
592
715
|
#### Messages
|
|
593
716
|
|
|
594
|
-
To change the standard component messages or any text, specify the language you are using (or add your own) and the label you want to change (you can see the list of available languages in the [attribute](#attributes) descriptions section,
|
|
717
|
+
To change the standard component messages or any text, specify the language you are using (or add your own) and the label you want to change (you can see the list of available languages in the [attribute](#attributes) descriptions section, `locale` attribute):
|
|
595
718
|
|
|
596
719
|
```javascript
|
|
597
|
-
const element = document.
|
|
720
|
+
const element = document.createElement('document-reader');
|
|
598
721
|
|
|
599
722
|
element.translations = {
|
|
600
723
|
en: {
|
|
601
724
|
fromCamera: 'Use your camera',
|
|
602
725
|
},
|
|
603
726
|
};
|
|
727
|
+
|
|
728
|
+
body.append(element);
|
|
604
729
|
```
|
|
605
730
|
|
|
606
|
-
**Note**: to see the changes, don't forget to set the language you changed to the
|
|
731
|
+
**Note**: to see the changes, don't forget to set the language you changed to the `locale` attribute.
|
|
607
732
|
|
|
608
733
|
```html
|
|
609
734
|
<document-reader locale="en"></document-reader>
|
|
@@ -611,48 +736,48 @@ element.translations = {
|
|
|
611
736
|
|
|
612
737
|
List of labels used in the component:
|
|
613
738
|
|
|
614
|
-
| Label | Default message in
|
|
615
|
-
|
|
616
|
-
| **success** | Success! |
|
|
617
|
-
| **fileCorrupt** | This file is corrupt or not supported |
|
|
618
|
-
| **selectAnotherFile** | Please select another file |
|
|
619
|
-
| **error** | Error! |
|
|
620
|
-
| **somethingWentWrong** | Something went wrong |
|
|
621
|
-
| **tryAgain** | Try again |
|
|
622
|
-
| **fromCamera** | From camera |
|
|
623
|
-
| **fromGallery** | From gallery |
|
|
624
|
-
| **cameraUnavailable** | Camera unavailable! |
|
|
625
|
-
| **preparingCamera** | Preparing the camera... |
|
|
626
|
-
| **noCameraAvailable** | No camera available |
|
|
627
|
-
| **incorrectCameraId** | No camera with the specified ID found. |
|
|
628
|
-
| **allowAccessToCamera** | Allow access to the camera and reload this page to continue. |
|
|
629
|
-
| **cameraConnection** | Make sure the camera is connected correctly. |
|
|
630
|
-
| **checkCameraId** | Check if the specified camera ID is correct. |
|
|
631
|
-
| **scanIDInBrowser** | Scan an ID in your browser |
|
|
632
|
-
| **useYourDeviceCamera** | Use your device camera to scan a document or select a photo of the document from the gallery |
|
|
633
|
-
| **processingFinished** | Processing finished. |
|
|
634
|
-
| **largeFile** | This file is too large to be uploaded |
|
|
635
|
-
| **selectSmallerFile** | Please select a smaller file |
|
|
636
|
-
| **versionNotSupported** | Your browser version is not supported |
|
|
637
|
-
| **updateBrowser** | Update your browser version |
|
|
638
|
-
| **licenseError** | A license error has occurred |
|
|
639
|
-
| **licenseExpired** | The license cannot be found or has expired |
|
|
640
|
-
| **timeout** | Timeout |
|
|
641
|
-
| **processing** | Processing... |
|
|
642
|
-
| **preparingService** | Preparing the service... |
|
|
643
|
-
| **detectingDocument** | Detecting a document... |
|
|
644
|
-
| **placeDocumentIntoFrame** | Fit the document into the frame |
|
|
645
|
-
| **noFocus** | No camera focus |
|
|
646
|
-
| **moveCloser** | Move closer |
|
|
647
|
-
| **glaresOnDocument** | Avoid glare on the document |
|
|
648
|
-
| **holdDocumentStraight** | Hold the document straight |
|
|
649
|
-
| **documentProcessing** | Document processing... |
|
|
650
|
-
| **flipDocument** | Flip the document |
|
|
651
|
-
| **verified** | Verified! |
|
|
652
|
-
| **positionDocumentCenter** | Position the document in the center |
|
|
653
|
-
| **photoCapturedSuccessfully** | The photo is captured successfully. |
|
|
654
|
-
| **uploadPhoto** | Upload a photo |
|
|
655
|
-
| **useCameraOrGallery** | Use your device camera or select a photo from the gallery |
|
|
739
|
+
| Label | Default message in `en` locale | Used in |
|
|
740
|
+
|:------------------------------|:---------------------------------------------------------------------------------------------|:------------------------------------:|
|
|
741
|
+
| **success** | Success! | `document-reader`, `camera-snapshot` |
|
|
742
|
+
| **fileCorrupt** | This file is corrupt or not supported | `document-reader`, `camera-snapshot` |
|
|
743
|
+
| **selectAnotherFile** | Please select another file | `document-reader`, `camera-snapshot` |
|
|
744
|
+
| **error** | Error! | `document-reader`, `camera-snapshot` |
|
|
745
|
+
| **somethingWentWrong** | Something went wrong | `document-reader`, `camera-snapshot` |
|
|
746
|
+
| **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
|
|
747
|
+
| **fromCamera** | From camera | `document-reader`, `camera-snapshot` |
|
|
748
|
+
| **fromGallery** | From gallery | `document-reader`, `camera-snapshot` |
|
|
749
|
+
| **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
|
|
750
|
+
| **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
|
|
751
|
+
| **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
|
|
752
|
+
| **incorrectCameraId** | No camera with the specified ID found. | `document-reader`, `camera-snapshot` |
|
|
753
|
+
| **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | `document-reader`, `camera-snapshot` |
|
|
754
|
+
| **cameraConnection** | Make sure the camera is connected correctly. | `document-reader`, `camera-snapshot` |
|
|
755
|
+
| **checkCameraId** | Check if the specified camera ID is correct. | `document-reader`, `camera-snapshot` |
|
|
756
|
+
| **scanIDInBrowser** | Scan an ID in your browser | `document-reader` |
|
|
757
|
+
| **useYourDeviceCamera** | Use your device camera to scan a document or select a photo of the document from the gallery | `document-reader` |
|
|
758
|
+
| **processingFinished** | Processing finished. | `document-reader` |
|
|
759
|
+
| **largeFile** | This file is too large to be uploaded | `document-reader` |
|
|
760
|
+
| **selectSmallerFile** | Please select a smaller file | `document-reader` |
|
|
761
|
+
| **versionNotSupported** | Your browser version is not supported | `document-reader` |
|
|
762
|
+
| **updateBrowser** | Update your browser version | `document-reader` |
|
|
763
|
+
| **licenseError** | A license error has occurred | `document-reader` |
|
|
764
|
+
| **licenseExpired** | The license cannot be found or has expired | `document-reader` |
|
|
765
|
+
| **timeout** | Timeout | `document-reader` |
|
|
766
|
+
| **processing** | Processing... | `document-reader` |
|
|
767
|
+
| **preparingService** | Preparing the service... | `document-reader` |
|
|
768
|
+
| **detectingDocument** | Detecting a document... | `document-reader` |
|
|
769
|
+
| **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
|
|
770
|
+
| **noFocus** | No camera focus | `document-reader` |
|
|
771
|
+
| **moveCloser** | Move closer | `document-reader` |
|
|
772
|
+
| **glaresOnDocument** | Avoid glare on the document | `document-reader` |
|
|
773
|
+
| **holdDocumentStraight** | Hold the document straight | `document-reader` |
|
|
774
|
+
| **documentProcessing** | Document processing... | `document-reader` |
|
|
775
|
+
| **flipDocument** | Flip the document | `document-reader` |
|
|
776
|
+
| **verified** | Verified! | `document-reader` |
|
|
777
|
+
| **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
|
|
778
|
+
| **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
|
|
779
|
+
| **uploadPhoto** | Upload a photo | `camera-snapshot` |
|
|
780
|
+
| **useCameraOrGallery** | Use your device camera or select a photo from the gallery | `camera-snapshot` |
|
|
656
781
|
|
|
657
782
|
## Document reader SDK
|
|
658
783
|
|
|
@@ -660,19 +785,19 @@ You can use the document-reader SDK to create your own UI interface.
|
|
|
660
785
|
|
|
661
786
|
### SDK integration via NPM
|
|
662
787
|
|
|
663
|
-
Install
|
|
788
|
+
Install `@regulaforensics/vp-frontend-document-components`:
|
|
664
789
|
|
|
665
790
|
```
|
|
666
791
|
npm i @regulaforensics/vp-frontend-document-components
|
|
667
792
|
```
|
|
668
793
|
|
|
669
|
-
Import
|
|
794
|
+
Import `DocumentReaderProcessor` from `@regulaforensics/vp-frontend-document-components` into your `.js` file:
|
|
670
795
|
|
|
671
796
|
```javascript
|
|
672
797
|
import { DocumentReaderProcessor } from '@regulaforensics/vp-frontend-document-components'; // If you use module bundler. In other cases use full path '/node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js'.
|
|
673
798
|
```
|
|
674
799
|
|
|
675
|
-
Add video tag to
|
|
800
|
+
Add video tag to `.html` file then prepare and initialize `DocumentReaderProcessor`:
|
|
676
801
|
|
|
677
802
|
```javascript
|
|
678
803
|
const videoElement = document.getElementById('yourVideoElement');
|
|
@@ -694,16 +819,16 @@ try {
|
|
|
694
819
|
|
|
695
820
|
### SDK integration via CDN
|
|
696
821
|
|
|
697
|
-
Connect the script in your
|
|
822
|
+
Connect the script in your `.html` file. CDN link: `unpkg.com/:package@:version/:file`
|
|
698
823
|
|
|
699
824
|
For example:
|
|
700
825
|
|
|
701
826
|
```html
|
|
702
827
|
<!-- Replace <VERSION> with the package version. The list of versions is available on NPM in the versions section -->
|
|
703
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components
|
|
828
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
704
829
|
```
|
|
705
830
|
|
|
706
|
-
Add video tag to
|
|
831
|
+
Add video tag to `.html` file then prepare and initialize `DocumentReaderProcessor`. `DocumentReaderProcessor` is available in the global variable `window.Regula`:
|
|
707
832
|
|
|
708
833
|
```javascript
|
|
709
834
|
const { DocumentReaderProcessor } = window.Regula;
|
|
@@ -773,7 +898,7 @@ const result = await processor.startRecognition(pageListener);
|
|
|
773
898
|
|
|
774
899
|
#### processImage
|
|
775
900
|
|
|
776
|
-
Processes document files. Can process
|
|
901
|
+
Processes document files. Can process `FileList` or `Blob` array:
|
|
777
902
|
|
|
778
903
|
```javascript
|
|
779
904
|
const file = 'FileList or Blob array';
|
|
@@ -781,6 +906,14 @@ const file = 'FileList or Blob array';
|
|
|
781
906
|
const result = await processor.processImage(file);
|
|
782
907
|
```
|
|
783
908
|
|
|
909
|
+
#### switchCamera
|
|
910
|
+
|
|
911
|
+
If there are several cameras, it switches to the next one.
|
|
912
|
+
|
|
913
|
+
```javascript
|
|
914
|
+
await processor.switchCamera();
|
|
915
|
+
```
|
|
916
|
+
|
|
784
917
|
#### stopRecognition
|
|
785
918
|
|
|
786
919
|
Stops the document recognition process and ends the video stream.
|
|
@@ -810,7 +943,7 @@ processor.streamParam = {
|
|
|
810
943
|
|
|
811
944
|
#### recognizerProcessParam
|
|
812
945
|
|
|
813
|
-
Sets the settings for recognizing a document from the camera (
|
|
946
|
+
Sets the settings for recognizing a document from the camera (`startRecognition` method):
|
|
814
947
|
|
|
815
948
|
```javascript
|
|
816
949
|
// Default settings:
|
|
@@ -822,11 +955,11 @@ processor.recognizerProcessParam = {
|
|
|
822
955
|
},
|
|
823
956
|
};
|
|
824
957
|
```
|
|
825
|
-
See the list of all available settings [here](#settings).
|
|
958
|
+
See the list of all available settings [here](#document-reader-settings).
|
|
826
959
|
|
|
827
960
|
#### imageProcessParam
|
|
828
961
|
|
|
829
|
-
Sets the settings for recognizing a document as a file (
|
|
962
|
+
Sets the settings for recognizing a document as a file (`processImage` method):
|
|
830
963
|
|
|
831
964
|
```javascript
|
|
832
965
|
// Default settings:
|
|
@@ -839,7 +972,7 @@ processor.imageProcessParam = {
|
|
|
839
972
|
}
|
|
840
973
|
```
|
|
841
974
|
|
|
842
|
-
See the list of all available settings [here](#settings).
|
|
975
|
+
See the list of all available settings [here](#document-reader-settings).
|
|
843
976
|
|
|
844
977
|
#### recognizeListener
|
|
845
978
|
|
|
@@ -859,7 +992,7 @@ processor.recognizeListener = listener; // Not set by default.
|
|
|
859
992
|
|
|
860
993
|
#### videoElement
|
|
861
994
|
|
|
862
|
-
Sets the video element to display the video stream from the camera. This setting will change the video element that you set when creating the instance
|
|
995
|
+
Sets the video element to display the video stream from the camera. This setting will change the video element that you set when creating the instance `new DocumentReaderProcessor(videoElement)`:
|
|
863
996
|
|
|
864
997
|
```javascript
|
|
865
998
|
const videoElement = document.getElementById('HTMLVideoElement');
|
|
@@ -893,7 +1026,7 @@ processor.isProcessing; // True or false.
|
|
|
893
1026
|
|
|
894
1027
|
## Problems
|
|
895
1028
|
|
|
896
|
-
UI components and SDK use the
|
|
1029
|
+
UI components and SDK use the `getUserMedia` method to display the video stream from the camera. This feature is available only in secure contexts (HTTPS).
|
|
897
1030
|
|
|
898
1031
|
## Examples
|
|
899
1032
|
|