@regulaforensics/vp-frontend-face-components 1.4.0 → 2.0.1

package/README.md

@@ -81,7 +81,7 @@ Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:ve
 Example:
 
 ```html
-<script src="https://unpkg.com/@regulaforensics/vp-frontend-face-components@1.2.0/dist/main.js"></script>
+<script src="https://unpkg.com/@regulaforensics/vp-frontend-face-components@2.0.0/dist/main.js"></script>
 ```
 
 Add the name of the component to the html, as in the example above.
@@ -90,6 +90,16 @@ Add the name of the component to the html, as in the example above.
 
 ### face-liveness
 
+The server generates a unique identifier for each session before starting a verification process. Using ```sessionId``` setter you can set custom value. Make sure that the ```sessionId``` is unique for each session
+
+Example:
+
+```javascript
+const component = document.getElementsByTagName('face-liveness')[0];
+
+component.sessionId = "ID"
+```
+
 After passing two stages of verification, the component sends the received data for processing to the API. Using ```headers``` setter you can set HTTP POST method headers.
 
 Example:
@@ -395,39 +405,66 @@ function listener(event) {
 component.addEventListener('face-capture', listener);
 ```
 
+The ```face-liveness``` response has the following structure
+
+```javascript
+{
+  code: number // Result codes from core lib
+  metadata: {
+    [key: string]: any
+  };
+  sessionId: string
+  status: number // liveness status
+  transactionId: string
+  images: string[] // array with the final image in base64 
+}
+````
+
+The ```face-capture``` response has the following structure
+
+```javascript
+{
+  capture: string[] // array with the final image in base64 
+}
+````
+
 ## Component attributes
 
 ### face-capture
 
-| Attribute     | Info                           |  Default value  |                                                                                                                                                             Values                                                                                                                                                             |
-|:--------------|:-------------------------------|:---------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
-| **locale**    | The language of the component. |    ```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``` |
-| **copyright** | Show Regula copyright footer   |   ```false```   |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
-| **camera-id** | Ability to select a camera     | ```undefined``` |                                                                                                                                                  ```camera id string value```                                                                                                                                                  |
+| Attribute              | Info                                                                                                                                                                                                                             | Data type |  Default value  |                                                                                                                                                             Values                                                                                                                                                             |
+|:-----------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:---------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| **locale**             | The language of the component.                                                                                                                                                                                                   |  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``` |
+| **copyright**          | Show Regula copyright footer.                                                                                                                                                                                                    |  boolean  |   ```false```   |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
+| **camera-id**          | Ability to select a camera.                                                                                                                                                                                                      |  string   | ```undefined``` |                                                                                                                                                  ```camera id string value```                                                                                                                                                  |
+| **change-camera**      | Show the camera switch button.                                                                                                                                                                                                   |  boolean  |   ```true```    |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
+| **start-screen**       | Whether to show the start screen with video instruction. 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 face. |  boolean  |   ```true```    |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
 
 ### face-liveness
 
-| Attribute     | Info                           |               Default value                |                                                                                                                                                             Values                                                                                                                                                             |
-|:--------------|:-------------------------------|:------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
-| **locale**    | The language of the component. |                  ```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``` |
-| **url**       | Backend url.                   | ```https://faceapi.regulaforensics.com/``` |                                                                                                                                                            any url                                                                                                                                                             |
-| **copyright** | Show Regula copyright footer   |                ```false```                 |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
-| **camera-id** | Ability to select a camera     |              ```undefined```               |                                                                                                                                                  ```camera id string value```                                                                                                                                                  |
+| Attribute              | Info                                                                                                                                                                                                                             | Data type |               Default value                |                                                                                                                                                             Values                                                                                                                                                             |
+|:-----------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+| **locale**             | The language of the component.                                                                                                                                                                                                   |  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``` |
+| **url**                | Backend url.                                                                                                                                                                                                                     |  string   | ```https://faceapi.regulaforensics.com/``` |                                                                                                                                                            any url                                                                                                                                                             |
+| **copyright**          | Show Regula copyright footer.                                                                                                                                                                                                    |  boolean  |                ```false```                 |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
+| **camera-id**          | Ability to select a camera.                                                                                                                                                                                                      |  string   |              ```undefined```               |                                                                                                                                                  ```camera id string value```                                                                                                                                                  |
+| **change-camera**      | Show the camera switch button.                                                                                                                                                                                                   |  boolean  |                 ```true```                 |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
+| **start-screen**       | Whether to show the start screen with video instruction. 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 face. |  boolean  |                 ```true```                 |                                                                                                                                                    ```true```, ```false```                                                                                                                                                     |
 
 ## Component customization
 
 Using CSS variables, you can change the font and the main colors of the components.
 
-| Variable           | Info                                                                                    |        Default value        |
-|:-------------------|:----------------------------------------------------------------------------------------|:---------------------------:|
-| **--font-family**  | Сomponent font.                                                                         | ```Noto Sans, sans-serif``` |
-| **--font-size**    | Сomponent base font size.                                                               |         ```16px```          |
-| **--main-color**   | Button and frame color.                                                                 |        ```#663399```        |
-| **--second-color** | Instruction image background color.                                                     |        ```#EBE1F6```        |
-| **--third-color**  | Instruction image portrait background color (available only in face-capture component). |        ```#C5B9D2```        |
-| **--hover-color**  | Button hover color.                                                                     |        ```#7c45b4```        |
-| **--active-color** | Button active color.                                                                    |        ```#663399```        |
-| **--plate-color**  | Information plate color.                                                                |  ```rgba(0, 0, 0, 0.6)```   |
+| Variable                     | Info                                                                                    |        Default value        |
+|:-----------------------------|:----------------------------------------------------------------------------------------|:---------------------------:|
+| **--font-family**            | Сomponent font.                                                                         | ```Noto Sans, sans-serif``` |
+| **--font-size**              | Сomponent base font size.                                                               |         ```16px```          |
+| **--main-color**             | Button and frame color.                                                                 |        ```#7E57C5```        |
+| **--hover-color**            | Button hover color.                                                                     |        ```#7c45b4```        |
+| **--active-color**           | Button active color.                                                                    |        ```#7E57C5```        |
+| **--plate-color**            | Information plate color.                                                                |        ```#E8E8E8```        |
+| **--target-sector-color**    | Target sector color (available only in face-liveness component).                        |        ```#BEABE2```        |
+| **--direction-sector-color** | Direction sector color (available only in face-liveness component).                     |        ```#EAEAEA```        |
 
 Example:
 
@@ -449,4 +486,4 @@ HTML:
 
 ## Examples
 
-You can see examples of using the components [here](https://github.com/regulaforensics/face-web-components-samples).
+You can see the examples of using the components on the [Samples page](https://github.com/regulaforensics/face-web-components-samples).