@regulaforensics/vp-frontend-document-components 1.2.0 → 2.0.0

package/README.md

@@ -1,160 +1,492 @@
 # Table of contents
 1. [About](#about)
-1. [Compatibility](#compatibility)
-1. [Install via NPM](#install-via-npm)
-1. [Install via CDN](#install-via-cdn)
-1. [Components events](#components-events)
-1. [Components response](#components-response)
-1. [Components attributes](#components-attributes)
-1. [Components customization](#components-customization)
-1. [Examples](#examples)
+2. [Compatibility](#compatibility)
+3. [UI components](#ui-components)
+   * [Integration via NPM](#integration-via-npm)
+   * [Integration via CDN](#integration-via-cdn)
+   * [Events](#events)
+   * [Response](#response)
+   * [Attributes](#attributes)
+   * [Customization](#customization)
+4. [Document reader SDK](#document-reader-sdk)
+   * [SDK integration via NPM](#sdk-integration-via-npm)
+   * [SDK integration via CDN](#sdk-integration-via-cdn)
+   * [Available DocumentReaderProcessor methods](#available-documentreaderprocessor-methods)
+   * [DocumentReaderProcessor settings](#documentreaderprocessor-settings)
+5. [Problems](#problems)
+6. [Examples](#examples)
 
 ---
 
 ## About
 
-This package contains web components for documents recognition.
+This package contains UI web components and SDK for documents recognition.
 
 ## Compatibility
 
-| Devices              | ![Chrome](documents/images/chrome.png) | ![FireFox](documents/images/firefox.png) | ![Safari](documents/images/safari.png) |
-|:---------------------|:--------------------------------------:|:----------------------------------------:|:--------------------------------------:|
-| **Mobile (iOS)**     |                   99                   |                    99                    |                   11                   |
-| **Mobile (Android)** |                   66                   |                    68                    |                   -                    |
-| **Desktop**          |                   61                   |                    60                    |                   11                   |
+| 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) |
+|:---------------------|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|
+| **Mobile (iOS)**     |                                                99                                                 |                                                  99                                                  |                                                11                                                 |
+| **Mobile (Android)** |                                                66                                                 |                                                  61                                                  |                                                 -                                                 |
+| **Desktop**          |                                                61                                                 |                                                  60                                                  |                                                11                                                 |
 
-## Install via NPM
+## UI components
 
-On the command line, navigate to the root directory of your project:
+### Integration via NPM
+
+Install ```@regulaforensics/vp-frontend-document-components```:
 
 ```
-cd /path/to/project
+npm i @regulaforensics/vp-frontend-document-components
 ```
 
-Run the following command:
+Import ```defineComponents``` and ```DocumentReaderService``` from ```@regulaforensics/vp-frontend-document-components``` into your ```.js``` file:
 
+```javascript
+// If you use module bundler
+import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-frontend-document-components';
+
+// If you don't use module bundler
+import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/esm/main.js';
 ```
-npm init
-```
-Answer the questions in the command line questionnaire.
 
-Install ```@regulaforensics/vp-frontend-document-components```:
+Add ```DocumentReaderService``` to the global variable ```RegulaDocumentSDK```, define the components and prepare the service:
+
+```javascript
+window.RegulaDocumentSDK = new DocumentReaderService();
+
+defineComponents().then(async () => {
+  await window.RegulaDocumentSDK.prepare();
+});
 
+// 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();
 ```
-npm i @regulaforensics/vp-frontend-document-components
+
+Add the component name to the ```.html``` file. The available components are:
+
+```html
+<document-reader></document-reader> <!-- for documents recognition -->
+<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
 ```
 
-Create ```index.html``` and ```index.js``` files in the root directory of the project.
+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>```.
 
-Import ```@regulaforensics/vp-frontend-document-components``` into your ```index.js```:
+### Integration via CDN
 
-```javascript
-import './node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';
+Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:version/:file```
+
+For example:
+
+```html
+<!-- Replace <VERSION> with the package version. The list of versions is available on NPM in the versions section -->
+<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@<VERSION>/dist/main.js"></script>
 ```
 
-In ```index.html```, connect ```index.js``` and add the name of the component you want to use. The available components are:
+In your ```.js``` file define the components and prepare the service. ```DocumentReaderService``` and ```defineComponents``` are available in the global variable ```window.Regula```:
 
-- ```<document-reader></document-reader>``` - for documents recognition;
-- ```<camera-snapshot></camera-snapshot>``` - to capture images from the camera and gallery.
+```javascript
+const { defineComponents, DocumentReaderService } = window.Regula;
 
-For example:
+window.RegulaDocumentSDK = new DocumentReaderService();
+
+defineComponents().then(async () => {
+  await window.RegulaDocumentSDK.prepare();
+});
+
+// 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();
+```
+
+Add the component name to the ```.html``` file. The available components are:
 
 ```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>My app</title>
-  </head>
-  <body>
-    <camera-snapshot></camera-snapshot>
-    <script type="module" src="index.js"></script>
-  </body>
-</html>
+<document-reader></document-reader> <!-- for documents recognition -->
+<camera-snapshot></camera-snapshot> <!-- to capture images from the camera and gallery -->
 ```
 
-## Install via CDN
+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>```.
 
-Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:version/:file```
+### Events
+
+You can subscribe to the component events.
 
 For example:
 
+```javascript
+const documentReaderComponent = document.querySelector('document-reader'); 
+const cameraSnapshotComponent = document.querySelector('camera-snapshot');
+
+documentReaderComponent.addEventListener('document-reader', (event) => console.log(event.detail)); // Event listener for document-reader component.
+cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.log(event.detail)); // Event listener for camera-snapshot component.
+```
+
+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.
+
+The generated event object (```event.detail```) contains three fields that describe the event:
+
+```javascript
+{
+  action: "PRESS_CAMERA_BUTTON", // the type of action that generated the event (all actions are described in the table below)
+  data: null, // component data
+  manual: true // event generated by user action or component by itself
+}
+```
+
+Type of actions:
+
+| Type of action            |       Description of the action       |        In which component is present         |
+|:--------------------------|:-------------------------------------:|:--------------------------------------------:|
+| ```ELEMENT_VISIBLE```     |   Component is appended in the DOM.   | ```document-reader```, ```camera-snapshot``` |
+| ```PRESS_CAMERA_BUTTON``` | The "From camera" button is pressed.  | ```document-reader```, ```camera-snapshot``` |
+| ```PRESS_FILE_BUTTON```   | The "From gallery" button is pressed. | ```document-reader```, ```camera-snapshot``` |
+| ```PRESS_RETRY_BUTTON```  |    The "Retry" button is pressed.     | ```document-reader```, ```camera-snapshot``` |
+| ```PRESS_SKIP_BUTTON```   |     The "Skip" button is pressed.     |            ```document-reader```             |
+| ```CLOSE```               |    The "Close" button is pressed.     | ```document-reader```, ```camera-snapshot``` |
+| ```PROCESS_FINISHED```    | The component has finished its work.  | ```document-reader```, ```camera-snapshot``` |
+| ```SERVICE_INITIALIZED``` |  The component has started its work.  |            ```document-reader```             |
+
+In cases of successful operation of the components, the ```data``` field will contain the following fields:
+
+```javascript
+{
+  response: { ... }, // component result
+  status: 1 // 1 for successful work and 0 for unsuccessful
+}
+```
+
+In cases of unsuccessful work, the ```data``` field will contain the following fields:
+
+```javascript
+{
+  reason: "CAMERA_PERMISSION_DENIED", // error reason (possible causes of errors are described in the table below)
+  status: 0
+}
+```
+
+Table of error causes:
+
+| Reason                         |      Description of the reason      |
+|:-------------------------------|:-----------------------------------:|
+| ```WASM_ERROR```               |           Error in WASM.            |
+| ```WASM_LICENSE```             |    Missing or incorrect license.    |
+| ```FILE_SIZE```                |     The file size is too large.     |
+| ```INCORRECT_FILE```           |   Problems with reading the file.   |
+| ```UNKNOWN_ERROR```            |           Unknown error.            |
+| ```NOT_SUPPORTED```            |    The browser is not supported.    |
+| ```CAMERA_UNKNOWN_ERROR```     |        Unknown camera error.        |
+| ```CAMERA_PERMISSION_DENIED``` | Access to the camera is prohibited. |
+| ```NO_CAMERA```                |         There is no camera.         |
+| ```CONNECTION_ERROR```         |         Connection errors.          |
+
+The table below describes the cases of event generation:
+
+<table>
+<thead>
+<tr>
+<th>Event condition </th>
+<th>Event type</th>
+<th>
+
+Event object ```event.detail```
+</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>The component is mounted in the DOM.</td>
+<td>
+
+For document-reader:  
+```document-reader```
+
+For camera-snapshot:  
+```camera-snapshot```
+
+</td>
+<td>
+
+```javascript
+{
+  action: "ELEMENT_VISIBLE", 
+  data: null,
+  manual: true
+}
+```
+
+</td>
+<td>
+
+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.
+
+Example:
 ```html
-<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@1.2.0/dist/main.js"></script>
+<div id="add-event-listener-to-this-element">
+  <document-reader></document-reader>
+</div>
 ```
 
-Add the name of the component to the html, as in the example above.
+</td>
+</tr>
+<tr>
+<td>The "From camera" button is pressed.</td>
+<td>
 
-## Components events
+For document-reader:  
+```document-reader```
 
-You can subscribe to the component events. In cases of successful and unsuccessful work, the following events will be triggered:
+For camera-snapshot:  
+```camera-snapshot```
 
-For the ```document-reader``` component - ```document-reader```   
-For the ```camera-snapshot``` component - ```camera-snapshot```
+</td>
+<td>
 
-For example:
+```javascript
+{
+  action: "PRESS_CAMERA_BUTTON", 
+  data: null,
+  manual: true
+}
+```
+
+</td>
+<td></td>
+</tr>
+<tr>
+<td>The "From gallery" button is pressed.</td>
+<td>
+
+For document-reader:  
+```document-reader```
+
+For camera-snapshot:  
+```camera-snapshot```
+
+</td>
+<td>
+
+```javascript
+{
+  action: "PRESS_FILE_BUTTON", 
+  data: null,
+  manual: true
+}
+```
+
+</td>
+<td></td>
+</tr>
+<tr>
+<td>The "Retry" button is pressed.</td>
+<td>
+
+For document-reader:  
+```document-reader```
+
+For camera-snapshot:  
+```camera-snapshot```
+
+</td>
+<td>
+
+```javascript
+{
+  action: "PRESS_RETRY_BUTTON", 
+  data: null,
+  manual: true
+}
+```
+
+</td>
+<td></td>
+</tr>
+<tr>
+<td>The "Skip page" button is pressed.</td>
+<td>
+ 
+```document-reader```
+
+</td>
+<td>
+
+```javascript
+{
+  action: "PRESS_SKIP_BUTTON", 
+  data: null,
+  manual: true
+}
+```
+
+</td>
+<td>
+
+This event available only in ```document-reader```.
+
+</td>
+</tr>
+<tr>
+<td>The "Close" button is pressed.</td>
+<td>
+
+For document-reader:  
+```document-reader```
+
+For camera-snapshot:  
+```camera-snapshot```
+
+</td>
+<td>
+
+```javascript
+{
+  action: "CLOSE", 
+  data: null,
+  manual: true
+}
+```
+
+</td>
+<td></td>
+</tr>
+<tr>
+<td>The work of the component is completed successfully.</td>
+<td>
+
+For document-reader:  
+```document-reader```
+
+For camera-snapshot:  
+```camera-snapshot```
+
+</td>
+<td>
 
 ```javascript
-const component = document.getElementsByTagName('camera-snapshot')[0];
+{
+  action: "PROCESS_FINISHED", 
+  data: {
+    response: { ... },
+    status: 1
+  },
+  manual: false
+}
+```
+
+</td>
+<td></td>
+</tr>
+<tr>
+<td>The work of the component failed.</td>
+<td>
+
+For document-reader:  
+```document-reader```
+
+For camera-snapshot:  
+```camera-snapshot```
+
+</td>
+<td>
+
+```javascript
+{
+  action: "PROCESS_FINISHED", 
+  data: {
+    reason: "An error has occurred",
+    status: 0
+  },
+  manual: false
+}
+```
+
+</td>
+<td></td>
+</tr>
+<tr>
+<td>Component is initialized and ready to work.</td>
+<td>
+
+```document-reader```
+
+</td>
+<td>
 
-component.addEventListener('camera-snapshot', () => alert('Event!'));
+```javascript
+{
+  action: "SERVICE_INITIALIZED",
+  data: null,
+  manual: false
+}
 ```
 
-## Components response
+</td>
+<td>
+
+This event available only in ```document-reader```.
+
+</td>
+</tr>
+</tbody>
+</table>
 
-You can get the response of the component in the ```detail``` field of the event object.
+### Response
+
+You can get the response of the component in the ```detail.data.response``` field of the event object.
 
 For example:
 
 ```javascript
-const component = document.getElementsByTagName('camera-snapshot')[0];
+const component = document.querySelector('document-reader');
 
 function listener(event) {
-    if (event.detail) {
-        const response = event.detail;
+    if (event.detail.action === 'PROCESS_FINISHED' && event.detail.data.status === 1) {
+        const response = event.detail.data.response;
         console.log(response);
     }
 }
 
-component.addEventListener('camera-snapshot', listener);
+component.addEventListener('document-reader', listener);
 ```
 
-## Components attributes
-
-### document-reader
+### Attributes
 
-The component can work in two modes: with further processing of the result on the API and without such processing. For further processing on the API, you need to set the API address to the ```url``` attribute.
+#### document-reader
 
 | Attribute                | Info                                                                                                                                                                                                                                                                                                                                              | Data type |   Default value    |                                                                                                                                                             Values                                                                                                                                                             |
 |:-------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
 | **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```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
-|                                                                                                                                                          |
-| **internal-scenario**    | The component document verification scenario. For more details, see the <a href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/getting-started#processing-scenarios" target="_blank">Web components documentation</a>.                                                                                                   |  string   | ```MrzAndLocate``` |                                                                                                                                 ```MrzAndLocate```, ```MrzOrLocate```, ```Mrz```, ```Locate```                                                                                                                                 |
+| **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```                                                                                                                                 |
 | **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```                                                                                                                                                     |
 | **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```                                                                                                                                                     |
 | **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```                                                                                                                                                     |
-| **full-screen**          | Whether to locate the video element on the whole screen. If ```true```, the video element expands to full screen. If ```false```, the video element is displayed in the frame of the container.                                                                                                                                                   |  boolean  |    ```false```     |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     | 
+| **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```                                                                                                                                                  | 
 | **license**              | To use the component on test environments, set the base64 license value to the ```license``` attribute.                                                                                                                                                                                                                                           |  string   |  ```undefined```   |                                                                                                                                                   ```base64 license value```                                                                                                                                                   |
+| **copyright**            | Show Regula copyright footer.                                                                                                                                                                                                                                                                                                                     |  boolean  |     ```true```     |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
+| **object-fit**           | Object-fit of the video element.                                                                                                                                                                                                                                                                                                                  |  string   |   ```contain```    |                                                                                                                                                   ```cover```, ```contain```                                                                                                                                                   |
+| **change-camera**        | Show the camera switch button.                                                                                                                                                                                                                                                                                                                    |  boolean  |    ```false```     |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
 
+#### camera-snapshot
 
-### camera-snapshot
+| Attribute         | Info                                                                                                                                                                                                                                                                                                       | Data type |  Default value  |                                                                                                                                                             Values                                                                                                                                                             |
+|:------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| **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```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
+| **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```                                                                                                                                                     |                                                                                                  
+| **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```                                                                                                                                                     |
+| **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```                                                                                                                                                  |
+| **copyright**     | Show Regula copyright footer.                                                                                                                                                                                                                                                                              |  boolean  |   ```true```    |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
+| **object-fit**    | Object-fit of the video element.                                                                                                                                                                                                                                                                           |  string   |  ```contain```  |                                                                                                                                                   ```cover```, ```contain```                                                                                                                                                   |
+| **change-camera** | Show the camera switch button.                                                                                                                                                                                                                                                                             |  boolean  |   ```false```   |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
 
-| Attribute        | Info                                                                                                                                                                                                                                                                                                       | Data type | Default value |                                                                                                                                                             Values                                                                                                                                                             |
-|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:-------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
-| **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```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
-| **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```                                                                                                                                                     |                                                                                                  
-| **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```                                                                                                                                                     |
-| **full-screen**  | Whether to locate the video element on the whole screen. If ```true```, the video element expands to full screen. If ```false```, the video element is displayed in the frame of the container.                                                                                                            |  boolean  |  ```false```  |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
-
-## Components customization
+### Customization
 
 Using CSS variables, you can change the font and the main colors of the components.
 
-| Variable          | Info                                                                                                                                                           |        Default value        |
-|:------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------:|
-| **--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``` |
-| **--font-size**   | The font size for the text elements.                                                                                                                           |         ```16px```          |
-| **--main-color**  | Color for the graphic elements of the component. By default, the brand Regula violet is set.                                                                   |        ```#663399```        |
+| Variable           | Info                                                                                                                                                           |        Default value        |
+|:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------:|
+| **--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``` |
+| **--font-size**    | The font size for the text elements.                                                                                                                           |         ```16px```          |
+| **--main-color**   | Color for the graphic elements of the component. By default, the brand Regula violet is set.                                                                   |        ```#663399```        |
+| **--hover-color**  | Buttons hover color.                                                                                                                                           |        ```#7c45b4```        |
+| **--active-color** | Buttons active color.                                                                                                                                          |        ```#663399```        |
 
 For example:
 
@@ -170,9 +502,256 @@ CSS:
 HTML:
 
 ```html
-<camera-snapshot class="my-custom-style"></camera-snapshot>
+<document-reader class="my-custom-style"></document-reader>
 ```
 
+## Document reader SDK
+
+You can use the document-reader SDK to create your own UI interface.
+
+### SDK integration via NPM
+
+Install ```@regulaforensics/vp-frontend-document-components```:
+
+```
+npm i @regulaforensics/vp-frontend-document-components
+```
+
+Import ```DocumentReaderProcessor``` from ```@regulaforensics/vp-frontend-document-components``` into your ```.js``` file:
+
+```javascript
+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'.
+```
+
+Add video tag to ```.html``` file then prepare and initialize ```DocumentReaderProcessor```:
+
+```javascript
+const videoElement = document.getElementById('yourVideoElement');
+const processor = new DocumentReaderProcessor(videoElement);
+
+try {
+   await processor.prepare();
+   await processor.initialize({license: 'BASE64_LICENSE_KEY'}); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
+
+   const result = await processor.startRecognition();  // Result of the document recognition will be located here.
+
+   processor.stopRecognition();
+
+   console.log(result);
+} catch (e) {
+   console.log(e);
+}
+```
+
+### SDK integration via CDN
+
+Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:version/:file```
+
+For example:
+
+```html
+<!-- Replace <VERSION> with the package version. The list of versions is available on NPM in the versions section -->
+<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@<VERSION>/dist/main.js"></script>
+```
+
+Add video tag to ```.html``` file then prepare and initialize ```DocumentReaderProcessor```. ```DocumentReaderProcessor``` is available in the global variable ```window.Regula```:
+
+```javascript
+const { DocumentReaderProcessor } = window.Regula;
+
+const videoElement = document.getElementById('yourVideoElement');
+const processor = new DocumentReaderProcessor(videoElement);
+
+try {
+   await processor.prepare();
+   await processor.initialize({license: 'BASE64_LICENSE_KEY'}); // Set license object ONLY on test environments. In the production build call initialize(); without a license object.
+
+   const result = await processor.startRecognition(); // Result of the document recognition will be located here.
+
+   processor.stopRecognition();
+
+   console.log(result);
+} catch (e) {
+   console.log(e);
+}
+```
+
+### Available DocumentReaderProcessor methods
+
+#### prepare
+
+Prepares SDK files. The method must be run before initialization:
+
+```javascript
+await processor.prepare();
+```
+
+#### initialize
+
+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:
+
+```javascript
+await processor.initialize({license: 'BASE64_LICENSE_KEY'});
+```
+
+#### startRecognition
+
+The method starts the video stream and starts the process of recognizing the document. Returns the result of document processing:
+
+```javascript
+const result = await processor.startRecognition();
+```
+
+To process multi-page documents, add the callback function to the method. The callback function takes in an object with an intermediate result of processing, a method for starting the next page and a method for completing the process:
+
+```javascript
+/**
+ * @param {object} currentPage - Page data.
+ * @param {object} currentPage.data - Page processing result.
+ * @param {function} currentPage.startNextPage - The method of starting the recognition of the next page.
+ * @param {function} currentPage.finishRecognition - Finish the process and return the result.
+ */
+
+async function pageListener(currentPage) {
+
+    setTimeout(async () => {               
+        await currentPage.startNextPage(); // Will start recognition of the next page in 3 seconds.
+    }, 3000);                              // During this time, you can tell the user to turn the document over.
+}
+
+const result = await processor.startRecognition(pageListener);
+```
+
+#### processImage
+
+Processes document files. Can process ```FileList``` or ```Blob``` array:
+
+```javascript
+const file = 'FileList or Blob array';
+
+const result = await processor.processImage(file);
+```
+
+#### stopRecognition
+
+Stops the document recognition process and ends the video stream.
+
+```javascript
+processor.stopRecognition();
+```
+
+### DocumentReaderProcessor settings
+
+You can change the default settings for video streaming and document recognition. The settings must be set before the document recognition process.
+
+#### streamParam
+
+Sets the video stream settings:
+
+```javascript
+processor.streamParam = {
+   cameraMode: 'user',      // Camera facing mode. Can be 'environment' or 'user'. By default 'user'.
+   preferredCameraId: '',   // Selecting a camera by ID. The camera ID can be obtained using navigator.mediaDevices.enumerateDevices();. Not set by default.
+   resolution: {            // Video resolution. By default 1280x720.
+     width: 1280,
+     height: 720, 
+   },
+}
+```
+
+#### recognizerProcessParam
+
+Sets the settings for recognizing a document from the camera (```startRecognition``` method):
+
+```javascript
+processor.recognizerProcessParam = {
+   processParam: {
+      returnUncroppedImage: true,      // When enabled, returns input images in output. Disabled by default.
+      scenario: 'MrzAndLocate',        // Recognition scenario. Can be 'MrzAndLocate', 'MrzOrLocate', 'Mrz', 'Locate'. By default 'MrzAndLocate'.
+      multipageProcessing: true,       // Enables multi-page document processing mode. By default false.
+      timeout: 20000,                  // Recognition timeout in milliseconds. After this time process will be finished. By default 20000.
+      resultTypeOutput: [],            // Types of results to return in response. By default [] - all available types.
+      imageQa: {                       // Quality checks.
+         expectedPass: ['dpiThreshold', 'glaresCheck'],
+         dpiThreshold: 130,
+         glaresCheck: true,
+         glaresCheckParams: {
+            imgMarginPart: 0.05,
+            maxGlaringPart: 0.01,
+         },
+      },
+   },
+}
+```
+
+#### imageProcessParam
+
+Sets the settings for recognizing a document as a file (```processImage``` method):
+
+```javascript
+processor.imageProcessParam = {
+   processParam: {
+      returnUncroppedImage: true,      // When enabled, returns input images in output. Disabled by default.
+      scenario: 'MrzAndLocate',        // Recognition scenario. Can be 'MrzAndLocate', 'MrzOrLocate', 'Mrz', 'Locate'. By default 'MrzAndLocate'.
+      resultTypeOutput: [],            // Types of results to return in response. By default [] - all available types.
+   },
+}
+```
+
+#### recognizeListener
+
+Sets the callback function that takes in the processing result for each frame:
+
+```javascript
+/**
+ * @param {object} response - The result of processing each frame.
+ */
+
+function listener(response) {
+  console.log(response);
+}
+
+processor.recognizeListener = listener; // Not set by default.
+```
+
+#### videoElement
+
+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)```:
+
+```javascript
+const videoElement = document.getElementById('HTMLVideoElement');
+
+processor.videoElement = videoElement; // By default null.
+```
+
+#### isPrepared
+
+Read-only property. Returns true if the processor has been prepared.
+
+```javascript
+processor.isPrepared; // True or false.
+```
+
+#### isInitialized
+
+Read-only property. Returns true if the processor has been initialized.
+
+```javascript
+processor.isInitialized; // True or false.
+```
+
+#### isProcessing
+
+Read-only property. Returns true if document recognition is not completed.
+
+```javascript
+processor.isProcessing; // True or false.
+```
+
+## Problems
+
+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).
+
 ## Examples
 
 You can see the examples of using the components on the [Samples page](https://github.com/regulaforensics/document-web-components-samples).