@regulaforensics/vp-frontend-face-components 8.3.2250-nightly → 8.3.2251-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 (5) hide show
  1. package/README.md +19 -17
  2. package/dist/index.d.ts +1 -1
  3. package/dist/main.iife.js +6 -6
  4. package/dist/main.js +114 -44
  5. 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,6 +60,7 @@ Run the following command:
60
60
  ```
61
61
  npm init
62
62
  ```
63
+
63
64
  Answer the questions in the command line questionnaire.
64
65
 
65
66
  Install `@regulaforensics/vp-frontend-face-components`:
@@ -187,13 +188,12 @@ const yourSettings = {
187
188
  const component = document.getElementsByTagName('face-liveness')[0];
188
189
 
189
190
  component.settings = yourSettings;
190
-
191
191
  ```
192
192
 
193
193
  Here are all the available settings:
194
194
 
195
195
  | Setting | Info | Data type | Default value | Values | Used in |
196
- |:--------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|---------------------------------|
196
+ | :------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------: | :------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------- |
197
197
  | `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` | `face-liveness`, `face-capture` |
198
198
  | `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
199
199
  | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
@@ -206,23 +206,23 @@ Here are all the available settings:
206
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
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
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` |
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
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
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
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` |
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
215
  | `detectOcclusion` | Whether to disable face occlusion hint. | `boolean` | `true` | `true`, `false` | `face-capture` |
216
216
  | `tenant` | A label used to group transactions by specific customers, applications, or other criteria. | `string` | `undefined` | tenant | `face-liveness` |
217
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` |
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` |
219
219
 
220
220
  ## Customization
221
221
 
222
222
  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
223
 
224
224
  | Setting | Info | Migrate from | Data type | Default value |
225
- |:---------------------------------------------|:------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|
225
+ | :------------------------------------------- | :---------------------------------------------------------------------- | ----------------------- | :-----------------------------: | :---------------------: |
226
226
  | `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |
227
227
  | `fontSize` | Base font size. | `--font-size` | string | `16px` |
228
228
  | `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |
@@ -402,7 +402,7 @@ const workerPath = component.settings.workerPath;
402
402
  **2.** Upload all files (`Liveness.worker.js`, `Liveness.wasm`, `Liveness.data`) to your own location.
403
403
 
404
404
  !!! warning
405
- The files must be located in the same directory and have the same names as called before.
405
+ The files must be located in the same directory and have the same names as called before.
406
406
 
407
407
  **3.** Update the `workerPath` setting to your custom host directory where all three files are located:
408
408
 
@@ -453,7 +453,7 @@ For example:
453
453
  const component = document.querySelector('face-liveness');
454
454
 
455
455
  component.settings = {
456
- nonce: '<YOUR_NONCE_VALUE>'
456
+ nonce: '<YOUR_NONCE_VALUE>',
457
457
  };
458
458
  ```
459
459
 
@@ -465,9 +465,9 @@ For details about the `nonce` setting, see [Settings](#settings).
465
465
 
466
466
  Face SDK Web Components load package resources required for WebAssembly execution:
467
467
 
468
- * `Liveness.worker.js`
469
- * `Liveness.wasm`
470
- * `Liveness.data`
468
+ - `Liveness.worker.js`
469
+ - `Liveness.wasm`
470
+ - `Liveness.data`
471
471
 
472
472
  By default, these files are downloaded from Regula servers. If your CSP restricts external resources, make sure that the source of these files is allowed by your policy.
473
473
 
@@ -539,7 +539,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
539
539
  ### Table of event causes
540
540
 
541
541
  | Reason | Description of the reason |
542
- |:----------------------------|:--------------------------------------------------------------------------------------------------------|
542
+ | :-------------------------- | :------------------------------------------------------------------------------------------------------ |
543
543
  | `WASM_ERROR` | Error in WASM. |
544
544
  | `UNKNOWN_ERROR` | Unknown error. |
545
545
  | `NOT_SUPPORTED` | The browser is not supported. |
@@ -556,7 +556,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
556
556
  | `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
557
557
  | `WEBSERVICE_NOT_COMPATIBLE` | The web service and component versions are incompatible. |
558
558
  | `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. |
559
+ | `CANCELLED` | The user has clicked the Close button. |
560
560
  | `BAD_FACE_QUALITY` | The facial image quality is too low. |
561
561
 
562
562
  ### Cases of event generation
@@ -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,6 +984,8 @@ 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
989
 
988
990
  ## Examples
989
991
 
package/dist/index.d.ts CHANGED
@@ -216,7 +216,7 @@ export declare interface IFaceLiveness extends IFaceDetection {
216
216
  'device-orientation'?: boolean;
217
217
  }
218
218
 
219
- declare type Labels = 'showOnlyOneFace' | 'preparingCamera' | 'allowAccessCamera' | 'somethingWentWrong' | 'incorrectCameraId' | 'checkCameraId' | 'preparingService' | 'allowAccessToCamera' | 'error' | 'versionNotSupported' | 'updateBrowser' | 'licenseError' | 'licenseExpired' | 'onlyPortraitOrientation' | 'turnDeviceIntoPortrait' | 'tryAgain' | 'noCameraAvailable' | 'checkCameraConnection' | 'noMaskSunglassesHeaddress' | 'ambientLighting' | 'lookStraight' | 'fitYourFace' | 'moveCloser' | 'moveAway' | 'holdSteady' | 'takeAPhoto' | 'turnHead' | 'removeOcclusion' | 'turnHeadUp' | 'turnHeadDown' | 'turnHeadLeft' | 'turnHeadRight' | 'blinkYourEyes' | 'processing' | 'retryButtonText' | 'followGuidelinesText' | 'letsTryAgainTitle' | 'noCameraPermission' | 'goButton' | 'centerFaceTurnHead' | 'centerFace' | 'selfieTime' | 'errorCode' | 'illumination' | 'cameraLevel' | 'noAccessories' | 'getReady' | 'httpNotSupported' | 'webServerNotCompatible' | 'processCompleted' | 'notSufficientQuality' | 'cleanCameraLens' | 'addMoreLight' | 'wipeOutOcclusions' | 'changeBackground' | 'tooMuchTurn' | 'makeFaceFullyVisible';
219
+ declare type Labels = 'showOnlyOneFace' | 'preparingCamera' | 'allowAccessCamera' | 'somethingWentWrong' | 'incorrectCameraId' | 'checkCameraId' | 'preparingService' | 'allowAccessToCamera' | 'error' | 'versionNotSupported' | 'updateBrowser' | 'licenseError' | 'licenseExpired' | 'onlyPortraitOrientation' | 'turnDeviceIntoPortrait' | 'tryAgain' | 'noCameraAvailable' | 'checkCameraConnection' | 'noMaskSunglassesHeaddress' | 'ambientLighting' | 'lookStraight' | 'fitYourFace' | 'moveCloser' | 'moveAway' | 'holdSteady' | 'takeAPhoto' | 'turnHead' | 'removeOcclusion' | 'turnHeadUp' | 'turnHeadDown' | 'turnHeadLeft' | 'turnHeadRight' | 'blinkYourEyes' | 'processing' | 'retryButtonText' | 'followGuidelinesText' | 'letsTryAgainTitle' | 'noCameraPermission' | 'goButton' | 'centerFaceTurnHead' | 'centerFace' | 'selfieTime' | 'errorCode' | 'illumination' | 'cameraLevel' | 'noAccessories' | 'getReady' | 'httpNotSupported' | 'webServerNotCompatible' | 'processCompleted' | 'notSufficientQuality' | 'cleanCameraLens' | 'addMoreLight' | 'wipeOutOcclusions' | 'changeBackground' | 'tooMuchTurn' | 'makeFaceFullyVisible' | 'done' | 'close';
220
220
 
221
221
  declare type LanguageCodes = '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';
222
222