@regulaforensics/vp-frontend-document-components 2.4.0 → 2.5.1

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.
Files changed (7) hide show
  1. package/README.md +349 -165
  2. package/dist/main.js +1 -1
  3. package/dist/main.js.LICENSE.txt +0 -10
  4. package/esm/main.js +1 -1
  5. package/esm/main.js.LICENSE.txt +0 -10
  6. package/lib/index.d.ts +74 -18
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -6,18 +6,22 @@
6
6
  - [UI components](#ui-components)
7
7
  - [Integration via NPM](#integration-via-npm)
8
8
  - [Integration via CDN](#integration-via-cdn)
9
- - [Document reader settings](#document-reader-settings)
9
+ - [Document recognition parameters](#document-recognition-parameters)
10
10
  - [Events](#events)
11
11
  - [Response](#response)
12
- - [Attributes](#attributes)
12
+ - [Settings and attributes](#settings-and-attributes)
13
13
  - [Customization](#customization)
14
14
  - [Document reader SDK](#document-reader-sdk)
15
15
  - [SDK integration via NPM](#sdk-integration-via-npm)
16
16
  - [SDK integration via CDN](#sdk-integration-via-cdn)
17
17
  - [Available DocumentReaderProcessor methods](#available-documentreaderprocessor-methods)
18
18
  - [DocumentReaderProcessor settings](#documentreaderprocessor-settings)
19
+ - [Package resources](#package-resources)
19
20
  - [Problems](#problems)
20
21
  - [Examples](#examples)
22
+ - [Additional resources](#additional-resources)
23
+ - [FAQ](#faq)
24
+ - [How do I collect logs?](#how-do-i-collect-logs)
21
25
 
22
26
  ---
23
27
 
@@ -41,9 +45,10 @@ This package contains UI web components and SDK for documents recognition.
41
45
 
42
46
  Please note that:
43
47
 
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.
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.
46
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
47
52
 
48
53
  ## Compatibility
49
54
 
@@ -73,14 +78,13 @@ import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-fro
73
78
  import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
74
79
  ```
75
80
 
76
- Add `DocumentReaderService` to the global variable `RegulaDocumentSDK`, define the components and prepare the service:
81
+ Add `DocumentReaderService` to the global variable `RegulaDocumentSDK`, define the components and initialize the service:
77
82
 
78
83
  ```javascript
79
84
  window.RegulaDocumentSDK = new DocumentReaderService();
80
85
 
81
- defineComponents().then(async () => {
82
- await window.RegulaDocumentSDK.prepare();
83
- });
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
84
88
 
85
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();
86
90
  ```
@@ -92,9 +96,6 @@ Add the component name to the `.html` file. The available components are:
92
96
  <camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
93
97
  ```
94
98
 
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>`.
97
-
98
99
  ### Integration via CDN
99
100
 
100
101
  Connect the script in your `.html` file. Here is the CDN link: `unpkg.com/:package@:version/:file`
@@ -102,7 +103,6 @@ Connect the script in your `.html` file. Here is the CDN link: `unpkg.com/:packa
102
103
  For example:
103
104
 
104
105
  ```html
105
- <!-- Replace <VERSION> with the package version. The list of versions is available on NPM in the versions section -->
106
106
  <script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.js"></script>
107
107
  ```
108
108
 
@@ -113,9 +113,8 @@ const { defineComponents, DocumentReaderService } = window.Regula;
113
113
 
114
114
  window.RegulaDocumentSDK = new DocumentReaderService();
115
115
 
116
- defineComponents().then(async () => {
117
- await window.RegulaDocumentSDK.prepare();
118
- });
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
119
118
 
120
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();
121
120
  ```
@@ -127,10 +126,7 @@ Add the component name to the `.html` file. The available components are:
127
126
  <camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
128
127
  ```
129
128
 
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>`.
132
-
133
- ### Document reader settings
129
+ ### Document recognition parameters
134
130
 
135
131
  After adding `DocumentReaderService` to the global variable, you can change the default document recognition settings:
136
132
 
@@ -176,44 +172,42 @@ window.RegulaDocumentSDK.imageProcessParam = {
176
172
 
177
173
  #### Descriptions of settings
178
174
 
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` |
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` |
217
211
 
218
212
  **Attention!** If the `multipage-processing` or `internal-scenario` attributes are set, the `multipageProcessing` and `scenario` settings will be ignored.
219
213
 
@@ -233,31 +227,37 @@ cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.l
233
227
 
234
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.
235
229
 
236
- The generated event object (`event.detail`) contains three fields that describe the event:
230
+ The generated event object (`event.detail`) contains two fields that describe the event:
237
231
 
238
232
  ```javascript
239
233
  {
240
- action: "PRESS_CAMERA_BUTTON", // the type of action that generated the event (all actions are described in the table below)
241
- data: null, // component data
242
- 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
243
236
  }
244
237
  ```
245
238
 
246
239
  Type of actions:
247
240
 
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` |
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
261
 
262
262
  In cases of successful operation of the components, the `data` field will contain the following fields:
263
263
 
@@ -272,7 +272,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
272
272
 
273
273
  ```javascript
274
274
  {
275
- reason: "CAMERA_PERMISSION_DENIED", // error reason (possible causes of errors are described in the table below)
275
+ reason: 'CAMERA_PERMISSION_DENIED', // error reason (possible causes of errors are described in the table below)
276
276
  status: 0
277
277
  }
278
278
  ```
@@ -293,6 +293,7 @@ Table of error causes:
293
293
  | `WASM_LICENSE` | Missing or incorrect license. |
294
294
  | `FILE_SIZE` | The file size is too large. |
295
295
  | `INCORRECT_FILE` | Problems with reading the file. |
296
+ | `INCORRECT_SCENARIO` | Scenario is not supported. |
296
297
  | `UNKNOWN_ERROR` | Unknown error. |
297
298
  | `NOT_SUPPORTED` | The browser is not supported. |
298
299
  | `CAMERA_UNKNOWN_ERROR` | Unknown camera error. |
@@ -326,9 +327,8 @@ Event object `event.detail`
326
327
 
327
328
  ```javascript
328
329
  {
329
- action: "ELEMENT_VISIBLE",
330
+ action: 'ELEMENT_VISIBLE',
330
331
  data: null,
331
- manual: true
332
332
  }
333
333
  ```
334
334
 
@@ -358,9 +358,8 @@ For example:
358
358
 
359
359
  ```javascript
360
360
  {
361
- action: "PRESS_CAMERA_BUTTON",
361
+ action: 'PRESS_CAMERA_BUTTON',
362
362
  data: null,
363
- manual: true
364
363
  }
365
364
  ```
366
365
 
@@ -378,9 +377,8 @@ For example:
378
377
 
379
378
  ```javascript
380
379
  {
381
- action: "PRESS_FILE_BUTTON",
380
+ action: 'PRESS_FILE_BUTTON',
382
381
  data: null,
383
- manual: true
384
382
  }
385
383
  ```
386
384
 
@@ -398,9 +396,8 @@ For example:
398
396
 
399
397
  ```javascript
400
398
  {
401
- action: "PRESS_RETRY_BUTTON",
399
+ action: 'PRESS_RETRY_BUTTON',
402
400
  data: null,
403
- manual: true
404
401
  }
405
402
  ```
406
403
 
@@ -418,9 +415,114 @@ For example:
418
415
 
419
416
  ```javascript
420
417
  {
421
- action: "PRESS_SKIP_BUTTON",
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`
495
+
496
+ </td>
497
+ <td>
498
+
499
+ ```javascript
500
+ {
501
+ action: 'NEW_PAGE_AVAILABLE',
502
+ data: null,
503
+ }
504
+ ```
505
+
506
+ </td>
507
+ <td>
508
+
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',
422
525
  data: null,
423
- manual: true
424
526
  }
425
527
  ```
426
528
 
@@ -442,9 +544,8 @@ This event available only in `document-reader`.
442
544
 
443
545
  ```javascript
444
546
  {
445
- action: "CLOSE",
547
+ action: 'CLOSE',
446
548
  data: null,
447
- manual: true
448
549
  }
449
550
  ```
450
551
 
@@ -462,9 +563,8 @@ This event available only in `document-reader`.
462
563
 
463
564
  ```javascript
464
565
  {
465
- action: "CAMERA_PROCESS_CLOSED",
566
+ action: 'CAMERA_PROCESS_CLOSED',
466
567
  data: null,
467
- manual: true
468
568
  }
469
569
  ```
470
570
 
@@ -482,9 +582,46 @@ This event available only in `document-reader`.
482
582
 
483
583
  ```javascript
484
584
  {
485
- action: "CAMERA_PROCESS_STARTED",
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>
615
+
616
+ `document-reader`, `camera-snapshot`
617
+
618
+ </td>
619
+ <td>
620
+
621
+ ```javascript
622
+ {
623
+ action: 'VIDEO_STOPPED',
486
624
  data: null,
487
- manual: true
488
625
  }
489
626
  ```
490
627
 
@@ -502,9 +639,8 @@ This event available only in `document-reader`.
502
639
 
503
640
  ```javascript
504
641
  {
505
- action: "FILE_PROCESS_STARTED",
642
+ action: 'FILE_PROCESS_STARTED',
506
643
  data: null,
507
- manual: true
508
644
  }
509
645
  ```
510
646
 
@@ -522,12 +658,11 @@ This event available only in `document-reader`.
522
658
 
523
659
  ```javascript
524
660
  {
525
- action: "PROCESS_FINISHED",
661
+ action: 'PROCESS_FINISHED',
526
662
  data: {
527
663
  response: { ... },
528
664
  status: 1
529
- },
530
- manual: false
665
+ }
531
666
  }
532
667
  ```
533
668
 
@@ -545,12 +680,11 @@ This event available only in `document-reader`.
545
680
 
546
681
  ```javascript
547
682
  {
548
- action: "PROCESS_FINISHED",
683
+ action: 'PROCESS_FINISHED',
549
684
  data: {
550
685
  response: { ... },
551
686
  status: 2
552
- },
553
- manual: false
687
+ }
554
688
  }
555
689
  ```
556
690
 
@@ -572,12 +706,11 @@ This event available only in `document-reader`.
572
706
 
573
707
  ```javascript
574
708
  {
575
- action: "PROCESS_FINISHED",
709
+ action: 'PROCESS_FINISHED',
576
710
  data: {
577
- reason: "CAMERA_PERMISSION_DENIED",
711
+ reason: 'CAMERA_PERMISSION_DENIED',
578
712
  status: 0
579
- },
580
- manual: false
713
+ }
581
714
  }
582
715
  ```
583
716
 
@@ -595,9 +728,8 @@ This event available only in `document-reader`.
595
728
 
596
729
  ```javascript
597
730
  {
598
- action: "SERVICE_INITIALIZED",
731
+ action: 'SERVICE_INITIALIZED',
599
732
  data: null,
600
- manual: false
601
733
  }
602
734
  ```
603
735
 
@@ -630,57 +762,68 @@ function listener(event) {
630
762
  component.addEventListener('document-reader', listener);
631
763
  ```
632
764
 
633
- ### Attributes
765
+ To get the results of processing each frame, you can set the callback function:
634
766
 
635
- #### document-reader
636
-
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` |
767
+ ```javascript
768
+ window.RegulaDocumentSDK.recognizeListener = (response) => console.log(response);
769
+ ```
650
770
 
651
- #### camera-snapshot
771
+ ### Settings and attributes
652
772
 
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` |
773
+ There are two ways to set the settings, using the `settings` property or using attributes.
662
774
 
663
- Instead of setting component attributes, you can use the `settings` property:
775
+ Using `settings` property:
664
776
 
665
777
  ```javascript
666
778
  const element = document.createElement('document-reader');
667
779
 
668
780
  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
781
+ startScreen: true,
782
+ internalScenario: 'Locate',
783
+ multipageProcessing: true,
679
784
  };
785
+ ```
680
786
 
681
- body.append(element);
787
+ Using attributes:
788
+
789
+ ```javascript
790
+ <document-reader start-screen internal-scenario="Locate"></document-reader>
682
791
  ```
683
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` |
826
+
684
827
  ### Customization
685
828
 
686
829
  #### Font and colors
@@ -804,8 +947,7 @@ const videoElement = document.getElementById('yourVideoElement');
804
947
  const processor = new DocumentReaderProcessor(videoElement);
805
948
 
806
949
  try {
807
- await processor.prepare();
808
- 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.
809
951
 
810
952
  const result = await processor.startRecognition(); // Result of the document recognition will be located here.
811
953
 
@@ -837,8 +979,7 @@ const videoElement = document.getElementById('yourVideoElement');
837
979
  const processor = new DocumentReaderProcessor(videoElement);
838
980
 
839
981
  try {
840
- await processor.prepare();
841
- 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.
842
983
 
843
984
  const result = await processor.startRecognition(); // Result of the document recognition will be located here.
844
985
 
@@ -852,20 +993,12 @@ try {
852
993
 
853
994
  ### Available DocumentReaderProcessor methods
854
995
 
855
- #### prepare
856
-
857
- Prepares SDK files. The method must be run before initialization:
858
-
859
- ```javascript
860
- await processor.prepare();
861
- ```
862
-
863
996
  #### initialize
864
997
 
865
- Initializes the processor. The method must be run after preparing. 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:
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:
866
999
 
867
1000
  ```javascript
868
- await processor.initialize({license: 'BASE64_LICENSE_KEY'});
1001
+ await processor.initialize({ license: 'BASE64_LICENSE_KEY' });
869
1002
  ```
870
1003
 
871
1004
  #### startRecognition
@@ -1000,14 +1133,6 @@ const videoElement = document.getElementById('HTMLVideoElement');
1000
1133
  processor.videoElement = videoElement; // By default null.
1001
1134
  ```
1002
1135
 
1003
- #### isPrepared
1004
-
1005
- Read-only property. Returns true if the processor has been prepared.
1006
-
1007
- ```javascript
1008
- processor.isPrepared; // True or false.
1009
- ```
1010
-
1011
1136
  #### isInitialized
1012
1137
 
1013
1138
  Read-only property. Returns true if the processor has been initialized.
@@ -1024,6 +1149,31 @@ Read-only property. Returns true if document recognition is not completed.
1024
1149
  processor.isProcessing; // True or false.
1025
1150
  ```
1026
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
+
1027
1177
  ## Problems
1028
1178
 
1029
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).
@@ -1031,3 +1181,37 @@ UI components and SDK use the `getUserMedia` method to display the video stream
1031
1181
  ## Examples
1032
1182
 
1033
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
+ - Open the Developer menu in your browser.
1196
+
1197
+ - Go to the Console tab.
1198
+
1199
+ - In Console, enter the following line:
1200
+
1201
+ ```
1202
+ localStorage.logger = 'main,wasm>console'
1203
+ ```
1204
+
1205
+ - Reload the page.
1206
+
1207
+ - Add the `log` setting to the `processParam`:
1208
+
1209
+ ```json
1210
+ {
1211
+ "processParam": {
1212
+ "log": true
1213
+ }
1214
+ }
1215
+ ```
1216
+
1217
+ - Start processing. Logs will display in Console.