@regulaforensics/vp-frontend-face-components 8.4.2376-rc → 8.4.2384-nightly

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 (4) hide show
  1. package/README.md +196 -121
  2. package/dist/main.iife.js +5 -5
  3. package/dist/main.js +11 -11
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -18,12 +18,14 @@
18
18
 
19
19
  ## Overview
20
20
 
21
- The Face SDK Web Components let you add automatic capture of a user's selfie and liveness check to your web site. The components capture a face from the device camera and can either simply detect a face on the captured photo or confirm the <a href="https://docs.regulaforensics.com/develop/face-sdk/overview/introduction/#liveness-assessment" target="_blank">face liveness</a>.
21
+ The Face SDK Web Components let you add automatic capture of a user's selfie, liveness check, person enrollment, and identity verification to your web site. The components capture a face from the device camera and can detect a face on the captured photo, confirm the <a href="https://docs.regulaforensics.com/develop/face-sdk/overview/introduction/#liveness-assessment" target="_blank">face liveness</a>, enroll a person into a biometric database, or verify a person against an enrolled identity.
22
22
 
23
23
  The available components are the following:
24
24
 
25
25
  - `face-capture`
26
26
  - `face-liveness`
27
+ - `face-enroll`
28
+ - `face-verify`
27
29
 
28
30
  The Web Components are based on WebAssembly (.wasm module), which is our core C++ code compiled for use in browsers and wrapped with a JS layer. It is exactly the same code as built for all the other platform SDK packages.
29
31
 
@@ -35,11 +37,12 @@ Important notes:
35
37
  - The considered components are registered on the **web page itself**, so make sure to import the library to your website before adding any of the components to the web page code.
36
38
  - Only the modern browser versions are supported, see [compatibility](#compatibility). **Polyfills** are not included in the package by default.
37
39
  - If your website uses Content Security Policy (CSP), make sure that WebAssembly execution is allowed. For details, see [Security](#security).
40
+ - The `face-enroll` and `face-verify` components require a Face SDK Web Service instance with Enroll and Verify enabled. For configuration details, see <a href="https://docs.regulaforensics.com/develop/face-sdk/web-service/development/usage/enroll-verify/" target="_blank">Enroll and Verify with Face SDK Web Service</a>.
38
41
 
39
42
  ## Compatibility
40
43
 
41
44
  | 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) |
42
- |:---------------------|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|
45
+ | :------------------- | :-----------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: |
43
46
  | **Mobile (iOS)** | 99 (iOS14.4+) | 99 (iOS14.4+) | 11 |
44
47
  | **Mobile (Android)** | 69 | 63 | - |
45
48
  | **Desktop** | 66 | 69 | 11 |
@@ -60,6 +63,7 @@ Run the following command:
60
63
  ```
61
64
  npm init
62
65
  ```
66
+
63
67
  Answer the questions in the command line questionnaire.
64
68
 
65
69
  Install `@regulaforensics/vp-frontend-face-components`:
@@ -78,8 +82,10 @@ import './node_modules/@regulaforensics/vp-frontend-face-components/dist/main.ii
78
82
 
79
83
  In `index.html` connect `index.js` and add the name of the component you want to use. Available components:
80
84
 
81
- 1. `<face-capture></face-capture>` - for creating a face snapshot;
82
- 1. `<face-liveness></face-liveness>` - for performing liveness verification.
85
+ - `<face-capture></face-capture>` for creating a face snapshot.
86
+ - `<face-liveness></face-liveness>` for performing liveness verification.
87
+ - `<face-enroll></face-enroll>` for performing liveness verification and enrolling a person.
88
+ - `<face-verify></face-verify>` for performing liveness verification and verifying a person.
83
89
 
84
90
  For example:
85
91
 
@@ -191,37 +197,39 @@ component.settings = yourSettings;
191
197
 
192
198
  Here are all the available settings:
193
199
 
194
- | Setting | Info | Data type | Default value | Values | Used in |
195
- |:--------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|---------------------------------|
196
- | `locale` | Language of the component. The value is determined based on the following priority:<br><br>1. `locale` component attribute takes the highest priority if explicitly set.<br>2. If `locale` is not set, the system checks the `html.lang` attribute.<br>3. If no `html.lang` attribute is available, the system attempts to determine the language from `window.navigator`.<br>4. If none of the above are available, the default value `en` is used. | `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`, `uz`, `ku`, `tg`, `ky`, `hy` | `face-liveness`, `face-capture` |
197
- | `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
198
- | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
199
- | `cameraId` | Ability to select a camera by defining the camera ID. | `string` | `undefined` | `camera id string value` | `face-liveness`, `face-capture` |
200
- | `changeCamera` | Whether to show the "Camera Switch" button. Note that if `livenessType = 0` (active liveness), the button will not be displayed on mobile devices regardless of the `changeCamera` setting. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
201
- | `startScreen` | Whether to show the Start screen with video instructions. 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 a face. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
202
- | `finishScreen` | Whether to show the Result screen (`success screen`, `retry-screen`). If `true`, the Result screen is shown to the user. If `false`, no Result screen is displayed, and, during a single session, **the user has only one attempt to pass liveness assessment**. <br><br>In cases where `finishScreen` is set to `false`, we recommend to monitor [Events](#events) associated with the liveness assessment and then display relevant information to the user based on those events. This approach ensures that the user receives necessary feedback even though the Result screen is not displayed by the component itself. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
203
- | `closeDisabled` | Whether to disable the "Close" button of the component. If set to `true`, the "Close" button is hidden from the user. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture` |
204
- | `recordingProcess` | Whether to enable a video recording of the process. If set to `0`, the video is sent to the server with an additional request. If set to `1`, the video is sent to the server with the liveness package. If set to `2`, the video isn't sent. The video format depends on the browser: MP4 for Safari, WEB for other browsers. | `number` | `0` | `0`, `1`, `2` | `face-liveness` |
205
- | `tag` | The server generates a unique identifier for each session before starting a verification process. Using `tag`, you can set a custom value. Make sure that `tag` is unique for each session. | `string` | `undefined` | any unique for each session | `face-liveness` |
206
- | `retryCount` | Using the `retryCount` setter, you can set the number of liveness transaction attempts for the user. Once the attempts are exhausted, the component will display a white screen and throw the "RETRY_COUNTER_EXCEEDED" event. By default, the number of attempts is unlimited. Setting the value to **0** removes the limit on the number of attempts, while any positive number limits the attempts. | `number` | `undefined` | number of the attempts count | `face-liveness` |
207
- | `headers` | Before starting the camera capture, the component sends a `start` request to the server and receives the initialization data in response. Once the component successfully completes two stages of verification, it sends the received data to the API for processing. You can use the `headers` setter to set the headers for the HTTP POST method. Additionally, the video recording is transmitted to the server along with these `headers`. | `object` | `undefined` | object with headers (key, value). | `face-liveness` |
208
- | `customization` | You can customize the element's color, font, and image by using this object. See the [Customization](#customization) section below. | `object` | `undefined` | object with customization settings | `face-liveness`, `face-capture` |
209
- | `nonce` | A unique nonce value used to maintain a strict Content Security Policy. The value must match the nonce specified in your CSP header. See [Security](#security). | `string` | `undefined` | unique nonce value | `face-liveness`, `face-capture` |
210
- | `rotationAngle` | Desktop only. By using the `rotationAngle` setter, you can specify an angle to compensate for the rotation of your physical camera. When set to values of `90` and `-90`, the component's design will switch to a mobile (vertical) orientation. | `number` | `undefined` | `0`,`180`,`90`,`-90` | `face-liveness`, `face-capture` |
211
- | `holdStillDuration` | For the Capture screen, sets the duration that the user needs to stand straight and look in the camera. | `number` | `undefined` | seconds | `face-capture` |
212
- | `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |
213
- | `livenessType` | You can choose a scenario for the Liveness assessment. `0` - active liveness, full process that requires head rotation; `1` - passive liveness, a person is asked to only take a selfie, no head rotation required; `3` - passive liveness with blink, a person is asked to take a selfie and blink, no head rotation required. | `number` | `0` | `0`, `1`, `3` | `face-liveness` |
214
- | `detectOcclusion` | Whether to disable face occlusion hint. | `boolean` | `true` | `true`, `false` | `face-capture` |
215
- | `tenant` | A label used to group transactions by specific customers, applications, or other criteria. | `string` | `undefined` | tenant | `face-liveness` |
216
- | `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `face-liveness` |
217
- | `captureButton` | Whether to enable user-triggered capture. Shows the **Capture** button, desktop layout height increases accordingly. When enabled, the shot is taken only on user action. When `livenessType` is set to `3` (passive liveness with blink), `captureButton` is not supported. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture` |
200
+ | Setting | Info | Data type | Default value | Values | Used in |
201
+ | :------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------: | :------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------- |
202
+ | `locale` | Language of the component. The value is determined based on the following priority:<br><br>1. `locale` component attribute takes the highest priority if explicitly set.<br>2. If `locale` is not set, the system checks the `html.lang` attribute.<br>3. If no `html.lang` attribute is available, the system attempts to determine the language from `window.navigator`.<br>4. If none of the above are available, the default value `en` is used. | `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`, `uz`, `ku`, `tg`, `ky`, `hy` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
203
+ | `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness`, `face-enroll`, `face-verify` |
204
+ | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
205
+ | `cameraId` | Ability to select a camera by defining the camera ID. | `string` | `undefined` | `camera id string value` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
206
+ | `changeCamera` | Whether to show the "Camera Switch" button. Note that if `livenessType = 0` (active liveness), the button will not be displayed on mobile devices regardless of the `changeCamera` setting. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
207
+ | `startScreen` | Whether to show the Start screen with video instructions. 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 a face. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
208
+ | `finishScreen` | Whether to show the Result screen (`success screen`, `retry-screen`). If `true`, the Result screen is shown to the user. If `false`, no Result screen is displayed, and, during a single session, **the user has only one attempt to pass liveness assessment**. <br><br>In cases where `finishScreen` is set to `false`, we recommend to monitor [Events](#events) associated with the liveness assessment and then display relevant information to the user based on those events. This approach ensures that the user receives necessary feedback even though the Result screen is not displayed by the component itself. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
209
+ | `closeDisabled` | Whether to disable the "Close" button of the component. If set to `true`, the "Close" button is hidden from the user. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
210
+ | `recordingProcess` | Whether to enable a video recording of the process. If set to `0`, the video is sent to the server with an additional request. If set to `1`, the video is sent to the server with the liveness package. If set to `2`, the video isn't sent. The video format depends on the browser: MP4 for Safari, WEB for other browsers. | `number` | `0` | `0`, `1`, `2` | `face-liveness`, `face-enroll`, `face-verify` |
211
+ | `tag` | The server generates a unique identifier for each session before starting a verification process. Using `tag`, you can set a custom value. Make sure that `tag` is unique for each session. | `string` | `undefined` | any unique for each session | `face-liveness`, `face-enroll`, `face-verify` |
212
+ | `retryCount` | Using the `retryCount` setter, you can set the number of liveness transaction attempts for the user. Once the attempts are exhausted, the component will display a white screen and throw the "RETRY_COUNTER_EXCEEDED" event. By default, the number of attempts is unlimited. Setting the value to **0** removes the limit on the number of attempts, while any positive number limits the attempts. | `number` | `undefined` | number of the attempts count | `face-liveness`, `face-enroll`, `face-verify` |
213
+ | `headers` | Before starting the camera capture, the component sends a `start` request to the server and receives the initialization data in response. Once the component successfully completes two stages of verification, it sends the received data to the API for processing. You can use the `headers` setter to set the headers for the HTTP POST method. Additionally, the video recording is transmitted to the server along with these `headers`. | `object` | `undefined` | object with headers (key, value). | `face-liveness`, `face-enroll`, `face-verify` |
214
+ | `customization` | You can customize the element's color, font, and image by using this object. See the [Customization](#customization) section below. | `object` | `undefined` | object with customization settings | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
215
+ | `nonce` | A unique nonce value used to maintain a strict Content Security Policy. The value must match the nonce specified in your CSP header. See [Security](#security). | `string` | `undefined` | unique nonce value | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
216
+ | `rotationAngle` | Desktop only. By using the `rotationAngle` setter, you can specify an angle to compensate for the rotation of your physical camera. When set to values of `90` and `-90`, the component's design will switch to a mobile (vertical) orientation. | `number` | `undefined` | `0`,`180`,`90`,`-90` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
217
+ | `holdStillDuration` | For the Capture screen, sets the duration that the user needs to stand straight and look in the camera. | `number` | `undefined` | seconds | `face-capture` |
218
+ | `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |
219
+ | `livenessType` | You can choose a scenario for the Liveness assessment. `0` - active liveness, full process that requires head rotation; `1` - passive liveness, a person is asked to only take a selfie, no head rotation required; `3` - passive liveness with blink, a person is asked to take a selfie and blink, no head rotation required. | `number` | `0` | `0`, `1`, `3` | `face-liveness`, `face-enroll`, `face-verify` |
220
+ | `detectOcclusion` | Whether to disable face occlusion hint. | `boolean` | `true` | `true`, `false` | `face-capture` |
221
+ | `tenant` | A label used to group transactions by specific customers, applications, or other criteria. | `string` | `undefined` | tenant | `face-liveness`, `face-enroll`, `face-verify` |
222
+ | `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `face-liveness`, `face-enroll`, `face-verify` |
223
+ | `captureButton` | Whether to enable user-triggered capture. Shows the **Capture** button, desktop layout height increases accordingly. When enabled, the shot is taken only on user action. When `livenessType` is set to `3` (passive liveness with blink), `captureButton` is not supported. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
224
+ | `enroll` | Person enrollment configuration. Required for `face-enroll`. Must contain the `person` object; `search` is optional. For details, see <a href="https://docs.regulaforensics.com/develop/face-sdk/web-service/development/usage/enroll-verify/" target="_blank">Enroll and Verify</a>. | `object` | `undefined` | object with `person` and optional `search` | `face-enroll` |
225
+ | `verify` | Person verification configuration. Required for `face-verify`. Must contain either `personId` or `externalId`; `threshold` is optional. For details, see <a href="https://docs.regulaforensics.com/develop/face-sdk/web-service/development/usage/enroll-verify/" target="_blank">Enroll and Verify</a>. | `object` | `undefined` | `{ personId, threshold? }` or `{ externalId, threshold? }` | `face-verify` |
218
226
 
219
227
  ## Customization
220
228
 
221
229
  You can customize the color of some elements, fonts, and images with the help of the `customization` field in the `settings` object. The customization settings are the following:
222
230
 
223
231
  | Setting | Info | Migrate from | Data type | Default value |
224
- |:---------------------------------------------|:------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|
232
+ | :------------------------------------------- | :---------------------------------------------------------------------- | ----------------------- | :-----------------------------: | :---------------------: |
225
233
  | `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |
226
234
  | `fontSize` | Base font size. | `--font-size` | string | `16px` |
227
235
  | `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |
@@ -474,7 +482,7 @@ Alternatively, you can host these files on your own domain and configure `worker
474
482
 
475
483
  ### Backend Connection
476
484
 
477
- The `face-liveness` component communicates with the Face SDK Web Service using the URL specified in the `url` setting.
485
+ The `face-liveness`, `face-enroll`, and `face-verify` components communicate with the Face SDK Web Service using the URL specified in the `url` setting.
478
486
 
479
487
  For production deployments, use HTTPS and protect access to the Web Service according to your security requirements, for example by using authentication on a proxy server.
480
488
 
@@ -487,12 +495,21 @@ For example:
487
495
  ```javascript
488
496
  const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
489
497
  const faceCaptureComponent = document.getElementsByTagName('face-capture')[0];
498
+ const faceEnrollComponent = document.getElementsByTagName('face-enroll')[0];
499
+ const faceVerifyComponent = document.getElementsByTagName('face-verify')[0];
490
500
 
491
501
  faceLivenessComponent.addEventListener('face-liveness', (event) => console.log(event.detail)); // event listener for face-liveness component
492
502
  faceCaptureComponent.addEventListener('face-capture', (event) => console.log(event.detail)); // event listener for face-capture component
503
+ faceEnrollComponent.addEventListener('face-enroll', (event) => console.log(event.detail)); // event listener for face-enroll component
504
+ faceVerifyComponent.addEventListener('face-verify', (event) => console.log(event.detail)); // event listener for face-verify component
493
505
  ```
494
506
 
495
- The `face-liveness` type of event is generated for the face-liveness component, and `face-capture` type of event is generated for the face-capture component.
507
+ | Component | Event type |
508
+ | :-------------- | :-------------- |
509
+ | `face-liveness` | `face-liveness` |
510
+ | `face-capture` | `face-capture` |
511
+ | `face-enroll` | `face-enroll` |
512
+ | `face-verify` | `face-verify` |
496
513
 
497
514
  The generated event object (`event.detail`) contains three fields that describe the event:
498
515
 
@@ -506,16 +523,16 @@ The generated event object (`event.detail`) contains three fields that describe
506
523
 
507
524
  ### Type of action
508
525
 
509
- | Type of action | Description of the action | The component |
510
- | :----------------------- | :-------------------------------------------------------------------------------------- | :------------------------------ |
511
- | `ELEMENT_VISIBLE` | The component is appended in the DOM. | `face-liveness`, `face-capture` |
512
- | `PRESS_START_BUTTON` | The "Get started" button is pressed. | `face-liveness`, `face-capture` |
513
- | `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `face-liveness`, `face-capture` |
514
- | `CLOSE` | The "Close" button is pressed. | `face-liveness`, `face-capture` |
515
- | `PROCESSING_REQUEST` | The component is sending data to the backend. | `face-liveness` |
516
- | `PROCESS_FINISHED` | The component has finished its work. | `face-liveness`, `face-capture` |
517
- | `SERVICE_INITIALIZED` | The component has started its work. | `face-liveness`, `face-capture` |
518
- | `RETRY_COUNTER_EXCEEDED` | The component has finished its work due to the exceeded number of transaction attempts. | `face-liveness` |
526
+ | Type of action | Description of the action | The component |
527
+ | :----------------------- | :-------------------------------------------------------------------------------------- | :------------------------------------------------------------ |
528
+ | `ELEMENT_VISIBLE` | The component is appended in the DOM. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
529
+ | `PRESS_START_BUTTON` | The "Get started" button is pressed. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
530
+ | `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
531
+ | `CLOSE` | The "Close" button is pressed. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
532
+ | `PROCESSING_REQUEST` | The component is sending data to the backend. | `face-liveness`, `face-enroll`, `face-verify` |
533
+ | `PROCESS_FINISHED` | The component has finished its work. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
534
+ | `SERVICE_INITIALIZED` | The component has started its work. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
535
+ | `RETRY_COUNTER_EXCEEDED` | The component has finished its work due to the exceeded number of transaction attempts. | `face-liveness`, `face-enroll`, `face-verify` |
519
536
 
520
537
  In cases of successful operation of the components, the `data` field will contain the following fields:
521
538
 
@@ -538,7 +555,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
538
555
  ### Table of event causes
539
556
 
540
557
  | Reason | Description of the reason |
541
- |:----------------------------|:--------------------------------------------------------------------------------------------------------|
558
+ | :-------------------------- | :------------------------------------------------------------------------------------------------------ |
542
559
  | `WASM_ERROR` | Error in WASM. |
543
560
  | `UNKNOWN_ERROR` | Unknown error. |
544
561
  | `NOT_SUPPORTED` | The browser is not supported. |
@@ -555,9 +572,9 @@ In cases of unsuccessful work, the `data` field will contain the following field
555
572
  | `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
556
573
  | `WEBSERVICE_NOT_COMPATIBLE` | The web service and component versions are incompatible. |
557
574
  | `HTTP_NOT_SUPPORTED` | The web component does not work over the HTTP protocol, use HTTPS instead. |
558
- | `CANCELLED` | The user has clicked the Close button. |
575
+ | `CANCELLED` | The user has clicked the Close button. |
559
576
  | `BAD_FACE_QUALITY` | The facial image quality is too low. |
560
- | `BAD_FRAME_SIZE` | The shorter side of the frame (width or height) is less than 720 pixels. |
577
+ | `BAD_FRAME_SIZE` | The shorter side of the frame (width or height) is less than 720 pixels. |
561
578
 
562
579
  ### Cases of event generation
563
580
 
@@ -574,7 +591,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
574
591
  <tr>
575
592
  <td>The component is mounted in the DOM.</td>
576
593
  <td>
577
- `face-liveness`<br><br>`face-capture`
594
+ `face-liveness`<br><br>`face-capture`<br><br>`face-enroll`<br><br>`face-verify`
578
595
  </td>
579
596
  <td>
580
597
 
@@ -603,7 +620,7 @@ For example:
603
620
  <tr>
604
621
  <td>The "Get started" button was pressed.</td>
605
622
  <td>
606
- `face-liveness`<br><br>`face-capture`
623
+ `face-liveness`<br><br>`face-capture`<br><br>`face-enroll`<br><br>`face-verify`
607
624
  </td>
608
625
  <td>
609
626
 
@@ -621,7 +638,7 @@ For example:
621
638
  <tr>
622
639
  <td>The "Retry" button was pressed.</td>
623
640
  <td>
624
- `face-liveness`<br><br>`face-capture`
641
+ `face-liveness`<br><br>`face-capture`<br><br>`face-enroll`<br><br>`face-verify`
625
642
  </td>
626
643
  <td>
627
644
 
@@ -635,7 +652,7 @@ For example:
635
652
  </td>
636
653
  <td></td>
637
654
  </tr>
638
-
655
+
639
656
  <tr>
640
657
  <td>The "Close" button was pressed.</td>
641
658
  <td>
@@ -656,11 +673,11 @@ For example:
656
673
  </td>
657
674
  <td></td>
658
675
  </tr>
659
-
676
+
660
677
  <tr>
661
678
  <td>The liveness assessment session had not started, but the "Close" button was pressed.</td>
662
679
  <td>
663
- `face-liveness`
680
+ `face-liveness`<br><br>`face-enroll`<br><br>`face-verify`
664
681
  </td>
665
682
  <td>
666
683
 
@@ -677,11 +694,11 @@ For example:
677
694
  </td>
678
695
  <td></td>
679
696
  </tr>
680
-
697
+
681
698
  <tr>
682
699
  <td>The liveness assessment session had started before the "Close" button was pressed.</td>
683
700
  <td>
684
- `face-liveness`
701
+ `face-liveness`<br><br>`face-enroll`<br><br>`face-verify`
685
702
  </td>
686
703
  <td>
687
704
 
@@ -703,7 +720,7 @@ For example:
703
720
  <tr>
704
721
  <td>The work of the component is completed successfully.</td>
705
722
  <td>
706
- `face-liveness`<br><br>`face-capture`
723
+ `face-liveness`<br><br>`face-capture`<br><br>`face-enroll`<br><br>`face-verify`
707
724
  </td>
708
725
  <td>
709
726
 
@@ -720,7 +737,7 @@ For example:
720
737
  </td>
721
738
  <td></td>
722
739
  </tr>
723
-
740
+
724
741
  <tr>
725
742
  <td>The work of the component failed.</td>
726
743
  <td>
@@ -741,11 +758,11 @@ For example:
741
758
  </td>
742
759
  <td></td>
743
760
  </tr>
744
-
761
+
745
762
  <tr>
746
763
  <td>The liveness assessment session had not started, but the work of the component failed.</td>
747
764
  <td>
748
- `face-liveness`
765
+ `face-liveness`<br><br>`face-enroll`<br><br>`face-verify`
749
766
  </td>
750
767
  <td>
751
768
 
@@ -762,11 +779,11 @@ For example:
762
779
  </td>
763
780
  <td></td>
764
781
  </tr>
765
-
782
+
766
783
  <tr>
767
784
  <td>The liveness assessment session had started, and then the work of the component failed.</td>
768
785
  <td>
769
- `face-liveness`
786
+ `face-liveness`<br><br>`face-enroll`<br><br>`face-verify`
770
787
  </td>
771
788
  <td>
772
789
 
@@ -784,7 +801,7 @@ For example:
784
801
  </td>
785
802
  <td></td>
786
803
  </tr>
787
-
804
+
788
805
  <tr>
789
806
  <td>The work of the component finished by timeout.</td>
790
807
  <td>
@@ -805,11 +822,11 @@ For example:
805
822
  </td>
806
823
  <td></td>
807
824
  </tr>
808
-
825
+
809
826
  <tr>
810
827
  <td>The work of the component finished by timeout.</td>
811
828
  <td>
812
- `face-liveness`
829
+ `face-liveness`<br><br>`face-enroll`<br><br>`face-verify`
813
830
  </td>
814
831
  <td>
815
832
 
@@ -827,7 +844,7 @@ For example:
827
844
  </td>
828
845
  <td></td>
829
846
  </tr>
830
-
847
+
831
848
  <tr>
832
849
  <td>The component is initialized and ready to work.</td>
833
850
  <td>
@@ -845,11 +862,11 @@ For example:
845
862
  </td>
846
863
  <td></td>
847
864
  </tr>
848
-
865
+
849
866
  <tr>
850
867
  <td>The component is initialized and ready to work.</td>
851
868
  <td>
852
- `face-liveness`
869
+ `face-liveness`<br><br>`face-enroll`<br><br>`face-verify`
853
870
  </td>
854
871
  <td>
855
872
 
@@ -864,7 +881,7 @@ For example:
864
881
  </td>
865
882
  <td></td>
866
883
  </tr>
867
-
884
+
868
885
  </tbody>
869
886
  </table>
870
887
 
@@ -904,6 +921,64 @@ The `face-liveness` response has the following structure:
904
921
  }
905
922
  ```
906
923
 
924
+ The `face-enroll` response has the same structure as `face-liveness`, plus `enrollResult`:
925
+
926
+ ```javascript
927
+ {
928
+ // ...face-liveness fields
929
+ enrollResult: {
930
+ enrolled: boolean // whether the person was enrolled
931
+ person: { // enrolled person, or null
932
+ id: string
933
+ createdAt: string
934
+ updatedAt: string
935
+ name: string | null
936
+ externalId: string | null
937
+ metadata: { [key: string]: any }
938
+ groups: string[]
939
+ expireAt: string | null
940
+ } | null
941
+ search: { // matching persons found during the pre-enrollment search, or null
942
+ persons: Array<{
943
+ id: string
944
+ name: string
945
+ externalId: string
946
+ metadata: { [key: string]: any }
947
+ groups: string[]
948
+ expireAt: string
949
+ createdAt: string
950
+ updatedAt: string
951
+ }>
952
+ } | null
953
+ }
954
+ }
955
+ ```
956
+
957
+ The `face-verify` response has the same structure as `face-liveness`, plus `verifyResult`:
958
+
959
+ ```javascript
960
+ {
961
+ // ...face-liveness fields
962
+ verifyResult: {
963
+ verified: boolean // whether the person was verified
964
+ person: { // person used for verification, or null
965
+ id: string
966
+ createdAt: string
967
+ updatedAt: string
968
+ name: string | null
969
+ externalId: string | null
970
+ metadata: { [key: string]: any }
971
+ groups: string[]
972
+ expireAt: string | null
973
+ } | null
974
+ match: { // face comparison details, or null
975
+ verified: boolean
976
+ similarity: number
977
+ } | null
978
+ }
979
+ }
980
+ ```
981
+
907
982
  The `face-capture` response has the following structure:
908
983
 
909
984
  ```javascript
@@ -934,62 +1009,62 @@ element.translations = {
934
1009
 
935
1010
  The list of labels used in the component:
936
1011
 
937
- | Label | Default message in `en` locale |
938
- |:------------------------------|:----------------------------------------------------------------------------------------------------|
939
- | **showOnlyOneFace** | Make sure there is only one face on the screen. | `face-liveness`, `face-capture` |
940
- | **preparingCamera** | Preparing the camera... | `face-liveness`, `face-capture` |
941
- | **allowAccessCamera** | Allow access to the camera | `face-liveness`, `face-capture` |
942
- | **somethingWentWrong** | Something went wrong | `face-liveness`, `face-capture` |
943
- | **incorrectCameraId** | No camera with the specified ID found. | `face-liveness`, `face-capture` |
944
- | **checkCameraId** | Check if the specified camera ID is correct. | `face-liveness`, `face-capture` |
945
- | **preparingService** | Preparing the service... | `face-liveness`, `face-capture` |
946
- | **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | `face-liveness`, `face-capture` |
947
- | **error** | Error! | `face-liveness`, `face-capture` |
948
- | **versionNotSupported** | Your browser version is not supported. | `face-liveness`, `face-capture` |
949
- | **updateBrowser** | Update your browser version | `face-liveness`, `face-capture` |
950
- | **licenseError** | A license error has occurred | `face-liveness`, `face-capture` |
951
- | **licenseExpired** | The license cannot be found or has expired | `face-liveness`, `face-capture` |
952
- | **onlyPortraitOrientation** | Portrait orientation only | `face-liveness`, `face-capture` |
953
- | **turnDeviceIntoPortrait** | Please turn your device into portrait mode | `face-liveness`, `face-capture` |
954
- | **tryAgain** | Try again | `face-liveness`, `face-capture` |
955
- | **noCameraAvailable** | No camera available | `face-liveness`, `face-capture` |
956
- | **checkCameraConnection** | Check the camera connection and try again. | `face-liveness`, `face-capture` |
957
- | **lookStraight** | Look straight | `face-liveness`, `face-capture` |
958
- | **fitYourFace** | Center your face | `face-liveness`, `face-capture` |
959
- | **moveCloser** | Move closer | `face-liveness`, `face-capture` |
960
- | **moveAway** | Move away | `face-liveness`, `face-capture` |
961
- | **holdSteady** | Hold steady | `face-liveness`, `face-capture` |
962
- | **takeAPhoto** | Take a selfie | `face-capture` |
963
- | **processing** | Processing... | `face-liveness`, `face-capture` |
964
- | **retryButtonText** | Retry | `face-liveness`, `face-capture` |
965
- | **followGuidelinesText** | But please follow these guidelines: | `face-liveness`, `face-capture` |
966
- | **letsTryAgainTitle** | Let’s try that again | `face-liveness`, `face-capture` |
967
- | **noCameraPermission** | Camera unavailable! | `face-liveness`, `face-capture` |
968
- | **goButton** | Go | `face-liveness`, `face-capture` |
969
- | **selfieTime** | Selfie time! | `face-liveness`, `face-capture` |
970
- | **ambientLighting** | Ambient lighting is not too bright or too dark and there are no shadows or glare on your face | `face-liveness` |
971
- | **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear | `face-liveness` |
972
- | **turnHead** | Turn your head a bit | `face-liveness` |
973
- | **centerFaceTurnHead** | Center your face, turn your head | `face-liveness` |
974
- | **centerFace** | Center your face | `face-capture` |
975
- | **errorCode** | Error code: | `face-liveness` |
976
- | **illumination** | Good illumination. | `face-liveness`, `face-capture` |
977
- | **cameraLevel** | Camera at eye level. | `face-liveness`, `face-capture` |
978
- | **noAccessories** | No accessories: glasses, mask, hat, etc. | `face-liveness`, `face-capture` |
979
- | **getReady** | Get ready | `face-liveness`, `face-capture` |
980
- | **removeOcclusion** | Remove items covering your face | `face-liveness`, `face-capture` |
981
- | **tooMuchTurn** | Avoid turning your head too much. A small turn is enough. | `face-liveness`, `face-capture` |
982
- | **turnHeadUp** | Turn head up a bit to look straight | `face-liveness`, `face-capture` |
983
- | **turnHeadDown** | Turn head down a bit to look straight | `face-liveness`, `face-capture` |
984
- | **turnHeadLeft** | Turn head left a bit to look straight | `face-liveness`, `face-capture` |
985
- | **turnHeadRight** | Turn head right a bit to look straight | `face-liveness`, `face-capture` |
986
- | **makeFaceFullyVisible** | Remove anything covering your face | `face-liveness`, `face-capture` |
987
- | **blinkYourEyes** | Blink your eyes | `face-liveness`|
988
- | **notSufficientQuality** | Not sufficient selfie quality | `face-liveness` |
989
- | **cleanCameraLens** | Clean camera lens | `face-liveness` |
990
- | **addMoreLight** | Add more light | `face-liveness` |
991
- | **wipeOutOcclusions** | Remove occlusions from face | `face-liveness` |
992
- | **changeBackground** | Change background | `face-liveness` |
1012
+ | Label | Default message in `en` locale | The component |
1013
+ | :---------------------------- | :-------------------------------------------------------------------------------------------------- | :------------------------------------------------------------ |
1014
+ | **showOnlyOneFace** | Make sure there is only one face on the screen. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1015
+ | **preparingCamera** | Preparing the camera... | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1016
+ | **allowAccessCamera** | Allow access to the camera | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1017
+ | **somethingWentWrong** | Something went wrong | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1018
+ | **incorrectCameraId** | No camera with the specified ID found. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1019
+ | **checkCameraId** | Check if the specified camera ID is correct. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1020
+ | **preparingService** | Preparing the service... | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1021
+ | **allowAccessToCamera** | Allow access to the camera and reload this page to continue. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1022
+ | **error** | Error! | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1023
+ | **versionNotSupported** | Your browser version is not supported. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1024
+ | **updateBrowser** | Update your browser version | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1025
+ | **licenseError** | A license error has occurred | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1026
+ | **licenseExpired** | The license cannot be found or has expired | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1027
+ | **onlyPortraitOrientation** | Portrait orientation only | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1028
+ | **turnDeviceIntoPortrait** | Please turn your device into portrait mode | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1029
+ | **tryAgain** | Try again | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1030
+ | **noCameraAvailable** | No camera available | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1031
+ | **checkCameraConnection** | Check the camera connection and try again. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1032
+ | **lookStraight** | Look straight | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1033
+ | **fitYourFace** | Center your face | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1034
+ | **moveCloser** | Move closer | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1035
+ | **moveAway** | Move away | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1036
+ | **holdSteady** | Hold steady | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1037
+ | **takeAPhoto** | Take a selfie | `face-capture` |
1038
+ | **processing** | Processing... | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1039
+ | **retryButtonText** | Retry | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1040
+ | **followGuidelinesText** | But please follow these guidelines: | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1041
+ | **letsTryAgainTitle** | Let’s try that again | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1042
+ | **noCameraPermission** | Camera unavailable! | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1043
+ | **goButton** | Go | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1044
+ | **selfieTime** | Selfie time! | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1045
+ | **ambientLighting** | Ambient lighting is not too bright or too dark and there are no shadows or glare on your face | `face-liveness`, `face-enroll`, `face-verify` |
1046
+ | **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear | `face-liveness`, `face-enroll`, `face-verify` |
1047
+ | **turnHead** | Turn your head a bit | `face-liveness`, `face-enroll`, `face-verify` |
1048
+ | **centerFaceTurnHead** | Center your face, turn your head | `face-liveness`, `face-enroll`, `face-verify` |
1049
+ | **centerFace** | Center your face | `face-capture` |
1050
+ | **errorCode** | Error code: | `face-liveness`, `face-enroll`, `face-verify` |
1051
+ | **illumination** | Good illumination. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1052
+ | **cameraLevel** | Camera at eye level. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1053
+ | **noAccessories** | No accessories: glasses, mask, hat, etc. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1054
+ | **getReady** | Get ready | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1055
+ | **removeOcclusion** | Remove items covering your face | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1056
+ | **tooMuchTurn** | Avoid turning your head too much. A small turn is enough. | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1057
+ | **turnHeadUp** | Turn head up a bit to look straight | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1058
+ | **turnHeadDown** | Turn head down a bit to look straight | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1059
+ | **turnHeadLeft** | Turn head left a bit to look straight | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1060
+ | **turnHeadRight** | Turn head right a bit to look straight | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1061
+ | **makeFaceFullyVisible** | Remove anything covering your face | `face-liveness`, `face-capture`, `face-enroll`, `face-verify` |
1062
+ | **blinkYourEyes** | Blink your eyes | `face-liveness`, `face-enroll`, `face-verify` |
1063
+ | **notSufficientQuality** | Not sufficient selfie quality | `face-liveness`, `face-enroll`, `face-verify` |
1064
+ | **cleanCameraLens** | Clean camera lens | `face-liveness`, `face-enroll`, `face-verify` |
1065
+ | **addMoreLight** | Add more light | `face-liveness`, `face-enroll`, `face-verify` |
1066
+ | **wipeOutOcclusions** | Remove occlusions from face | `face-liveness`, `face-enroll`, `face-verify` |
1067
+ | **changeBackground** | Change background | `face-liveness`, `face-enroll`, `face-verify` |
993
1068
 
994
1069
  ## Examples
995
1070