@regulaforensics/vp-frontend-face-components 8.3.2270-rc → 8.3.2271-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 +38 -34
  2. package/dist/main.iife.js +5 -5
  3. package/dist/main.js +7 -7
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -39,7 +39,7 @@ Important notes:
39
39
  ## Compatibility
40
40
 
41
41
  | 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
- | :------------------- | :-----------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: |
42
+ |:---------------------|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|
43
43
  | **Mobile (iOS)** | 99 (iOS14.4+) | 99 (iOS14.4+) | 11 |
44
44
  | **Mobile (Android)** | 69 | 63 | - |
45
45
  | **Desktop** | 66 | 69 | 11 |
@@ -60,7 +60,6 @@ Run the following command:
60
60
  ```
61
61
  npm init
62
62
  ```
63
-
64
63
  Answer the questions in the command line questionnaire.
65
64
 
66
65
  Install `@regulaforensics/vp-frontend-face-components`:
@@ -192,37 +191,37 @@ component.settings = yourSettings;
192
191
 
193
192
  Here are all the available settings:
194
193
 
195
- | Setting | Info | Data type | Default value | Values | Used in |
196
- | :------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------: | :------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------- |
194
+ | Setting | Info | Data type | Default value | Values | Used in |
195
+ |:--------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|---------------------------------|
197
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` |
198
- | `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
199
- | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
200
- | `cameraId` | Ability to select a camera by defining the camera ID. | `string` | `undefined` | `camera id string value` | `face-liveness`, `face-capture` |
201
- | `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` |
202
- | `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` |
203
- | `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` |
204
- | `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` |
205
- | `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` |
206
- | `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` |
207
- | `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` |
208
- | `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` |
209
- | `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` |
210
- | `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` |
211
- | `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` |
212
- | `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` |
213
- | `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |
214
- | `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` |
215
- | `detectOcclusion` | Whether to disable face occlusion hint. | `boolean` | `true` | `true`, `false` | `face-capture` |
216
- | `tenant` | A label used to group transactions by specific customers, applications, or other criteria. | `string` | `undefined` | tenant | `face-liveness` |
217
- | `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `face-liveness` |
218
- | `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` |
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` |
219
218
 
220
219
  ## Customization
221
220
 
222
221
  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:
223
222
 
224
223
  | Setting | Info | Migrate from | Data type | Default value |
225
- | :------------------------------------------- | :---------------------------------------------------------------------- | ----------------------- | :-----------------------------: | :---------------------: |
224
+ |:---------------------------------------------|:------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|
226
225
  | `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |
227
226
  | `fontSize` | Base font size. | `--font-size` | string | `16px` |
228
227
  | `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |
@@ -402,7 +401,7 @@ const workerPath = component.settings.workerPath;
402
401
  **2.** Upload all files (`Liveness.worker.js`, `Liveness.wasm`, `Liveness.data`) to your own location.
403
402
 
404
403
  !!! warning
405
- The files must be located in the same directory and have the same names as called before.
404
+ The files must be located in the same directory and have the same names as called before.
406
405
 
407
406
  **3.** Update the `workerPath` setting to your custom host directory where all three files are located:
408
407
 
@@ -539,7 +538,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
539
538
  ### Table of event causes
540
539
 
541
540
  | Reason | Description of the reason |
542
- | :-------------------------- | :------------------------------------------------------------------------------------------------------ |
541
+ |:----------------------------|:--------------------------------------------------------------------------------------------------------|
543
542
  | `WASM_ERROR` | Error in WASM. |
544
543
  | `UNKNOWN_ERROR` | Unknown error. |
545
544
  | `NOT_SUPPORTED` | The browser is not supported. |
@@ -556,8 +555,9 @@ In cases of unsuccessful work, the `data` field will contain the following field
556
555
  | `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
557
556
  | `WEBSERVICE_NOT_COMPATIBLE` | The web service and component versions are incompatible. |
558
557
  | `HTTP_NOT_SUPPORTED` | The web component does not work over the HTTP protocol, use HTTPS instead. |
559
- | `CANCELLED` | The user has clicked the Close button. |
558
+ | `CANCELLED` | The user has clicked the Close button. |
560
559
  | `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. |
561
561
 
562
562
  ### Cases of event generation
563
563
 
@@ -899,7 +899,7 @@ The `face-liveness` response has the following structure:
899
899
  status: number // liveness status: 0 if the person's liveness is confirmed, 1 if not.
900
900
  estimatedAge: number | null // approximate age with an accuracy of +/-3 years
901
901
  transactionId: string
902
- type: number // liveness type: 0 - active, 1 - passive
902
+ type: number // liveness type: 0 - active, 1 - passive, 3 - passive with blink
903
903
  images: string[] // array with the final image in base64
904
904
  }
905
905
  ```
@@ -934,8 +934,8 @@ element.translations = {
934
934
 
935
935
  The list of labels used in the component:
936
936
 
937
- | Label | Default message in `en` locale | |
938
- | :---------------------------- | :-------------------------------------------------------------------------------------------------- | ------------------------------- |
937
+ | Label | Default message in `en` locale |
938
+ |:------------------------------|:----------------------------------------------------------------------------------------------------|
939
939
  | **showOnlyOneFace** | Make sure there is only one face on the screen. | `face-liveness`, `face-capture` |
940
940
  | **preparingCamera** | Preparing the camera... | `face-liveness`, `face-capture` |
941
941
  | **allowAccessCamera** | Allow access to the camera | `face-liveness`, `face-capture` |
@@ -984,8 +984,12 @@ The list of labels used in the component:
984
984
  | **turnHeadLeft** | Turn head left a bit to look straight | `face-liveness`, `face-capture` |
985
985
  | **turnHeadRight** | Turn head right a bit to look straight | `face-liveness`, `face-capture` |
986
986
  | **makeFaceFullyVisible** | Remove anything covering your face | `face-liveness`, `face-capture` |
987
- | **done** | Accessibility label for the success screen image when verification is completed. | `face-liveness`, `face-capture` |
988
- | **close** | Accessibility label for the close button in the component header. | `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` |
989
993
 
990
994
  ## Examples
991
995