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

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