@regulaforensics/vp-frontend-document-components 2.3.0 → 2.5.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 +561 -327
- package/dist/main.js +1 -1
- package/dist/main.js.LICENSE.txt +10 -10
- package/esm/main.js +1 -1
- package/esm/main.js.LICENSE.txt +10 -10
- package/lib/index.d.ts +2425 -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 -684
- package/lib/contexts/DocumentAttributesContext.d.ts +0 -27
- 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 -62
- package/lib/services/FaceService.d.ts +0 -37
- package/lib/types.d.ts +0 -383
- 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,55 @@
|
|
|
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 recognition parameters](#document-recognition-parameters)
|
|
10
|
+
- [Events](#events)
|
|
11
|
+
- [Response](#response)
|
|
12
|
+
- [Settings and attributes](#settings-and-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
|
+
- [Package resources](#package-resources)
|
|
20
|
+
- [Problems](#problems)
|
|
21
|
+
- [Examples](#examples)
|
|
22
|
+
- [Additional resources](#additional-resources)
|
|
23
|
+
- [FAQ](#faq)
|
|
24
|
+
- [How do I collect logs?](#how-do-i-collect-logs)
|
|
19
25
|
|
|
20
26
|
---
|
|
21
27
|
|
|
22
|
-
##
|
|
28
|
+
## Overview
|
|
29
|
+
|
|
30
|
+
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.
|
|
31
|
+
|
|
32
|
+
The Document Reader web components package contains:
|
|
33
|
+
|
|
34
|
+
- _UI web components_ for document recognition.
|
|
35
|
+
- _the document reader SDK_ for creating your custom document reader UI interface.
|
|
36
|
+
|
|
37
|
+
The UI web components are:
|
|
38
|
+
|
|
39
|
+
- `document-reader` for documents recognition.
|
|
40
|
+
- `camera-snapshot` for capturing images from a camera or uploading from a gallery.
|
|
23
41
|
|
|
24
42
|
This package contains UI web components and SDK for documents recognition.
|
|
25
43
|
|
|
44
|
+
## Before you start
|
|
45
|
+
|
|
46
|
+
Please note that:
|
|
47
|
+
|
|
48
|
+
- The components work **only** under the HTTPS protocol on the website.
|
|
49
|
+
- The components library does register the components on the web page itself, so make sure to import the library to your website before adding the components to the web page code.
|
|
50
|
+
- 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).
|
|
51
|
+
- We do not include polyfills for older browsers in the package. If you need to support older versions of browsers in your project, you can simply install the necessary package. For example https://www.npmjs.com/package/@webcomponents/webcomponentsjs
|
|
52
|
+
|
|
26
53
|
## Compatibility
|
|
27
54
|
|
|
28
55
|
| Devices |  |  |  |
|
|
@@ -35,13 +62,13 @@ This package contains UI web components and SDK for documents recognition.
|
|
|
35
62
|
|
|
36
63
|
### Integration via NPM
|
|
37
64
|
|
|
38
|
-
Install
|
|
65
|
+
Install `@regulaforensics/vp-frontend-document-components`:
|
|
39
66
|
|
|
40
67
|
```
|
|
41
68
|
npm i @regulaforensics/vp-frontend-document-components
|
|
42
69
|
```
|
|
43
70
|
|
|
44
|
-
Import
|
|
71
|
+
Import `defineComponents` and `DocumentReaderService` from `@regulaforensics/vp-frontend-document-components` into your `.js` file:
|
|
45
72
|
|
|
46
73
|
```javascript
|
|
47
74
|
// If you use module bundler
|
|
@@ -51,139 +78,138 @@ import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-fro
|
|
|
51
78
|
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
|
|
52
79
|
```
|
|
53
80
|
|
|
54
|
-
Add
|
|
81
|
+
Add `DocumentReaderService` to the global variable `RegulaDocumentSDK`, define the components and initialize the service:
|
|
55
82
|
|
|
56
83
|
```javascript
|
|
57
84
|
window.RegulaDocumentSDK = new DocumentReaderService();
|
|
58
85
|
|
|
59
|
-
defineComponents().then(
|
|
60
|
-
|
|
61
|
-
});
|
|
86
|
+
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
|
|
87
|
+
// defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'BASE64_LICENSE_KEY' })); // To use the document-reader component on test environments, you have to set the base64 license
|
|
62
88
|
|
|
63
89
|
// 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
90
|
```
|
|
65
91
|
|
|
66
|
-
Add the component name to the
|
|
92
|
+
Add the component name to the `.html` file. The available components are:
|
|
67
93
|
|
|
68
94
|
```html
|
|
69
95
|
<document-reader></document-reader> <!-- for documents recognition -->
|
|
70
96
|
<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
|
|
71
97
|
```
|
|
72
98
|
|
|
73
|
-
Notice: To use ```<document-reader></document-reader>``` component on test environments, set the base64 license value to the ```license``` attribute. Example: ```<document-reader license="BASE64_LICENSE_KEY"></document-reader>```.
|
|
74
|
-
|
|
75
99
|
### Integration via CDN
|
|
76
100
|
|
|
77
|
-
Connect the script in your
|
|
101
|
+
Connect the script in your `.html` file. Here is the CDN link: `unpkg.com/:package@:version/:file`
|
|
78
102
|
|
|
79
103
|
For example:
|
|
80
104
|
|
|
81
105
|
```html
|
|
82
|
-
|
|
83
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@<VERSION>/dist/main.js"></script>
|
|
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;
|
|
90
113
|
|
|
91
114
|
window.RegulaDocumentSDK = new DocumentReaderService();
|
|
92
115
|
|
|
93
|
-
defineComponents().then(
|
|
94
|
-
|
|
95
|
-
});
|
|
116
|
+
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
|
|
117
|
+
// defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'BASE64_LICENSE_KEY' })); // To use the document-reader component on test environments, you have to set the base64 license
|
|
96
118
|
|
|
97
119
|
// 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
120
|
```
|
|
99
121
|
|
|
100
|
-
Add the component name to the
|
|
122
|
+
Add the component name to the `.html` file. The available components are:
|
|
101
123
|
|
|
102
124
|
```html
|
|
103
125
|
<document-reader></document-reader> <!-- for documents recognition -->
|
|
104
126
|
<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
|
|
105
127
|
```
|
|
106
128
|
|
|
107
|
-
|
|
129
|
+
### Document recognition parameters
|
|
108
130
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
After adding ```DocumentReaderService``` to the global variable, you can change the default document recognition settings:
|
|
131
|
+
After adding `DocumentReaderService` to the global variable, you can change the default document recognition settings:
|
|
112
132
|
|
|
113
133
|
```javascript
|
|
114
134
|
// Default settings for video capture (From camera button):
|
|
115
135
|
window.RegulaDocumentSDK.recognizerProcessParam = {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
},
|
|
136
|
+
processParam: {
|
|
137
|
+
returnUncroppedImage: true,
|
|
138
|
+
scenario: 'MrzAndLocate',
|
|
139
|
+
multipageProcessing: false,
|
|
140
|
+
returnPackageForReprocess: false,
|
|
141
|
+
timeout: 20000,
|
|
142
|
+
resultTypeOutput: [],
|
|
143
|
+
imageQa: {
|
|
144
|
+
expectedPass: ['dpiThreshold', 'glaresCheck', 'focusCheck'],
|
|
145
|
+
dpiThreshold: 130,
|
|
146
|
+
glaresCheck: true,
|
|
147
|
+
glaresCheckParams: {
|
|
148
|
+
imgMarginPart: 0.05,
|
|
149
|
+
maxGlaringPart: 0.01,
|
|
131
150
|
},
|
|
132
|
-
|
|
151
|
+
},
|
|
152
|
+
},
|
|
133
153
|
};
|
|
134
154
|
|
|
135
155
|
// Default settings for image processing (From gallery button):
|
|
136
156
|
window.RegulaDocumentSDK.imageProcessParam = {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
157
|
+
processParam: {
|
|
158
|
+
scenario: 'MrzAndLocate',
|
|
159
|
+
returnUncroppedImage: true,
|
|
160
|
+
returnPackageForReprocess: false,
|
|
161
|
+
},
|
|
162
|
+
};
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
You can also set the session id:
|
|
166
|
+
|
|
167
|
+
```javascript
|
|
168
|
+
window.RegulaDocumentSDK.imageProcessParam = {
|
|
169
|
+
tag: 'your session id',
|
|
142
170
|
};
|
|
143
171
|
```
|
|
144
172
|
|
|
145
173
|
#### Descriptions of settings
|
|
146
174
|
|
|
147
|
-
| Setting
|
|
148
|
-
|
|
149
|
-
| **returnUncroppedImage**
|
|
150
|
-
| **scenario**
|
|
151
|
-
| **multipageProcessing**
|
|
152
|
-
| **timeout**
|
|
153
|
-
| **resultTypeOutput**
|
|
154
|
-
| **returnPackageForReprocess**
|
|
155
|
-
| **imageQa**
|
|
156
|
-
| **expectedPass**
|
|
157
|
-
| **dpiThreshold**
|
|
158
|
-
| **glaresCheck**
|
|
159
|
-
| **glaresCheckParams**
|
|
160
|
-
| **imageOutputMaxHeight**
|
|
161
|
-
| **imageOutputMaxWidth**
|
|
162
|
-
| **
|
|
163
|
-
| **
|
|
164
|
-
| **
|
|
165
|
-
| **
|
|
166
|
-
| **
|
|
167
|
-
| **
|
|
168
|
-
| **
|
|
169
|
-
| **
|
|
170
|
-
| **
|
|
171
|
-
| **
|
|
172
|
-
| **
|
|
173
|
-
| **
|
|
174
|
-
| **
|
|
175
|
-
| **
|
|
176
|
-
| **
|
|
177
|
-
| **
|
|
178
|
-
| **
|
|
179
|
-
| **
|
|
180
|
-
| **
|
|
181
|
-
| **
|
|
182
|
-
| **
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
**Attention!** If the ```multipage-processing``` or ```internal-scenario``` attributes are set, the ```multipageProcessing``` and ```scenario``` settings will be ignored.
|
|
175
|
+
| Setting | Info | Data type | Default value | Values |
|
|
176
|
+
|:------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
177
|
+
| **returnUncroppedImage** | When enabled, returns input images in output. | boolean | `true` | `true`, `false` |
|
|
178
|
+
| **scenario** | Recognition scenario. | string | 'MrzAndLocate' | 'MrzAndLocate', 'MrzOrLocate', 'Mrz', 'Locate' |
|
|
179
|
+
| **multipageProcessing** | Enables multi-page document processing mode. | boolean | `true` | `true`, `false` |
|
|
180
|
+
| **timeout** | Recognition timeout in milliseconds. After this time process will be finished. | number | 2000 | numbers > 0 |
|
|
181
|
+
| **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 |
|
|
182
|
+
| **returnPackageForReprocess** | Enable returning the package for reprocessing on the backend. | boolean | `false` | `true`, `false` |
|
|
183
|
+
| **imageQa** | When enabled, image quality checks status affects document optical and overall status. | | | |
|
|
184
|
+
| **expectedPass** | Activated image quality checks. | string[] | ['dpiThreshold', 'glaresCheck', 'focusCheck'] | 'dpiThreshold', 'glaresCheck', 'focusCheck' |
|
|
185
|
+
| **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 |
|
|
186
|
+
| **glaresCheck** | This option enables glares check while performing image quality validation. | boolean | `true` | `true`, `false` |
|
|
187
|
+
| **glaresCheckParams** | Settings for glare check. | | | |
|
|
188
|
+
| **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 |
|
|
189
|
+
| **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 |
|
|
190
|
+
| **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[] | [] | |
|
|
191
|
+
| **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' |
|
|
192
|
+
| **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 |
|
|
193
|
+
| **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 |
|
|
194
|
+
| **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` |
|
|
195
|
+
| **customParams** | This option allows passing custom processing parameters that can be implemented in future without changing API. | Object | {} | |
|
|
196
|
+
| **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` |
|
|
197
|
+
| **updateOCRValidityByGlare** | When enabled, fail OCR field validity, if there is a glare over the text field on the image. | boolean | `false` | `true`, `false` |
|
|
198
|
+
| **returnCroppedBarcode** | When enabled, returns cropped barcode images for unknown documents. | boolean | `false` | `true`, `false` |
|
|
199
|
+
| **respectImageQuality** | When enabled, image quality checks status affects document optical and overall status. | boolean | `false` | `true`, `false` |
|
|
200
|
+
| **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... |
|
|
201
|
+
| **noGraphics** | When enabled, no graphic fields will be cropped from document image. | boolean | `false` | `true`, `false` |
|
|
202
|
+
| **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 |
|
|
203
|
+
| **depersonalizeLog** | When enabled, all personal data will be forcibly removed from the logs. | boolean | `false` | `true`, `false` |
|
|
204
|
+
| **multiDocOnImage** | This option allows locating and cropping multiple documents from one image if enabled. | boolean | `false` | `true`, `false` |
|
|
205
|
+
| **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 |
|
|
206
|
+
| **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 |
|
|
207
|
+
| **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 |
|
|
208
|
+
| **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` |
|
|
209
|
+
| **parseBarcodes** | This option can be disabled to stop parsing after barcode is read. | boolean | `true` | `true`, `false` |
|
|
210
|
+
| **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` |
|
|
211
|
+
|
|
212
|
+
**Attention!** If the `multipage-processing` or `internal-scenario` attributes are set, the `multipageProcessing` and `scenario` settings will be ignored.
|
|
187
213
|
|
|
188
214
|
### Events
|
|
189
215
|
|
|
@@ -199,47 +225,54 @@ documentReaderComponent.addEventListener('document-reader', (event) => console.l
|
|
|
199
225
|
cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.log(event.detail)); // Event listener for camera-snapshot component.
|
|
200
226
|
```
|
|
201
227
|
|
|
202
|
-
The
|
|
228
|
+
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
229
|
|
|
204
|
-
The generated event object (
|
|
230
|
+
The generated event object (`event.detail`) contains two fields that describe the event:
|
|
205
231
|
|
|
206
232
|
```javascript
|
|
207
233
|
{
|
|
208
|
-
action:
|
|
209
|
-
data: null, //
|
|
210
|
-
manual: true // event generated by user action or component by itself
|
|
234
|
+
action: 'PRESS_CAMERA_BUTTON', // The type of action that generated the event (all actions are described in the table below)
|
|
235
|
+
data: null, // Component data
|
|
211
236
|
}
|
|
212
237
|
```
|
|
213
238
|
|
|
214
239
|
Type of actions:
|
|
215
240
|
|
|
216
|
-
| Type of action | Description of the action |
|
|
217
|
-
|
|
218
|
-
|
|
|
219
|
-
|
|
|
220
|
-
|
|
|
221
|
-
|
|
|
222
|
-
|
|
|
223
|
-
|
|
|
224
|
-
|
|
|
225
|
-
|
|
|
226
|
-
|
|
|
227
|
-
|
|
|
228
|
-
|
|
229
|
-
|
|
241
|
+
| Type of action | Description of the action | In which component is present |
|
|
242
|
+
|:-----------------------------|:-----------------------------------------------------------------:|:------------------------------------:|
|
|
243
|
+
| `ELEMENT_VISIBLE` | Component is appended in the DOM. | `document-reader`, `camera-snapshot` |
|
|
244
|
+
| `PRESS_CAMERA_BUTTON` | The "From camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
245
|
+
| `PRESS_FILE_BUTTON` | The "From gallery" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
246
|
+
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
247
|
+
| `PRESS_SKIP_BUTTON` | The "Skip" button is pressed. | `document-reader` |
|
|
248
|
+
| `PRESS_CAPTURE_BUTTON` | The "Capture" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
249
|
+
| `PRESS_CHANGE_CAMERA_BUTTON` | The "Change camera" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
250
|
+
| `PRESS_MIRRORING_BUTTON` | The "Mirroring" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
251
|
+
| `NEW_PAGE_AVAILABLE` | The document contains another page. | `document-reader` |
|
|
252
|
+
| `NEW_PAGE_STARTED` | Recognition of a new page has started. | `document-reader` |
|
|
253
|
+
| `CLOSE` | The "Close" button is pressed. | `document-reader`, `camera-snapshot` |
|
|
254
|
+
| `CAMERA_PROCESS_CLOSED` | The "Close" button is pressed on the document recognition screen. | `document-reader`, `camera-snapshot` |
|
|
255
|
+
| `CAMERA_PROCESS_STARTED` | Recognition from the camera has started. | `document-reader` |
|
|
256
|
+
| `VIDEO_STARTED` | Video stream started. | `document-reader`, `camera-snapshot` |
|
|
257
|
+
| `VIDEO_STOPPED` | Video stream stopped. | `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
|
{
|
|
242
|
-
reason:
|
|
275
|
+
reason: 'CAMERA_PERMISSION_DENIED', // error reason (possible causes of errors are described in the table below)
|
|
243
276
|
status: 0
|
|
244
277
|
}
|
|
245
278
|
```
|
|
@@ -254,18 +287,19 @@ Description of statuses:
|
|
|
254
287
|
|
|
255
288
|
Table of error causes:
|
|
256
289
|
|
|
257
|
-
| Reason
|
|
258
|
-
|
|
259
|
-
|
|
|
260
|
-
|
|
|
261
|
-
|
|
|
262
|
-
|
|
|
263
|
-
|
|
|
264
|
-
|
|
|
265
|
-
|
|
|
266
|
-
|
|
|
267
|
-
|
|
|
268
|
-
|
|
|
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
|
+
| `INCORRECT_SCENARIO` | Scenario is not supported. |
|
|
297
|
+
| `UNKNOWN_ERROR` | Unknown error. |
|
|
298
|
+
| `NOT_SUPPORTED` | The browser is not supported. |
|
|
299
|
+
| `CAMERA_UNKNOWN_ERROR` | Unknown camera error. |
|
|
300
|
+
| `CAMERA_PERMISSION_DENIED` | Access to the camera is prohibited. |
|
|
301
|
+
| `NO_CAMERA` | There is no camera. |
|
|
302
|
+
| `CONNECTION_ERROR` | Connection errors. |
|
|
269
303
|
|
|
270
304
|
The table below describes the cases of event generation:
|
|
271
305
|
|
|
@@ -276,7 +310,7 @@ The table below describes the cases of event generation:
|
|
|
276
310
|
<th>Event type</th>
|
|
277
311
|
<th>
|
|
278
312
|
|
|
279
|
-
Event object
|
|
313
|
+
Event object `event.detail`
|
|
280
314
|
</th>
|
|
281
315
|
<th>Description</th>
|
|
282
316
|
</tr>
|
|
@@ -286,20 +320,15 @@ Event object ```event.detail```
|
|
|
286
320
|
<td>The component is mounted in the DOM.</td>
|
|
287
321
|
<td>
|
|
288
322
|
|
|
289
|
-
|
|
290
|
-
```document-reader```
|
|
291
|
-
|
|
292
|
-
For camera-snapshot:
|
|
293
|
-
```camera-snapshot```
|
|
323
|
+
`document-reader`, `camera-snapshot`
|
|
294
324
|
|
|
295
325
|
</td>
|
|
296
326
|
<td>
|
|
297
327
|
|
|
298
328
|
```javascript
|
|
299
329
|
{
|
|
300
|
-
action:
|
|
330
|
+
action: 'ELEMENT_VISIBLE',
|
|
301
331
|
data: null,
|
|
302
|
-
manual: true
|
|
303
332
|
}
|
|
304
333
|
```
|
|
305
334
|
|
|
@@ -308,7 +337,8 @@ For camera-snapshot:
|
|
|
308
337
|
|
|
309
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.
|
|
310
339
|
|
|
311
|
-
|
|
340
|
+
For example:
|
|
341
|
+
|
|
312
342
|
```html
|
|
313
343
|
<div id="add-event-listener-to-this-element">
|
|
314
344
|
<document-reader></document-reader>
|
|
@@ -321,20 +351,15 @@ Example:
|
|
|
321
351
|
<td>The "From camera" button is pressed.</td>
|
|
322
352
|
<td>
|
|
323
353
|
|
|
324
|
-
|
|
325
|
-
```document-reader```
|
|
326
|
-
|
|
327
|
-
For camera-snapshot:
|
|
328
|
-
```camera-snapshot```
|
|
354
|
+
`document-reader`, `camera-snapshot`
|
|
329
355
|
|
|
330
356
|
</td>
|
|
331
357
|
<td>
|
|
332
358
|
|
|
333
359
|
```javascript
|
|
334
360
|
{
|
|
335
|
-
action:
|
|
361
|
+
action: 'PRESS_CAMERA_BUTTON',
|
|
336
362
|
data: null,
|
|
337
|
-
manual: true
|
|
338
363
|
}
|
|
339
364
|
```
|
|
340
365
|
|
|
@@ -345,20 +370,15 @@ For camera-snapshot:
|
|
|
345
370
|
<td>The "From gallery" button is pressed.</td>
|
|
346
371
|
<td>
|
|
347
372
|
|
|
348
|
-
|
|
349
|
-
```document-reader```
|
|
350
|
-
|
|
351
|
-
For camera-snapshot:
|
|
352
|
-
```camera-snapshot```
|
|
373
|
+
`document-reader`, `camera-snapshot`
|
|
353
374
|
|
|
354
375
|
</td>
|
|
355
376
|
<td>
|
|
356
377
|
|
|
357
378
|
```javascript
|
|
358
379
|
{
|
|
359
|
-
action:
|
|
380
|
+
action: 'PRESS_FILE_BUTTON',
|
|
360
381
|
data: null,
|
|
361
|
-
manual: true
|
|
362
382
|
}
|
|
363
383
|
```
|
|
364
384
|
|
|
@@ -369,20 +389,15 @@ For camera-snapshot:
|
|
|
369
389
|
<td>The "Retry" button is pressed.</td>
|
|
370
390
|
<td>
|
|
371
391
|
|
|
372
|
-
|
|
373
|
-
```document-reader```
|
|
374
|
-
|
|
375
|
-
For camera-snapshot:
|
|
376
|
-
```camera-snapshot```
|
|
392
|
+
`document-reader`, `camera-snapshot`
|
|
377
393
|
|
|
378
394
|
</td>
|
|
379
395
|
<td>
|
|
380
396
|
|
|
381
397
|
```javascript
|
|
382
398
|
{
|
|
383
|
-
action:
|
|
399
|
+
action: 'PRESS_RETRY_BUTTON',
|
|
384
400
|
data: null,
|
|
385
|
-
manual: true
|
|
386
401
|
}
|
|
387
402
|
```
|
|
388
403
|
|
|
@@ -392,24 +407,129 @@ For camera-snapshot:
|
|
|
392
407
|
<tr>
|
|
393
408
|
<td>The "Skip page" button is pressed.</td>
|
|
394
409
|
<td>
|
|
395
|
-
|
|
396
|
-
|
|
410
|
+
|
|
411
|
+
`document-reader`
|
|
412
|
+
|
|
413
|
+
</td>
|
|
414
|
+
<td>
|
|
415
|
+
|
|
416
|
+
```javascript
|
|
417
|
+
{
|
|
418
|
+
action: 'PRESS_SKIP_BUTTON',
|
|
419
|
+
data: null,
|
|
420
|
+
}
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
</td>
|
|
424
|
+
<td>
|
|
425
|
+
|
|
426
|
+
This event available only in `document-reader`.
|
|
427
|
+
|
|
428
|
+
</td>
|
|
429
|
+
</tr>
|
|
430
|
+
<tr>
|
|
431
|
+
<td>The "Capture" button is pressed.</td>
|
|
432
|
+
<td>
|
|
433
|
+
|
|
434
|
+
`document-reader`, `camera-snapshot`
|
|
435
|
+
|
|
436
|
+
</td>
|
|
437
|
+
<td>
|
|
438
|
+
|
|
439
|
+
```javascript
|
|
440
|
+
{
|
|
441
|
+
action: 'PRESS_CAPTURE_BUTTON',
|
|
442
|
+
data: null,
|
|
443
|
+
}
|
|
444
|
+
```
|
|
445
|
+
|
|
446
|
+
</td>
|
|
447
|
+
<td>
|
|
448
|
+
</td>
|
|
449
|
+
</tr>
|
|
450
|
+
<tr>
|
|
451
|
+
<td>The "Change camera" button is pressed.</td>
|
|
452
|
+
<td>
|
|
453
|
+
|
|
454
|
+
`document-reader`, `camera-snapshot`
|
|
455
|
+
|
|
456
|
+
</td>
|
|
457
|
+
<td>
|
|
458
|
+
|
|
459
|
+
```javascript
|
|
460
|
+
{
|
|
461
|
+
action: 'PRESS_CHANGE_CAMERA_BUTTON',
|
|
462
|
+
data: null,
|
|
463
|
+
}
|
|
464
|
+
```
|
|
465
|
+
|
|
466
|
+
</td>
|
|
467
|
+
<td>
|
|
468
|
+
</td>
|
|
469
|
+
</tr>
|
|
470
|
+
<tr>
|
|
471
|
+
<td>The "Mirroring" button is pressed.</td>
|
|
472
|
+
<td>
|
|
473
|
+
|
|
474
|
+
`document-reader`, `camera-snapshot`
|
|
475
|
+
|
|
476
|
+
</td>
|
|
477
|
+
<td>
|
|
478
|
+
|
|
479
|
+
```javascript
|
|
480
|
+
{
|
|
481
|
+
action: 'PRESS_MIRRORING_BUTTON',
|
|
482
|
+
data: null,
|
|
483
|
+
}
|
|
484
|
+
```
|
|
485
|
+
|
|
486
|
+
</td>
|
|
487
|
+
<td>
|
|
488
|
+
</td>
|
|
489
|
+
</tr>
|
|
490
|
+
<tr>
|
|
491
|
+
<td>The document contains another page.</td>
|
|
492
|
+
<td>
|
|
493
|
+
|
|
494
|
+
`document-reader`
|
|
397
495
|
|
|
398
496
|
</td>
|
|
399
497
|
<td>
|
|
400
498
|
|
|
401
499
|
```javascript
|
|
402
500
|
{
|
|
403
|
-
action:
|
|
501
|
+
action: 'NEW_PAGE_AVAILABLE',
|
|
404
502
|
data: null,
|
|
405
|
-
manual: true
|
|
406
503
|
}
|
|
407
504
|
```
|
|
408
505
|
|
|
409
506
|
</td>
|
|
410
507
|
<td>
|
|
411
508
|
|
|
412
|
-
This event available only in
|
|
509
|
+
This event available only in `document-reader`.
|
|
510
|
+
|
|
511
|
+
</td>
|
|
512
|
+
</tr>
|
|
513
|
+
<tr>
|
|
514
|
+
<td>Recognition of a new page has started.</td>
|
|
515
|
+
<td>
|
|
516
|
+
|
|
517
|
+
`document-reader`
|
|
518
|
+
|
|
519
|
+
</td>
|
|
520
|
+
<td>
|
|
521
|
+
|
|
522
|
+
```javascript
|
|
523
|
+
{
|
|
524
|
+
action: 'NEW_PAGE_STARTED',
|
|
525
|
+
data: null,
|
|
526
|
+
}
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
</td>
|
|
530
|
+
<td>
|
|
531
|
+
|
|
532
|
+
This event available only in `document-reader`.
|
|
413
533
|
|
|
414
534
|
</td>
|
|
415
535
|
</tr>
|
|
@@ -417,20 +537,34 @@ This event available only in ```document-reader```.
|
|
|
417
537
|
<td>The "Close" button is pressed.</td>
|
|
418
538
|
<td>
|
|
419
539
|
|
|
420
|
-
|
|
421
|
-
|
|
540
|
+
`document-reader`, `camera-snapshot`
|
|
541
|
+
|
|
542
|
+
</td>
|
|
543
|
+
<td>
|
|
544
|
+
|
|
545
|
+
```javascript
|
|
546
|
+
{
|
|
547
|
+
action: 'CLOSE',
|
|
548
|
+
data: null,
|
|
549
|
+
}
|
|
550
|
+
```
|
|
551
|
+
|
|
552
|
+
</td>
|
|
553
|
+
<td></td>
|
|
554
|
+
</tr>
|
|
555
|
+
<tr>
|
|
556
|
+
<td>The "Close" button is pressed on the document recognition screen.</td>
|
|
557
|
+
<td>
|
|
422
558
|
|
|
423
|
-
|
|
424
|
-
```camera-snapshot```
|
|
559
|
+
`document-reader`, `camera-snapshot`
|
|
425
560
|
|
|
426
561
|
</td>
|
|
427
562
|
<td>
|
|
428
563
|
|
|
429
564
|
```javascript
|
|
430
565
|
{
|
|
431
|
-
action:
|
|
566
|
+
action: 'CAMERA_PROCESS_CLOSED',
|
|
432
567
|
data: null,
|
|
433
|
-
manual: true
|
|
434
568
|
}
|
|
435
569
|
```
|
|
436
570
|
|
|
@@ -441,20 +575,53 @@ For camera-snapshot:
|
|
|
441
575
|
<td>Recognition from the camera has started.</td>
|
|
442
576
|
<td>
|
|
443
577
|
|
|
444
|
-
|
|
445
|
-
|
|
578
|
+
`document-reader`, `camera-snapshot`
|
|
579
|
+
|
|
580
|
+
</td>
|
|
581
|
+
<td>
|
|
582
|
+
|
|
583
|
+
```javascript
|
|
584
|
+
{
|
|
585
|
+
action: 'CAMERA_PROCESS_STARTED',
|
|
586
|
+
data: null,
|
|
587
|
+
}
|
|
588
|
+
```
|
|
589
|
+
|
|
590
|
+
</td>
|
|
591
|
+
<td></td>
|
|
592
|
+
</tr>
|
|
593
|
+
<tr>
|
|
594
|
+
<td>Video stream started.</td>
|
|
595
|
+
<td>
|
|
596
|
+
|
|
597
|
+
`document-reader`, `camera-snapshot`
|
|
598
|
+
|
|
599
|
+
</td>
|
|
600
|
+
<td>
|
|
601
|
+
|
|
602
|
+
```javascript
|
|
603
|
+
{
|
|
604
|
+
action: 'VIDEO_STARTED',
|
|
605
|
+
data: null,
|
|
606
|
+
}
|
|
607
|
+
```
|
|
608
|
+
|
|
609
|
+
</td>
|
|
610
|
+
<td></td>
|
|
611
|
+
</tr>
|
|
612
|
+
<tr>
|
|
613
|
+
<td>Video stream stopped.</td>
|
|
614
|
+
<td>
|
|
446
615
|
|
|
447
|
-
|
|
448
|
-
```camera-snapshot```
|
|
616
|
+
`document-reader`, `camera-snapshot`
|
|
449
617
|
|
|
450
618
|
</td>
|
|
451
619
|
<td>
|
|
452
620
|
|
|
453
621
|
```javascript
|
|
454
622
|
{
|
|
455
|
-
action:
|
|
623
|
+
action: 'VIDEO_STOPPED',
|
|
456
624
|
data: null,
|
|
457
|
-
manual: true
|
|
458
625
|
}
|
|
459
626
|
```
|
|
460
627
|
|
|
@@ -465,20 +632,15 @@ For camera-snapshot:
|
|
|
465
632
|
<td>File processing has started.</td>
|
|
466
633
|
<td>
|
|
467
634
|
|
|
468
|
-
|
|
469
|
-
```document-reader```
|
|
470
|
-
|
|
471
|
-
For camera-snapshot:
|
|
472
|
-
```camera-snapshot```
|
|
635
|
+
`document-reader`, `camera-snapshot`
|
|
473
636
|
|
|
474
637
|
</td>
|
|
475
638
|
<td>
|
|
476
639
|
|
|
477
640
|
```javascript
|
|
478
641
|
{
|
|
479
|
-
action:
|
|
642
|
+
action: 'FILE_PROCESS_STARTED',
|
|
480
643
|
data: null,
|
|
481
|
-
manual: true
|
|
482
644
|
}
|
|
483
645
|
```
|
|
484
646
|
|
|
@@ -489,23 +651,18 @@ For camera-snapshot:
|
|
|
489
651
|
<td>The work of the component is completed successfully.</td>
|
|
490
652
|
<td>
|
|
491
653
|
|
|
492
|
-
|
|
493
|
-
```document-reader```
|
|
494
|
-
|
|
495
|
-
For camera-snapshot:
|
|
496
|
-
```camera-snapshot```
|
|
654
|
+
`document-reader`, `camera-snapshot`
|
|
497
655
|
|
|
498
656
|
</td>
|
|
499
657
|
<td>
|
|
500
658
|
|
|
501
659
|
```javascript
|
|
502
660
|
{
|
|
503
|
-
action:
|
|
661
|
+
action: 'PROCESS_FINISHED',
|
|
504
662
|
data: {
|
|
505
663
|
response: { ... },
|
|
506
664
|
status: 1
|
|
507
|
-
}
|
|
508
|
-
manual: false
|
|
665
|
+
}
|
|
509
666
|
}
|
|
510
667
|
```
|
|
511
668
|
|
|
@@ -516,26 +673,25 @@ For camera-snapshot:
|
|
|
516
673
|
<td>The work of the component is completed by timeout.</td>
|
|
517
674
|
<td>
|
|
518
675
|
|
|
519
|
-
|
|
676
|
+
`document-reader`
|
|
520
677
|
|
|
521
678
|
</td>
|
|
522
679
|
<td>
|
|
523
680
|
|
|
524
681
|
```javascript
|
|
525
682
|
{
|
|
526
|
-
action:
|
|
683
|
+
action: 'PROCESS_FINISHED',
|
|
527
684
|
data: {
|
|
528
685
|
response: { ... },
|
|
529
686
|
status: 2
|
|
530
|
-
}
|
|
531
|
-
manual: false
|
|
687
|
+
}
|
|
532
688
|
}
|
|
533
689
|
```
|
|
534
690
|
|
|
535
691
|
</td>
|
|
536
692
|
<td>
|
|
537
693
|
|
|
538
|
-
This event available only in
|
|
694
|
+
This event available only in `document-reader`.
|
|
539
695
|
|
|
540
696
|
</td>
|
|
541
697
|
</tr>
|
|
@@ -543,23 +699,18 @@ This event available only in ```document-reader```.
|
|
|
543
699
|
<td>The work of the component failed.</td>
|
|
544
700
|
<td>
|
|
545
701
|
|
|
546
|
-
|
|
547
|
-
```document-reader```
|
|
548
|
-
|
|
549
|
-
For camera-snapshot:
|
|
550
|
-
```camera-snapshot```
|
|
702
|
+
`document-reader`, `camera-snapshot`
|
|
551
703
|
|
|
552
704
|
</td>
|
|
553
705
|
<td>
|
|
554
706
|
|
|
555
707
|
```javascript
|
|
556
708
|
{
|
|
557
|
-
action:
|
|
709
|
+
action: 'PROCESS_FINISHED',
|
|
558
710
|
data: {
|
|
559
|
-
reason:
|
|
711
|
+
reason: 'CAMERA_PERMISSION_DENIED',
|
|
560
712
|
status: 0
|
|
561
|
-
}
|
|
562
|
-
manual: false
|
|
713
|
+
}
|
|
563
714
|
}
|
|
564
715
|
```
|
|
565
716
|
|
|
@@ -570,23 +721,22 @@ For camera-snapshot:
|
|
|
570
721
|
<td>Component is initialized and ready to work.</td>
|
|
571
722
|
<td>
|
|
572
723
|
|
|
573
|
-
|
|
724
|
+
`document-reader`
|
|
574
725
|
|
|
575
726
|
</td>
|
|
576
727
|
<td>
|
|
577
728
|
|
|
578
729
|
```javascript
|
|
579
730
|
{
|
|
580
|
-
action:
|
|
731
|
+
action: 'SERVICE_INITIALIZED',
|
|
581
732
|
data: null,
|
|
582
|
-
manual: false
|
|
583
733
|
}
|
|
584
734
|
```
|
|
585
735
|
|
|
586
736
|
</td>
|
|
587
737
|
<td>
|
|
588
738
|
|
|
589
|
-
This event available only in
|
|
739
|
+
This event available only in `document-reader`.
|
|
590
740
|
|
|
591
741
|
</td>
|
|
592
742
|
</tr>
|
|
@@ -595,7 +745,7 @@ This event available only in ```document-reader```.
|
|
|
595
745
|
|
|
596
746
|
### Response
|
|
597
747
|
|
|
598
|
-
You can get the response of the component in the
|
|
748
|
+
You can get the response of the component in the `detail.data.response` field of the event object.
|
|
599
749
|
|
|
600
750
|
For example:
|
|
601
751
|
|
|
@@ -612,34 +762,67 @@ function listener(event) {
|
|
|
612
762
|
component.addEventListener('document-reader', listener);
|
|
613
763
|
```
|
|
614
764
|
|
|
615
|
-
|
|
765
|
+
To get the results of processing each frame, you can set the callback function:
|
|
616
766
|
|
|
617
|
-
|
|
767
|
+
```javascript
|
|
768
|
+
window.RegulaDocumentSDK.recognizeListener = (response) => console.log(response);
|
|
769
|
+
```
|
|
618
770
|
|
|
619
|
-
|
|
620
|
-
|:-------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
621
|
-
| **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``` |
|
|
622
|
-
| **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``` |
|
|
623
|
-
| **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``` |
|
|
624
|
-
| **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``` |
|
|
625
|
-
| **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``` |
|
|
626
|
-
| **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``` |
|
|
627
|
-
| **license** | To use the component on test environments, set the base64 license value to the ```license``` attribute. | string | ```undefined``` | ```base64 license value``` |
|
|
628
|
-
| **copyright** | Show Regula copyright footer. | boolean | ```true``` | ```true```, ```false``` |
|
|
629
|
-
| **object-fit** | Object-fit of the video element. | string | ```contain``` | ```cover```, ```contain``` |
|
|
630
|
-
| **change-camera** | Show the camera switch button. | boolean | ```false``` | ```true```, ```false``` |
|
|
771
|
+
### Settings and attributes
|
|
631
772
|
|
|
632
|
-
|
|
773
|
+
There are two ways to set the settings, using the `settings` property or using attributes.
|
|
633
774
|
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
775
|
+
Using `settings` property:
|
|
776
|
+
|
|
777
|
+
```javascript
|
|
778
|
+
const element = document.createElement('document-reader');
|
|
779
|
+
|
|
780
|
+
element.settings = {
|
|
781
|
+
startScreen: true,
|
|
782
|
+
internalScenario: 'Locate',
|
|
783
|
+
multipageProcessing: true,
|
|
784
|
+
};
|
|
785
|
+
```
|
|
786
|
+
|
|
787
|
+
Using attributes:
|
|
788
|
+
|
|
789
|
+
```javascript
|
|
790
|
+
<document-reader start-screen internal-scenario="Locate"></document-reader>
|
|
791
|
+
```
|
|
792
|
+
|
|
793
|
+
We recommend using the `settings` property. New settings in the future will be available only in this method.
|
|
794
|
+
|
|
795
|
+
| Setting name | Attribute name | Info | Data type | Default value | Values | Available in |
|
|
796
|
+
|:------------------------------------------|:-------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:-----------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------:|
|
|
797
|
+
| **locale** | **locale** | The language of the component interface. If empty, the language is selected from the browser settings, if it is not found, the system language is taken. | string | `en` | `ru`, `en`, `de`, `pl`, `it`, `hu`, `zh`, `sk`, `uk`, `fr`, `es`, `pt`, `ar`, `nl`, `id`, `vi`, `ko`, `ms`, `ro`, `el`, `tr`, `ja`, `cs`, `th`, `hi`, `bn`, `he`, `fi`, `sv`, `da`, `hr`, `no` | `document-reader`, `camera-snapshot` |
|
|
798
|
+
| **internalScenario** | **internal-scenario** | The component document verification scenario. | string | `MrzAndLocate` | `MrzAndLocate`, `MrzOrLocate`, `Mrz`, `Locate`, `Barcode`, `MrzOrBarcode`, `BarcodeAndLocate` | `document-reader` |
|
|
799
|
+
| **multipageProcessing** | **multipage-processing** | Whether to allow processing of two pages in cases when the component detects an ID1-sized document. Multipage processing is not triggered for documents of other formats. If `true`, the component asks for the second page and processes it. If `false`, only one page/side of the document is processed regardless the document format. | boolean | `false` | `true`, `false` | `document-reader` |
|
|
800
|
+
| **startScreen** | **start-screen** | Whether to show the start screen with two options for the document image uploading: From camera and From gallery. If `true`, the start screen is shown. If `false`, no start screen is shown and instead the camera of the device is turned on automatically to capture the image of the document. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
801
|
+
| **multipleFileInput** | **multiple** | Whether to allow uploading more than one file via the file system. Can be set to `true` only if `startScreen` is `true`. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
802
|
+
| **cameraId** | **camera-id** | Ability to select a camera. You can get the device ID using [navigator.mediaDevices.enumerateDevices()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices). | string | `undefined` | `camera id string value` | `document-reader`, `camera-snapshot` |
|
|
803
|
+
| **devLicense** | **license** | To use the component on test environments, set the base64 license value to the `license` attribute. | string | `undefined` | `base64 license value` | `document-reader` |
|
|
804
|
+
| **regulaLogo** | **copyright** | Show Regula copyright footer. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
805
|
+
| **changeCameraButton** | **change-camera** | Show the camera switch button. | boolean | `false` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
806
|
+
| **closeButton** | **close-button** | Show the close button. | boolean | `true` | `true`, `false` | `document-reader`, `camera-snapshot` |
|
|
807
|
+
| **captureButton** | **capture-button** | Show the capture button. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
808
|
+
| **skipButton** | | Show the skip button for the second page. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
809
|
+
| **captureMode** | | Sets the capture mode. Mode `auto` - recognition starts immediately after the camera starts working. Mode `captureFrame` - recognition of the frame received after pressing the capture button. Mode `captureVideo` - recognition begins after pressing the button, pressing the button again will send the received frame for processing. | string | `auto` | `auto`, `captureVideo`, `captureFrame` | `document-reader` |
|
|
810
|
+
| **flipFrontIcon** | | Sets the front side of the document flip icon. You can set link (`https://example.link.com/icon.png`), image in base64 string (`data:image/svg+xml;base64,PHN2ZyBjbGF...`) or imported image if you use module bundler. | string | | `link to image`, `base64 string`, `imported image` | `document-reader` |
|
|
811
|
+
| **flipBackIcon** | | Sets the back side of the document flip icon. You can set link (`https://example.link.com/icon.png`), image in base64 string (`data:image/svg+xml;base64,PHN2ZyBjbGF...`) or imported image if you use module bundler. | string | | `link to image`, `base64 string`, `imported image` | `document-reader` |
|
|
812
|
+
| **cameraFrameBorderWidth** | | Sets the thickness of the document capture frame. | number | 5 | `any number` | `document-reader` |
|
|
813
|
+
| **backgroundMaskAlpha** | | Sets the transparency of the background outside the frame. | number | 0.5 | `from 0 to 1` | `document-reader` |
|
|
814
|
+
| **cameraFrameLandscapeAspectRatio** | | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | `any number` | `document-reader` |
|
|
815
|
+
| **cameraFramePortraitAspectRatio** | | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | `any number` | `document-reader` |
|
|
816
|
+
| **statusIcon** | | Show status icon. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
817
|
+
| **statusPositionMultiplier** | | Sets the vertical position of the status message. | number | | `from 0 to 2` | `document-reader` |
|
|
818
|
+
| **cameraFrameOffsetWidth** | | Sets the offset of the capture frame from the side edges in portrait mode. | number | | `any number` | `document-reader` |
|
|
819
|
+
| **cameraFrameVerticalPositionMultiplier** | | Sets the offset of the capture frame from the top edge in portrait mode. | number | | `from 0 to 2` | `document-reader` |
|
|
820
|
+
| **cameraFrameShapeType** | | Sets the capture frame shape type. | string | `line` | `line`, `corners` | `document-reader` |
|
|
821
|
+
| **cameraFrameLineCap** | | Sets the style of the end of the capture frame line when `cameraFrameShapeType='corners'` | string | `butt` | `butt`, `round`, `square` | `document-reader` |
|
|
822
|
+
| **cameraFrameLineLength** | | Sets the length of the capture frame line when `cameraFrameShapeType='corners'` | number | 5 | `any number` | `document-reader` |
|
|
823
|
+
| **cameraFrameCornerRadius** | | Sets the radius of rounding of the capture frame. | number | 15 | `any number` | `document-reader` |
|
|
824
|
+
| **cameraFrame** | | Show the capture frame. | boolean | `true` | `true`, `false` | `document-reader` |
|
|
825
|
+
| **nonce** | | Sets the unique nonce value to maintain the CSP policy. | string | `undefined` | `unique nonce value` | `document-reader`, `camera-snapshot` |
|
|
643
826
|
|
|
644
827
|
### Customization
|
|
645
828
|
|
|
@@ -647,13 +830,13 @@ component.addEventListener('document-reader', listener);
|
|
|
647
830
|
|
|
648
831
|
Using CSS variables, you can change the font and the main colors of the components.
|
|
649
832
|
|
|
650
|
-
| Variable | Info |
|
|
651
|
-
|
|
652
|
-
| **--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. |
|
|
653
|
-
| **--font-size** | The font size for the text elements. |
|
|
654
|
-
| **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. |
|
|
655
|
-
| **--hover-color** | Buttons hover color. |
|
|
656
|
-
| **--active-color** | Buttons active color. |
|
|
833
|
+
| Variable | Info | Default value |
|
|
834
|
+
|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------:|
|
|
835
|
+
| **--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` |
|
|
836
|
+
| **--font-size** | The font size for the text elements. | `16px` |
|
|
837
|
+
| **--main-color** | Color for the graphic elements of the component. By default, the brand Regula violet is set. | `#bd7dff` |
|
|
838
|
+
| **--hover-color** | Buttons hover color. | `#c994ff` |
|
|
839
|
+
| **--active-color** | Buttons active color. | `#bd7dff` |
|
|
657
840
|
|
|
658
841
|
For example:
|
|
659
842
|
|
|
@@ -674,19 +857,21 @@ HTML:
|
|
|
674
857
|
|
|
675
858
|
#### Messages
|
|
676
859
|
|
|
677
|
-
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,
|
|
860
|
+
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):
|
|
678
861
|
|
|
679
862
|
```javascript
|
|
680
|
-
const element = document.
|
|
863
|
+
const element = document.createElement('document-reader');
|
|
681
864
|
|
|
682
865
|
element.translations = {
|
|
683
866
|
en: {
|
|
684
867
|
fromCamera: 'Use your camera',
|
|
685
868
|
},
|
|
686
869
|
};
|
|
870
|
+
|
|
871
|
+
body.append(element);
|
|
687
872
|
```
|
|
688
873
|
|
|
689
|
-
**Note**: to see the changes, don't forget to set the language you changed to the
|
|
874
|
+
**Note**: to see the changes, don't forget to set the language you changed to the `locale` attribute.
|
|
690
875
|
|
|
691
876
|
```html
|
|
692
877
|
<document-reader locale="en"></document-reader>
|
|
@@ -694,48 +879,48 @@ element.translations = {
|
|
|
694
879
|
|
|
695
880
|
List of labels used in the component:
|
|
696
881
|
|
|
697
|
-
| Label | Default message in
|
|
698
|
-
|
|
699
|
-
| **success** | Success! |
|
|
700
|
-
| **fileCorrupt** | This file is corrupt or not supported |
|
|
701
|
-
| **selectAnotherFile** | Please select another file |
|
|
702
|
-
| **error** | Error! |
|
|
703
|
-
| **somethingWentWrong** | Something went wrong |
|
|
704
|
-
| **tryAgain** | Try again |
|
|
705
|
-
| **fromCamera** | From camera |
|
|
706
|
-
| **fromGallery** | From gallery |
|
|
707
|
-
| **cameraUnavailable** | Camera unavailable! |
|
|
708
|
-
| **preparingCamera** | Preparing the camera... |
|
|
709
|
-
| **noCameraAvailable** | No camera available |
|
|
710
|
-
| **incorrectCameraId** | No camera with the specified ID found. |
|
|
711
|
-
| **allowAccessToCamera** | Allow access to the camera and reload this page to continue. |
|
|
712
|
-
| **cameraConnection** | Make sure the camera is connected correctly. |
|
|
713
|
-
| **checkCameraId** | Check if the specified camera ID is correct. |
|
|
714
|
-
| **scanIDInBrowser** | Scan an ID in your browser |
|
|
715
|
-
| **useYourDeviceCamera** | Use your device camera to scan a document or select a photo of the document from the gallery |
|
|
716
|
-
| **processingFinished** | Processing finished. |
|
|
717
|
-
| **largeFile** | This file is too large to be uploaded |
|
|
718
|
-
| **selectSmallerFile** | Please select a smaller file |
|
|
719
|
-
| **versionNotSupported** | Your browser version is not supported |
|
|
720
|
-
| **updateBrowser** | Update your browser version |
|
|
721
|
-
| **licenseError** | A license error has occurred |
|
|
722
|
-
| **licenseExpired** | The license cannot be found or has expired |
|
|
723
|
-
| **timeout** | Timeout |
|
|
724
|
-
| **processing** | Processing... |
|
|
725
|
-
| **preparingService** | Preparing the service... |
|
|
726
|
-
| **detectingDocument** | Detecting a document... |
|
|
727
|
-
| **placeDocumentIntoFrame** | Fit the document into the frame |
|
|
728
|
-
| **noFocus** | No camera focus |
|
|
729
|
-
| **moveCloser** | Move closer |
|
|
730
|
-
| **glaresOnDocument** | Avoid glare on the document |
|
|
731
|
-
| **holdDocumentStraight** | Hold the document straight |
|
|
732
|
-
| **documentProcessing** | Document processing... |
|
|
733
|
-
| **flipDocument** | Flip the document |
|
|
734
|
-
| **verified** | Verified! |
|
|
735
|
-
| **positionDocumentCenter** | Position the document in the center |
|
|
736
|
-
| **photoCapturedSuccessfully** | The photo is captured successfully. |
|
|
737
|
-
| **uploadPhoto** | Upload a photo |
|
|
738
|
-
| **useCameraOrGallery** | Use your device camera or select a photo from the gallery |
|
|
882
|
+
| Label | Default message in `en` locale | Used in |
|
|
883
|
+
|:------------------------------|:---------------------------------------------------------------------------------------------|:------------------------------------:|
|
|
884
|
+
| **success** | Success! | `document-reader`, `camera-snapshot` |
|
|
885
|
+
| **fileCorrupt** | This file is corrupt or not supported | `document-reader`, `camera-snapshot` |
|
|
886
|
+
| **selectAnotherFile** | Please select another file | `document-reader`, `camera-snapshot` |
|
|
887
|
+
| **error** | Error! | `document-reader`, `camera-snapshot` |
|
|
888
|
+
| **somethingWentWrong** | Something went wrong | `document-reader`, `camera-snapshot` |
|
|
889
|
+
| **tryAgain** | Try again | `document-reader`, `camera-snapshot` |
|
|
890
|
+
| **fromCamera** | From camera | `document-reader`, `camera-snapshot` |
|
|
891
|
+
| **fromGallery** | From gallery | `document-reader`, `camera-snapshot` |
|
|
892
|
+
| **cameraUnavailable** | Camera unavailable! | `document-reader`, `camera-snapshot` |
|
|
893
|
+
| **preparingCamera** | Preparing the camera... | `document-reader`, `camera-snapshot` |
|
|
894
|
+
| **noCameraAvailable** | No camera available | `document-reader`, `camera-snapshot` |
|
|
895
|
+
| **incorrectCameraId** | No camera with the specified ID found. | `document-reader`, `camera-snapshot` |
|
|
896
|
+
| **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | `document-reader`, `camera-snapshot` |
|
|
897
|
+
| **cameraConnection** | Make sure the camera is connected correctly. | `document-reader`, `camera-snapshot` |
|
|
898
|
+
| **checkCameraId** | Check if the specified camera ID is correct. | `document-reader`, `camera-snapshot` |
|
|
899
|
+
| **scanIDInBrowser** | Scan an ID in your browser | `document-reader` |
|
|
900
|
+
| **useYourDeviceCamera** | Use your device camera to scan a document or select a photo of the document from the gallery | `document-reader` |
|
|
901
|
+
| **processingFinished** | Processing finished. | `document-reader` |
|
|
902
|
+
| **largeFile** | This file is too large to be uploaded | `document-reader` |
|
|
903
|
+
| **selectSmallerFile** | Please select a smaller file | `document-reader` |
|
|
904
|
+
| **versionNotSupported** | Your browser version is not supported | `document-reader` |
|
|
905
|
+
| **updateBrowser** | Update your browser version | `document-reader` |
|
|
906
|
+
| **licenseError** | A license error has occurred | `document-reader` |
|
|
907
|
+
| **licenseExpired** | The license cannot be found or has expired | `document-reader` |
|
|
908
|
+
| **timeout** | Timeout | `document-reader` |
|
|
909
|
+
| **processing** | Processing... | `document-reader` |
|
|
910
|
+
| **preparingService** | Preparing the service... | `document-reader` |
|
|
911
|
+
| **detectingDocument** | Detecting a document... | `document-reader` |
|
|
912
|
+
| **placeDocumentIntoFrame** | Fit the document into the frame | `document-reader` |
|
|
913
|
+
| **noFocus** | No camera focus | `document-reader` |
|
|
914
|
+
| **moveCloser** | Move closer | `document-reader` |
|
|
915
|
+
| **glaresOnDocument** | Avoid glare on the document | `document-reader` |
|
|
916
|
+
| **holdDocumentStraight** | Hold the document straight | `document-reader` |
|
|
917
|
+
| **documentProcessing** | Document processing... | `document-reader` |
|
|
918
|
+
| **flipDocument** | Flip the document | `document-reader` |
|
|
919
|
+
| **verified** | Verified! | `document-reader` |
|
|
920
|
+
| **positionDocumentCenter** | Position the document in the center | `camera-snapshot` |
|
|
921
|
+
| **photoCapturedSuccessfully** | The photo is captured successfully. | `camera-snapshot` |
|
|
922
|
+
| **uploadPhoto** | Upload a photo | `camera-snapshot` |
|
|
923
|
+
| **useCameraOrGallery** | Use your device camera or select a photo from the gallery | `camera-snapshot` |
|
|
739
924
|
|
|
740
925
|
## Document reader SDK
|
|
741
926
|
|
|
@@ -743,27 +928,26 @@ You can use the document-reader SDK to create your own UI interface.
|
|
|
743
928
|
|
|
744
929
|
### SDK integration via NPM
|
|
745
930
|
|
|
746
|
-
Install
|
|
931
|
+
Install `@regulaforensics/vp-frontend-document-components`:
|
|
747
932
|
|
|
748
933
|
```
|
|
749
934
|
npm i @regulaforensics/vp-frontend-document-components
|
|
750
935
|
```
|
|
751
936
|
|
|
752
|
-
Import
|
|
937
|
+
Import `DocumentReaderProcessor` from `@regulaforensics/vp-frontend-document-components` into your `.js` file:
|
|
753
938
|
|
|
754
939
|
```javascript
|
|
755
940
|
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'.
|
|
756
941
|
```
|
|
757
942
|
|
|
758
|
-
Add video tag to
|
|
943
|
+
Add video tag to `.html` file then prepare and initialize `DocumentReaderProcessor`:
|
|
759
944
|
|
|
760
945
|
```javascript
|
|
761
946
|
const videoElement = document.getElementById('yourVideoElement');
|
|
762
947
|
const processor = new DocumentReaderProcessor(videoElement);
|
|
763
948
|
|
|
764
949
|
try {
|
|
765
|
-
await processor.
|
|
766
|
-
await processor.initialize({license: 'BASE64_LICENSE_KEY'}); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
|
|
950
|
+
await processor.initialize({ license: 'BASE64_LICENSE_KEY' }); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
|
|
767
951
|
|
|
768
952
|
const result = await processor.startRecognition(); // Result of the document recognition will be located here.
|
|
769
953
|
|
|
@@ -777,16 +961,16 @@ try {
|
|
|
777
961
|
|
|
778
962
|
### SDK integration via CDN
|
|
779
963
|
|
|
780
|
-
Connect the script in your
|
|
964
|
+
Connect the script in your `.html` file. CDN link: `unpkg.com/:package@:version/:file`
|
|
781
965
|
|
|
782
966
|
For example:
|
|
783
967
|
|
|
784
968
|
```html
|
|
785
969
|
<!-- Replace <VERSION> with the package version. The list of versions is available on NPM in the versions section -->
|
|
786
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components
|
|
970
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
|
|
787
971
|
```
|
|
788
972
|
|
|
789
|
-
Add video tag to
|
|
973
|
+
Add video tag to `.html` file then prepare and initialize `DocumentReaderProcessor`. `DocumentReaderProcessor` is available in the global variable `window.Regula`:
|
|
790
974
|
|
|
791
975
|
```javascript
|
|
792
976
|
const { DocumentReaderProcessor } = window.Regula;
|
|
@@ -795,8 +979,7 @@ const videoElement = document.getElementById('yourVideoElement');
|
|
|
795
979
|
const processor = new DocumentReaderProcessor(videoElement);
|
|
796
980
|
|
|
797
981
|
try {
|
|
798
|
-
await processor.
|
|
799
|
-
await processor.initialize({license: 'BASE64_LICENSE_KEY'}); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
|
|
982
|
+
await processor.initialize({ license: 'BASE64_LICENSE_KEY' }); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
|
|
800
983
|
|
|
801
984
|
const result = await processor.startRecognition(); // Result of the document recognition will be located here.
|
|
802
985
|
|
|
@@ -810,20 +993,12 @@ try {
|
|
|
810
993
|
|
|
811
994
|
### Available DocumentReaderProcessor methods
|
|
812
995
|
|
|
813
|
-
#### prepare
|
|
814
|
-
|
|
815
|
-
Prepares SDK files. The method must be run before initialization:
|
|
816
|
-
|
|
817
|
-
```javascript
|
|
818
|
-
await processor.prepare();
|
|
819
|
-
```
|
|
820
|
-
|
|
821
996
|
#### initialize
|
|
822
997
|
|
|
823
|
-
Initializes the processor.
|
|
998
|
+
Initializes the processor. Accepts an object with a base64 license. An object with a license must be installed only to work on test environments. Do not install an object with a license in production mode:
|
|
824
999
|
|
|
825
1000
|
```javascript
|
|
826
|
-
await processor.initialize({license: 'BASE64_LICENSE_KEY'});
|
|
1001
|
+
await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
|
|
827
1002
|
```
|
|
828
1003
|
|
|
829
1004
|
#### startRecognition
|
|
@@ -856,7 +1031,7 @@ const result = await processor.startRecognition(pageListener);
|
|
|
856
1031
|
|
|
857
1032
|
#### processImage
|
|
858
1033
|
|
|
859
|
-
Processes document files. Can process
|
|
1034
|
+
Processes document files. Can process `FileList` or `Blob` array:
|
|
860
1035
|
|
|
861
1036
|
```javascript
|
|
862
1037
|
const file = 'FileList or Blob array';
|
|
@@ -864,6 +1039,14 @@ const file = 'FileList or Blob array';
|
|
|
864
1039
|
const result = await processor.processImage(file);
|
|
865
1040
|
```
|
|
866
1041
|
|
|
1042
|
+
#### switchCamera
|
|
1043
|
+
|
|
1044
|
+
If there are several cameras, it switches to the next one.
|
|
1045
|
+
|
|
1046
|
+
```javascript
|
|
1047
|
+
await processor.switchCamera();
|
|
1048
|
+
```
|
|
1049
|
+
|
|
867
1050
|
#### stopRecognition
|
|
868
1051
|
|
|
869
1052
|
Stops the document recognition process and ends the video stream.
|
|
@@ -893,7 +1076,7 @@ processor.streamParam = {
|
|
|
893
1076
|
|
|
894
1077
|
#### recognizerProcessParam
|
|
895
1078
|
|
|
896
|
-
Sets the settings for recognizing a document from the camera (
|
|
1079
|
+
Sets the settings for recognizing a document from the camera (`startRecognition` method):
|
|
897
1080
|
|
|
898
1081
|
```javascript
|
|
899
1082
|
// Default settings:
|
|
@@ -905,11 +1088,11 @@ processor.recognizerProcessParam = {
|
|
|
905
1088
|
},
|
|
906
1089
|
};
|
|
907
1090
|
```
|
|
908
|
-
See the list of all available settings [here](#settings).
|
|
1091
|
+
See the list of all available settings [here](#document-reader-settings).
|
|
909
1092
|
|
|
910
1093
|
#### imageProcessParam
|
|
911
1094
|
|
|
912
|
-
Sets the settings for recognizing a document as a file (
|
|
1095
|
+
Sets the settings for recognizing a document as a file (`processImage` method):
|
|
913
1096
|
|
|
914
1097
|
```javascript
|
|
915
1098
|
// Default settings:
|
|
@@ -922,7 +1105,7 @@ processor.imageProcessParam = {
|
|
|
922
1105
|
}
|
|
923
1106
|
```
|
|
924
1107
|
|
|
925
|
-
See the list of all available settings [here](#settings).
|
|
1108
|
+
See the list of all available settings [here](#document-reader-settings).
|
|
926
1109
|
|
|
927
1110
|
#### recognizeListener
|
|
928
1111
|
|
|
@@ -942,7 +1125,7 @@ processor.recognizeListener = listener; // Not set by default.
|
|
|
942
1125
|
|
|
943
1126
|
#### videoElement
|
|
944
1127
|
|
|
945
|
-
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
|
|
1128
|
+
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)`:
|
|
946
1129
|
|
|
947
1130
|
```javascript
|
|
948
1131
|
const videoElement = document.getElementById('HTMLVideoElement');
|
|
@@ -950,14 +1133,6 @@ const videoElement = document.getElementById('HTMLVideoElement');
|
|
|
950
1133
|
processor.videoElement = videoElement; // By default null.
|
|
951
1134
|
```
|
|
952
1135
|
|
|
953
|
-
#### isPrepared
|
|
954
|
-
|
|
955
|
-
Read-only property. Returns true if the processor has been prepared.
|
|
956
|
-
|
|
957
|
-
```javascript
|
|
958
|
-
processor.isPrepared; // True or false.
|
|
959
|
-
```
|
|
960
|
-
|
|
961
1136
|
#### isInitialized
|
|
962
1137
|
|
|
963
1138
|
Read-only property. Returns true if the processor has been initialized.
|
|
@@ -974,10 +1149,69 @@ Read-only property. Returns true if document recognition is not completed.
|
|
|
974
1149
|
processor.isProcessing; // True or false.
|
|
975
1150
|
```
|
|
976
1151
|
|
|
1152
|
+
## Package resources
|
|
1153
|
+
|
|
1154
|
+
Document-reader requires WASM (```ProcMgr.wasm```, ```ProcMgr.data```) and worker (```ProcMgr.worker.js```) files to work, by default these files are downloaded from our servers, but you can change the download source.
|
|
1155
|
+
|
|
1156
|
+
First download these files from our server, you can get the link in the ```window.RegulaDocumentSDK.workerPath``` field.
|
|
1157
|
+
|
|
1158
|
+
Then, in ```ProcMgr.worker.js``` file, use the search to find: ```https://wasm.regulaforensics.com``` and replace the full link with your address. Upload all three files (```ProcMgr.worker.js```, ```ProcMgr.wasm```, ```ProcMgr.data```) to the location you specified. Also change the address in ```windows.RegulaDocumentSDK```:
|
|
1159
|
+
|
|
1160
|
+
For document reader UI component:
|
|
1161
|
+
|
|
1162
|
+
```javascript
|
|
1163
|
+
// Set the file upload address before initializing the service.
|
|
1164
|
+
window.RegulaDocumentSDK.workerPath = 'https://my-wasm-and-worker-files.com';
|
|
1165
|
+
```
|
|
1166
|
+
|
|
1167
|
+
For DocumentReaderProcessor:
|
|
1168
|
+
|
|
1169
|
+
```javascript
|
|
1170
|
+
const processor = new DocumentReaderProcessor(videoElement);
|
|
1171
|
+
|
|
1172
|
+
processor.workerPath = 'https://my-wasm-and-worker-files.com';
|
|
1173
|
+
```
|
|
1174
|
+
|
|
1175
|
+
Note: the files must be located in the same directory and have the names specified above.
|
|
1176
|
+
|
|
977
1177
|
## Problems
|
|
978
1178
|
|
|
979
|
-
UI components and SDK use the
|
|
1179
|
+
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).
|
|
980
1180
|
|
|
981
1181
|
## Examples
|
|
982
1182
|
|
|
983
1183
|
You can see the examples of using the components on the [Samples page](https://github.com/regulaforensics/document-web-components-samples).
|
|
1184
|
+
|
|
1185
|
+
## Additional resources
|
|
1186
|
+
|
|
1187
|
+
The Document Reader SDK web components are also available on <a href="https://storybook-document.regulaforensics.com" target="_blank">Storybook</a>.
|
|
1188
|
+
|
|
1189
|
+
## FAQ
|
|
1190
|
+
|
|
1191
|
+
### How do I collect logs?
|
|
1192
|
+
|
|
1193
|
+
Logging can be helpful when you run into any issues. They contain information on how you use our products that helps us analyze, troubleshoot, and debug any issues you may experience.
|
|
1194
|
+
|
|
1195
|
+
1\. Add the `log` setting to the `processParam`:
|
|
1196
|
+
|
|
1197
|
+
```json
|
|
1198
|
+
{
|
|
1199
|
+
"processParam": {
|
|
1200
|
+
"log": true
|
|
1201
|
+
}
|
|
1202
|
+
}
|
|
1203
|
+
```
|
|
1204
|
+
|
|
1205
|
+
2\. Open the Developer menu in your browser.
|
|
1206
|
+
|
|
1207
|
+
3\. Go to the Console tab.
|
|
1208
|
+
|
|
1209
|
+
4\. In Console, enter the following line:
|
|
1210
|
+
|
|
1211
|
+
```
|
|
1212
|
+
localStorage.logger = 'main,wasm>console'
|
|
1213
|
+
```
|
|
1214
|
+
|
|
1215
|
+
5\. Reload the page.
|
|
1216
|
+
|
|
1217
|
+
6\. Start processing. Logs will display in Console.
|