@regulaforensics/vp-frontend-face-components 8.5.2437-nightly → 8.5.2439-rc

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 +26 -28
  2. package/dist/index.d.ts +3 -5
  3. package/dist/main.iife.js +30 -31
  4. package/dist/main.js +5003 -5214
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -197,33 +197,32 @@ component.settings = yourSettings;
197
197
 
198
198
  Here are all the available settings:
199
199
 
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
- | `rejectMultipleFaces` | Whether to reject capture when more than one face is in the camera frame | `boolean` | `false` | `true`, `false` | `face-capture` |
222
- | `tenant` | A label used to group transactions by specific customers, applications, or other criteria. | `string` | `undefined` | tenant | `face-liveness`, `face-enroll`, `face-verify` |
223
- | `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `face-liveness`, `face-enroll`, `face-verify` |
224
- | `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` |
225
- | `enroll` | Person enrollment configuration. Required for `face-enroll`. 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` |
226
- | `verify` | Person verification configuration. Required for `face-verify`. 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 `personId` and optional `threshold` | `face-verify` |
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`. 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`. 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 `personId` and optional `threshold` | `face-verify` |
227
226
 
228
227
  ## Customization
229
228
 
@@ -1066,7 +1065,6 @@ The list of labels used in the component:
1066
1065
  | **addMoreLight** | Add more light | `face-liveness`, `face-enroll`, `face-verify` |
1067
1066
  | **wipeOutOcclusions** | Remove occlusions from face | `face-liveness`, `face-enroll`, `face-verify` |
1068
1067
  | **changeBackground** | Change background | `face-liveness`, `face-enroll`, `face-verify` |
1069
- | **tooManyFaces** | Make sure you are the only person in the frame | `face-capture` |
1070
1068
 
1071
1069
  ## Examples
1072
1070
 
package/dist/index.d.ts CHANGED
@@ -100,7 +100,6 @@ export declare const ErrorTypes: {
100
100
  readonly CANCELLED: "CANCELLED";
101
101
  readonly BAD_FACE_QUALITY: "BAD_FACE_QUALITY";
102
102
  readonly BAD_FRAME_SIZE: "BAD_FRAME_SIZE";
103
- readonly TOO_MANY_FACES: "TOO_MANY_FACES";
104
103
  };
105
104
 
106
105
  export declare type ErrorTypes = (typeof ErrorTypes)[keyof typeof ErrorTypes];
@@ -130,7 +129,6 @@ export declare interface FaceDetectionSettings {
130
129
  detectOcclusion?: boolean;
131
130
  showFaceAnimation?: boolean;
132
131
  captureButton?: boolean;
133
- rejectMultipleFaces?: boolean;
134
132
  }
135
133
 
136
134
  export declare class FaceDetectionWebComponent extends HTMLElement {
@@ -217,7 +215,7 @@ export declare const FaceLivenessResultStatus: {
217
215
 
218
216
  export declare type FaceLivenessResultStatus = (typeof FaceLivenessResultStatus)[keyof typeof FaceLivenessResultStatus];
219
217
 
220
- export declare interface FaceLivenessSettings extends Omit<FaceDetectionSettings, 'holdStillDuration' | 'timeoutInterval' | 'showFaceAnimation' | 'rejectMultipleFaces'> {
218
+ export declare interface FaceLivenessSettings extends Omit<FaceDetectionSettings, 'holdStillDuration' | 'timeoutInterval' | 'showFaceAnimation'> {
221
219
  url?: string;
222
220
  deviceOrientation?: boolean;
223
221
  videoRecording?: boolean;
@@ -316,13 +314,13 @@ export declare interface IFaceVerify extends IFaceLiveness {
316
314
  verify?: VerifyConfig;
317
315
  }
318
316
 
319
- 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' | 'tooManyFaces';
317
+ 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';
320
318
 
321
319
  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' | 'ky' | 'hy';
322
320
 
323
321
  declare type Languages = LocalCodes | LanguageCodes;
324
322
 
325
- declare type LocalCodes = 'ru-RU' | 'en-US' | 'de-DE' | 'pl-PL' | 'it-IT' | 'hu-HU' | 'zh-Hans' | 'sk-SK' | 'uk-UA' | 'fr-FR' | 'es-ES' | 'pt-PT' | 'ar-AE' | 'nl-NL' | 'id-ID' | 'vi-VN' | 'ko-KR' | 'ms-MY' | 'ro-RO' | 'el-GR' | 'tr-TR' | 'ja-JP' | 'cs-CZ' | 'th-TH' | 'hi-IN' | 'bn-BD' | 'he-IL' | 'fi-FI' | 'sv-SE' | 'da-DK' | 'hr-HR' | 'no-NO' | 'uz-Latn' | 'ku-Arab' | 'tg-TJ' | 'ky-KG' | 'hy-AM' | 'zh-Hant';
323
+ declare type LocalCodes = 'ru-RU' | 'en-US' | 'de-DE' | 'pl-PL' | 'it-IT' | 'hu-HU' | 'zh-Hans' | 'sk-SK' | 'uk-UA' | 'fr-FR' | 'es-ES' | 'pt-PT' | 'ar-AE' | 'nl-NL' | 'id-ID' | 'vi-VN' | 'ko-KR' | 'ms-MY' | 'ro-RO' | 'el-GR' | 'tr-TR' | 'ja-JP' | 'cs-CZ' | 'th-TH' | 'hi-IN' | 'bn-BD' | 'he-IL' | 'fi-FI' | 'sv-SE' | 'da-DK' | 'hr-HR' | 'no-NO' | 'uz-Latn' | 'ku-Arab' | 'tg-TJ' | 'ky-KG' | 'hy-AM';
326
324
 
327
325
  export declare type Locales = Languages | string;
328
326