@regulaforensics/vp-frontend-face-components 6.2.1381-nightly → 6.2.1382-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 +57 -43
  2. package/{lib → dist}/index.d.ts +218 -237
  3. package/dist/main.iife.js +1123 -45
  4. package/package.json +4 -4
package/README.md CHANGED
@@ -10,6 +10,7 @@
10
10
  - [Events](#events)
11
11
  - [Response](#response)
12
12
  - [Custom Translations](#custom-translations)
13
+ - [Package Resources](#package-resources)
13
14
  - [Examples](#examples)
14
15
  - [Licensing](#licensing)
15
16
  - [Additional Resources](#additional-resources)
@@ -134,6 +135,7 @@ component.settings = {
134
135
  tag: 'sessionIdValue',
135
136
  retryCount: 5,
136
137
  recordingProcess: 1,
138
+ workerPath: 'https://your-worker-path.com',
137
139
  customization: {
138
140
  fontFamily: 'Noto Sans, sans-serif',
139
141
  fontSize: '16px',
@@ -187,55 +189,56 @@ component.settings = yourSettings;
187
189
  Here are all the available settings:
188
190
 
189
191
 
190
- | Setting | Info | Data type | Default value | Values | Used in |
191
- |:--------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|---------------------------------|
192
- | `locale` | Language of the component. | `string` | `en` | `ru`, `en`, `de`, `pl`, `it`, `hu`, `zh`, `sk`, `uk`, `fr`, `es`, `pt`, `ar`, `nl`, `id`, `vi`, `ko`, `ms`, `ro`, `el`, `tr`, `ja`, `cs`, `th`, `hi`, `bn`, `he`, `fi`, `sv`, `da`, `hr`, `no` | `face-liveness`, `face-capture` |
193
- | `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
194
- | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture` |
195
- | `cameraId` | Ability to select a camera by defining the camera ID. | `string` | `undefined` | `camera id string value` | `face-liveness`, `face-capture` |
196
- | `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` |
197
- | `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` |
198
- | `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` |
199
- | `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` |
200
- | `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` |
201
- | `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` |
202
- | `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` | `-1` | number of the attempts count | `face-liveness` |
203
- | `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` |
204
- | `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` |
205
- | `nonce` | You can set a unique nonce value to maintain the CSP policy. | `string` | `undefined` | unique nonce value | `face-liveness`, `face-capture` |
206
- | `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` |
207
- | `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` |
208
- | `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |
209
- | `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. | `number` | `0` | `0`, `1` | `face-liveness` |
192
+ | Setting | Info | Data type | Default value | Values | Used in |
193
+ |:--------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|-----------------------------------------------------|
194
+ | `locale` | Language of the component. | `string` | `en` | `ru`, `en`, `de`, `pl`, `it`, `hu`, `zh`, `sk`, `uk`, `fr`, `es`, `pt`, `ar`, `nl`, `id`, `vi`, `ko`, `ms`, `ro`, `el`, `tr`, `ja`, `cs`, `th`, `hi`, `bn`, `he`, `fi`, `sv`, `da`, `hr`, `no` | `face-liveness`, `face-capture` |
195
+ | `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
196
+ | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture` |
197
+ | `cameraId` | Ability to select a camera by defining the camera ID. | `string` | `undefined` | `camera id string value` | `face-liveness`, `face-capture` |
198
+ | `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` |
199
+ | `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` |
200
+ | `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` |
201
+ | `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` |
202
+ | `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` |
203
+ | `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` |
204
+ | `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` | `-1` | number of the attempts count | `face-liveness` |
205
+ | `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` |
206
+ | `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` |
207
+ | `nonce` | You can set a unique nonce value to maintain the CSP policy. | `string` | `undefined` | unique nonce value | `face-liveness`, `face-capture` |
208
+ | `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` |
209
+ | `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` |
210
+ | `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |
211
+ | `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. | `number` | `0` | `0`, `1` | `face-liveness` |
212
+ | `workerPath` | The URL with path to your worker file. | `string` | `unique regula wasm url` | your URL to worker or `'self'` | `face-liveness`, `face-capture` |
210
213
 
211
214
  ## Customization
212
215
 
213
216
  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:
214
217
 
215
- | Setting | Info | Migrate from | Data type | Default value |
216
- |:---------------------------------------------|:-----------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|
217
- | `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |
218
- | `fontSize` | Base font size. | `--font-size` | string | `16px` |
219
- | `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |
220
- | `onboardingScreenStartButtonBackgroundHover` | Instruction screen button background hover color. | `--hover-color` | string | `#7C45B4` |
221
- | `onboardingScreenStartButtonTitle` | Instruction screen button text color. | | string | `#FFFFFF` |
222
- | `onboardingScreenStartButtonTitleHover` | Instruction screen button text hover color. | | string | `#FFFFFF` |
223
- | `onboardingScreenIllumination` | Instruction screen "Illumination" icon image. | | base64 or url or imported image | `` |
224
- | `onboardingScreenAccessories` | Instruction screen "No accessories" icon image. | | base64 or url or imported image | `` |
225
- | `onboardingScreenCameraLevel` | Instruction screen "Camera level" icon image. | | base64 or url or imported image | `` |
226
- | `cameraScreenFrontHintLabelBackground` | Сamera screen plate with info message background color. | `--plate-color` | string | `#E8E8E8` |
227
- | `cameraScreenFrontHintLabelText` | Сamera screen plate with info message text color. | | string | `#000000` |
218
+ | Setting | Info | Migrate from | Data type | Default value |
219
+ |:---------------------------------------------|:------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|
220
+ | `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |
221
+ | `fontSize` | Base font size. | `--font-size` | string | `16px` |
222
+ | `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |
223
+ | `onboardingScreenStartButtonBackgroundHover` | Instruction screen button background hover color. | `--hover-color` | string | `#7C45B4` |
224
+ | `onboardingScreenStartButtonTitle` | Instruction screen button text color. | | string | `#FFFFFF` |
225
+ | `onboardingScreenStartButtonTitleHover` | Instruction screen button text hover color. | | string | `#FFFFFF` |
226
+ | `onboardingScreenIllumination` | Instruction screen "Illumination" icon image. | | base64 or url or imported image | `` |
227
+ | `onboardingScreenAccessories` | Instruction screen "No accessories" icon image. | | base64 or url or imported image | `` |
228
+ | `onboardingScreenCameraLevel` | Instruction screen "Camera level" icon image. | | base64 or url or imported image | `` |
229
+ | `cameraScreenFrontHintLabelBackground` | Сamera screen plate with info message background color. | `--plate-color` | string | `#E8E8E8` |
230
+ | `cameraScreenFrontHintLabelText` | Сamera screen plate with info message text color. | | string | `#000000` |
228
231
  | `cameraScreenSectorActive` | User progress sector color (available only in face-liveness component). | | string | `#7E57C5` |
229
- | `cameraScreenSectorTarget` | Target sector color (available only in face-liveness component). | `--target-sector-color` | string | `#BEABE2` |
230
- | `cameraScreenStrokeNormal` | Stroke color of the camera circle. | | string | `#7E57C5` |
231
- | `processingScreenProgress` | Processing screen spinner color. | | string | `#7E57C5` |
232
- | `retryScreenEnvironmentImage` | Retry screen environment image. | | base64 or url or imported image | `` |
233
- | `retryScreenPersonImage` | Retry screen person image. | | base64 or url or imported image | `` |
234
- | `retryScreenRetryButtonBackground` | Retry screen button background color. | `--main-color` | string | `#7E57C5` |
235
- | `retryScreenRetryButtonBackgroundHover` | Retry screen button background hover color. | `--hover-color` | string | `#7C45B4` |
236
- | `retryScreenRetryButtonTitle` | Retry screen button text color. | | string | `#FFFFFF` |
237
- | `retryScreenRetryButtonTitleHover` | Retry screen button text hover color. | | string | `#FFFFFF` |
238
- | `successScreenImage` | Success screen image. | | base64 or url or imported image | `` |
232
+ | `cameraScreenSectorTarget` | Target sector color (available only in face-liveness component). | `--target-sector-color` | string | `#BEABE2` |
233
+ | `cameraScreenStrokeNormal` | Stroke color of the camera circle. | | string | `#7E57C5` |
234
+ | `processingScreenProgress` | Processing screen spinner color. | | string | `#7E57C5` |
235
+ | `retryScreenEnvironmentImage` | Retry screen environment image. | | base64 or url or imported image | `` |
236
+ | `retryScreenPersonImage` | Retry screen person image. | | base64 or url or imported image | `` |
237
+ | `retryScreenRetryButtonBackground` | Retry screen button background color. | `--main-color` | string | `#7E57C5` |
238
+ | `retryScreenRetryButtonBackgroundHover` | Retry screen button background hover color. | `--hover-color` | string | `#7C45B4` |
239
+ | `retryScreenRetryButtonTitle` | Retry screen button text color. | | string | `#FFFFFF` |
240
+ | `retryScreenRetryButtonTitleHover` | Retry screen button text hover color. | | string | `#FFFFFF` |
241
+ | `successScreenImage` | Success screen image. | | base64 or url or imported image | `` |
239
242
 
240
243
  For example:
241
244
 
@@ -659,6 +662,17 @@ The list of labels used in the component:
659
662
  | **noAccessories** | No accessories: glasses, mask, hat, etc. | `face-liveness`, `face-capture` |
660
663
  | **getReady** | Get ready | `face-liveness`, `face-capture` |
661
664
 
665
+ ## Package Resources
666
+
667
+ Face web components requires WASM (`Liveness.wasm`, `Liveness.data`) and worker (`Liveness.worker.js`) files to work.
668
+ By default, these files are downloaded from Regula servers, but you can set your own source.
669
+
670
+ **1.** To download these files from our server to local machine, you can get path from `webComponent.settings.workerPath` field after initialization. To see the file you should concat path and name of the file (`workerParh + '/Liveness.worker.js'`)
671
+ **2.** Upload all three files (`Liveness.worker.js`, `Liveness.wasm`, `Liveness.data`) to the location you specified.
672
+ **3.** Set your URL to `workerPath` to `settings` (see Settings section).
673
+
674
+ **Attention!** The files must be located in the same directory and have the same names as were previously specified.
675
+
662
676
  ## Examples
663
677
 
664
678
  You can find examples of using the components on the <a href="https://github.com/regulaforensics/face-web-components-samples" target="_blank">Samples page</a>.