@regulaforensics/vp-frontend-face-components 8.3.2235-rc → 8.3.2236-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 +78 -77
  2. package/dist/index.d.ts +13 -5
  3. package/dist/main.iife.js +14 -12
  4. package/dist/main.js +382 -262
  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`:
@@ -86,14 +87,14 @@ For example:
86
87
  ```html
87
88
  <!DOCTYPE html>
88
89
  <html>
89
- <head>
90
- <meta charset="utf-8" />
91
- <title>My app</title>
92
- </head>
93
- <body>
94
- <face-capture></face-capture>
95
- <script type="module" src="index.js"></script>
96
- </body>
90
+ <head>
91
+ <meta charset="utf-8" />
92
+ <title>My app</title>
93
+ </head>
94
+ <body>
95
+ <face-capture></face-capture>
96
+ <script type="module" src="index.js"></script>
97
+ </body>
97
98
  </html>
98
99
  ```
99
100
 
@@ -119,7 +120,7 @@ Note that `settings` must be applied **after** the component has been added to t
119
120
 
120
121
  An example of using all the settings:
121
122
 
122
- ````javascript
123
+ ```javascript
123
124
  const component = document.getElementsByTagName('face-liveness')[0];
124
125
 
125
126
  component.settings = {
@@ -132,7 +133,7 @@ component.settings = {
132
133
  finishScreen: true,
133
134
  url: 'https://your-server.com',
134
135
  headers: {
135
- Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
136
+ Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==',
136
137
  },
137
138
  tag: 'sessionIdValue',
138
139
  tenant: 'ABCDEF',
@@ -164,37 +165,35 @@ component.settings = {
164
165
  retryScreenEnvironmentImage: 'https://path-to-image.com',
165
166
  retryScreenPersonImage: 'data:image/svg+xml;base64,PHN2...',
166
167
  successScreenImage: importedImage,
167
- }
168
- }
169
-
170
- ````
168
+ },
169
+ };
170
+ ```
171
171
 
172
172
  An example of using just the selected settings:
173
173
 
174
- ````javascript
174
+ ```javascript
175
175
  const yourSettings = {
176
176
  locale: 'de',
177
177
  videoRecording: false,
178
178
  url: 'https://your-server.com',
179
179
  headers: {
180
- Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
180
+ Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==',
181
181
  },
182
182
  customization: {
183
183
  fontFamily: 'Noto Sans, sans-serif',
184
184
  successScreenImage: importedImage,
185
- }
186
- }
185
+ },
186
+ };
187
187
 
188
188
  const component = document.getElementsByTagName('face-liveness')[0];
189
189
 
190
190
  component.settings = yourSettings;
191
-
192
- ````
191
+ ```
193
192
 
194
193
  Here are all the available settings:
195
194
 
196
195
  | Setting | Info | Data type | Default value | Values | Used in |
197
- |:--------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|---------------------------------|
196
+ | :------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------: | :------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------- |
198
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` |
199
198
  | `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
200
199
  | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
@@ -207,7 +206,7 @@ Here are all the available settings:
207
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` |
208
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` |
209
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` |
210
- | `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
+ | `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` |
211
210
  | `nonce` | You can set a unique nonce value to maintain the CSP policy. | `string` | `undefined` | unique nonce value | `face-liveness`, `face-capture` |
212
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` |
213
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` |
@@ -218,13 +217,12 @@ Here are all the available settings:
218
217
  | `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `face-liveness` |
219
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. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture` |
220
219
 
221
-
222
220
  ## Customization
223
221
 
224
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:
225
223
 
226
224
  | Setting | Info | Migrate from | Data type | Default value |
227
- |:---------------------------------------------|:------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|
225
+ | :------------------------------------------- | :---------------------------------------------------------------------- | ----------------------- | :-----------------------------: | :---------------------: |
228
226
  | `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |
229
227
  | `fontSize` | Base font size. | `--font-size` | string | `16px` |
230
228
  | `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |
@@ -248,13 +246,16 @@ You can customize the color of some elements, fonts, and images with the help of
248
246
  | `retryScreenRetryButtonTitle` | Retry screen button text color. | | string | `#FFFFFF` |
249
247
  | `retryScreenRetryButtonTitleHover` | Retry screen button text hover color. | | string | `#FFFFFF` |
250
248
  | `successScreenImage` | Success screen image. | | base64 or url or imported image | `` |
251
-
252
-
249
+ | `faceQualityScreenMainImage` | Face quality screen main image. | | base64 or url or imported image | `` |
250
+ | `faceQualityScreenCleanCameraImage` | Face quality screen "Clean camera lens" icon image. | | base64 or url or imported image | `` |
251
+ | `faceQualityScreenIlluminationImage` | Face quality screen "Illumination" icon image. | | base64 or url or imported image | `` |
252
+ | `faceQualityScreenAccessoriesImage` | Face quality screen "No accessories" icon image. | | base64 or url or imported image | `` |
253
+ | `faceQualityScreenChangeBackgroundImage` | Face quality screen "Change background" icon image. | | base64 or url or imported image | `` |
253
254
 
254
255
  For example:
255
256
 
256
257
  ```javascript
257
- const component = document.getElementsByTagName('face-liveness')[0];
258
+ const component = document.getElementsByTagName('face-liveness')[0];
258
259
 
259
260
  component.settings = {
260
261
  ...otherSettings,
@@ -264,9 +265,8 @@ component.settings = {
264
265
  onboardingScreenStartButtonBackground: '#7E57C5',
265
266
  onboardingScreenStartButtonBackgroundHover: '#7c45b4',
266
267
  retryScreenPersonImage: 'data:image/svg+xml;base64,PHN2...',
267
- }
268
- }
269
-
268
+ },
269
+ };
270
270
  ```
271
271
 
272
272
  ### CSS Parts
@@ -385,10 +385,10 @@ For more details about `::part()` CSS pseudo-elements, see the <a href="https://
385
385
 
386
386
  ## Package Resources
387
387
 
388
- For proper operation, Face SDK Web Components require several package files:
388
+ For proper operation, Face SDK Web Components require several package files:
389
389
 
390
- * WASM (`Liveness.wasm`, `Liveness.data`)
391
- * worker (`Liveness.worker.js`)
390
+ - WASM (`Liveness.wasm`, `Liveness.data`)
391
+ - worker (`Liveness.worker.js`)
392
392
 
393
393
  By default, these files are downloaded from Regula servers, but you can set your own sources. To do this, perform the following steps:
394
394
 
@@ -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
 
@@ -413,7 +413,6 @@ component.settings.workerPath = 'https://<CUSTOM_PATH_TO_WASM_AND_WORKER_FILES_P
413
413
 
414
414
  To decrease file size, on your server you can apply the desired <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding" target="_blank">compression method</a>.
415
415
 
416
-
417
416
  ## Events
418
417
 
419
418
  You can subscribe to the component events.
@@ -421,7 +420,7 @@ You can subscribe to the component events.
421
420
  For example:
422
421
 
423
422
  ```javascript
424
- const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
423
+ const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
425
424
  const faceCaptureComponent = document.getElementsByTagName('face-capture')[0];
426
425
 
427
426
  faceLivenessComponent.addEventListener('face-liveness', (event) => console.log(event.detail)); // event listener for face-liveness component
@@ -442,16 +441,16 @@ The generated event object (`event.detail`) contains three fields that describe
442
441
 
443
442
  ### Type of actions
444
443
 
445
- | Type of action | Description of the action | The component |
446
- |:-------------------------|:---------------------------------------------------------------------------------------|:-------------------------------|
447
- | `ELEMENT_VISIBLE` | The component is appended in the DOM. | `face-liveness`, `face-capture` |
448
- | `PRESS_START_BUTTON` | The "Get started" button is pressed. | `face-liveness`, `face-capture` |
449
- | `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `face-liveness`, `face-capture` |
450
- | `CLOSE` | The "Close" button is pressed. | `face-liveness`, `face-capture` |
444
+ | Type of action | Description of the action | The component |
445
+ | :----------------------- | :-------------------------------------------------------------------------------------- | :------------------------------ |
446
+ | `ELEMENT_VISIBLE` | The component is appended in the DOM. | `face-liveness`, `face-capture` |
447
+ | `PRESS_START_BUTTON` | The "Get started" button is pressed. | `face-liveness`, `face-capture` |
448
+ | `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `face-liveness`, `face-capture` |
449
+ | `CLOSE` | The "Close" button is pressed. | `face-liveness`, `face-capture` |
451
450
  | `PROCESSING_REQUEST` | The component is sending data to the backend. | `face-liveness` |
452
- | `PROCESS_FINISHED` | The component has finished its work. | `face-liveness`, `face-capture` |
453
- | `SERVICE_INITIALIZED` | The component has started its work. | `face-liveness`, `face-capture` |
454
- | `RETRY_COUNTER_EXCEEDED` | The component has finished its work due to the exceeded number of transaction attempts. | `face-liveness` |
451
+ | `PROCESS_FINISHED` | The component has finished its work. | `face-liveness`, `face-capture` |
452
+ | `SERVICE_INITIALIZED` | The component has started its work. | `face-liveness`, `face-capture` |
453
+ | `RETRY_COUNTER_EXCEEDED` | The component has finished its work due to the exceeded number of transaction attempts. | `face-liveness` |
455
454
 
456
455
  In cases of successful operation of the components, the `data` field will contain the following fields:
457
456
 
@@ -474,7 +473,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
474
473
  ### Table of event causes
475
474
 
476
475
  | Reason | Description of the reason |
477
- |:----------------------------|:--------------------------------------------------------------------------------------------------------|
476
+ | :-------------------------- | :------------------------------------------------------------------------------------------------------ |
478
477
  | `WASM_ERROR` | Error in WASM. |
479
478
  | `UNKNOWN_ERROR` | Unknown error. |
480
479
  | `NOT_SUPPORTED` | The browser is not supported. |
@@ -491,7 +490,8 @@ In cases of unsuccessful work, the `data` field will contain the following field
491
490
  | `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
492
491
  | `WEBSERVICE_NOT_COMPATIBLE` | The web service and component versions are incompatible. |
493
492
  | `HTTP_NOT_SUPPORTED` | The web component does not work over the HTTP protocol, use HTTPS instead. |
494
- | `CANCELLED` | The user has clicked the Close button. |
493
+ | `CANCELLED` | The user has clicked the Close button. |
494
+ | `BAD_FACE_QUALITY` | The facial image quality is too low. |
495
495
 
496
496
  ### Cases of event generation
497
497
 
@@ -514,7 +514,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
514
514
 
515
515
  ```javascript
516
516
  {
517
- action: "ELEMENT_VISIBLE",
517
+ action: "ELEMENT_VISIBLE",
518
518
  data: null
519
519
  }
520
520
  ```
@@ -527,7 +527,7 @@ For example:
527
527
 
528
528
  ```html
529
529
  <div id="add-event-listener-to-this-element">
530
- <face-liveness></face-liveness>
530
+ <face-liveness></face-liveness>
531
531
  </div>
532
532
  ```
533
533
 
@@ -543,7 +543,7 @@ For example:
543
543
 
544
544
  ```javascript
545
545
  {
546
- action: "PRESS_START_BUTTON",
546
+ action: "PRESS_START_BUTTON",
547
547
  data: null
548
548
  }
549
549
  ```
@@ -561,7 +561,7 @@ For example:
561
561
 
562
562
  ```javascript
563
563
  {
564
- action: "PRESS_RETRY_BUTTON",
564
+ action: "PRESS_RETRY_BUTTON",
565
565
  data: null
566
566
  }
567
567
  ```
@@ -579,7 +579,7 @@ For example:
579
579
 
580
580
  ```javascript
581
581
  {
582
- action: "CLOSE",
582
+ action: "CLOSE",
583
583
  data: {
584
584
  reason: "CANCELLED",
585
585
  status: 0
@@ -600,7 +600,7 @@ For example:
600
600
 
601
601
  ```javascript
602
602
  {
603
- action: "CLOSE",
603
+ action: "CLOSE",
604
604
  data: {
605
605
  reason: "CANCELLED",
606
606
  status: 0
@@ -621,7 +621,7 @@ For example:
621
621
 
622
622
  ```javascript
623
623
  {
624
- action: "CLOSE",
624
+ action: "CLOSE",
625
625
  data: {
626
626
  reason: "CANCELLED",
627
627
  transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
@@ -643,7 +643,7 @@ For example:
643
643
 
644
644
  ```javascript
645
645
  {
646
- action: "PROCESS_FINISHED",
646
+ action: "PROCESS_FINISHED",
647
647
  data: {
648
648
  response: { ... },
649
649
  status: 1
@@ -664,7 +664,7 @@ For example:
664
664
 
665
665
  ```javascript
666
666
  {
667
- action: "PROCESS_FINISHED",
667
+ action: "PROCESS_FINISHED",
668
668
  data: {
669
669
  reason: "An event has occurred",
670
670
  status: 0
@@ -685,7 +685,7 @@ For example:
685
685
 
686
686
  ```javascript
687
687
  {
688
- action: "PROCESS_FINISHED",
688
+ action: "PROCESS_FINISHED",
689
689
  data: {
690
690
  reason: "An event has occurred",
691
691
  status: 0
@@ -706,7 +706,7 @@ For example:
706
706
 
707
707
  ```javascript
708
708
  {
709
- action: "PROCESS_FINISHED",
709
+ action: "PROCESS_FINISHED",
710
710
  data: {
711
711
  reason: "An event has occurred",
712
712
  transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
@@ -728,7 +728,7 @@ For example:
728
728
 
729
729
  ```javascript
730
730
  {
731
- action: "PROCESS_FINISHED",
731
+ action: "PROCESS_FINISHED",
732
732
  data: {
733
733
  reason: "TIMEOUT_ERROR",
734
734
  status: 0
@@ -749,7 +749,7 @@ For example:
749
749
 
750
750
  ```javascript
751
751
  {
752
- action: "PROCESS_FINISHED",
752
+ action: "PROCESS_FINISHED",
753
753
  data: {
754
754
  reason: "TIMEOUT_ERROR",
755
755
  transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
@@ -830,19 +830,19 @@ The `face-liveness` response has the following structure:
830
830
  [key: string]: any
831
831
  };
832
832
  tag: string
833
- status: number // liveness status: 0 if the person's liveness is confirmed, 1 if not.
833
+ status: number // liveness status: 0 if the person's liveness is confirmed, 1 if not.
834
834
  estimatedAge: number | null // approximate age with an accuracy of +/-3 years
835
835
  transactionId: string
836
836
  type: number // liveness type: 0 - active, 1 - passive
837
- images: string[] // array with the final image in base64
837
+ images: string[] // array with the final image in base64
838
838
  }
839
- ````
839
+ ```
840
840
 
841
841
  The `face-capture` response has the following structure:
842
842
 
843
843
  ```javascript
844
844
  {
845
- capture: string[] // array with the final image in base64
845
+ capture: string[] // array with the final image in base64
846
846
  }
847
847
  ```
848
848
 
@@ -856,20 +856,20 @@ To change the standard component messages or any text, specify the language you
856
856
  const element = document.querySelector('face-liveness');
857
857
 
858
858
  element.settings = {
859
- locale: 'en'
859
+ locale: 'en',
860
860
  };
861
861
 
862
862
  element.translations = {
863
- en: {
864
- selfieTime: 'Get Selfie',
865
- },
863
+ en: {
864
+ selfieTime: 'Get Selfie',
865
+ },
866
866
  };
867
867
  ```
868
868
 
869
869
  The list of labels used in the component:
870
870
 
871
- | Label | Default message in `en` locale |
872
- |:------------------------------|:----------------------------------------------------------------------------------------------------|
871
+ | Label | Default message in `en` locale | |
872
+ | :---------------------------- | :-------------------------------------------------------------------------------------------------- | ------------------------------- |
873
873
  | **showOnlyOneFace** | Make sure there is only one face on the screen. | `face-liveness`, `face-capture` |
874
874
  | **preparingCamera** | Preparing the camera... | `face-liveness`, `face-capture` |
875
875
  | **allowAccessCamera** | Allow access to the camera | `face-liveness`, `face-capture` |
@@ -901,12 +901,12 @@ The list of labels used in the component:
901
901
  | **noCameraPermission** | Camera unavailable! | `face-liveness`, `face-capture` |
902
902
  | **goButton** | Go | `face-liveness`, `face-capture` |
903
903
  | **selfieTime** | Selfie time! | `face-liveness`, `face-capture` |
904
- | **ambientLighting** | Ambient lighting is not too bright or too dark and there are no shadows or glare on your face | `face-liveness` |
905
- | **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear | `face-liveness` |
906
- | **turnHead** | Turn your head a bit | `face-liveness` |
907
- | **centerFaceTurnHead** | Center your face, turn your head | `face-liveness` |
908
- | **centerFace** | Center your face | `face-capture` |
909
- | **errorCode** | Error code: | `face-liveness` |
904
+ | **ambientLighting** | Ambient lighting is not too bright or too dark and there are no shadows or glare on your face | `face-liveness` |
905
+ | **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear | `face-liveness` |
906
+ | **turnHead** | Turn your head a bit | `face-liveness` |
907
+ | **centerFaceTurnHead** | Center your face, turn your head | `face-liveness` |
908
+ | **centerFace** | Center your face | `face-capture` |
909
+ | **errorCode** | Error code: | `face-liveness` |
910
910
  | **illumination** | Good illumination. | `face-liveness`, `face-capture` |
911
911
  | **cameraLevel** | Camera at eye level. | `face-liveness`, `face-capture` |
912
912
  | **noAccessories** | No accessories: glasses, mask, hat, etc. | `face-liveness`, `face-capture` |
@@ -917,6 +917,7 @@ The list of labels used in the component:
917
917
  | **turnHeadDown** | Turn head down a bit to look straight | `face-liveness`, `face-capture` |
918
918
  | **turnHeadLeft** | Turn head left a bit to look straight | `face-liveness`, `face-capture` |
919
919
  | **turnHeadRight** | Turn head right a bit to look straight | `face-liveness`, `face-capture` |
920
+ | **makeFaceFullyVisible** | Remove anything covering your face | `face-liveness`, `face-capture` |
920
921
 
921
922
  ## Examples
922
923
 
package/dist/index.d.ts CHANGED
@@ -22,9 +22,11 @@ export declare type ComputedCss = {
22
22
  successScreenImage?: string;
23
23
  retryScreenEnvironmentImage?: string;
24
24
  retryScreenPersonImage?: string;
25
- retryScreenFaceQualityImage?: string;
26
- retryScreenCleanCamera?: string;
27
- retryScreenChangeBackground?: string;
25
+ faceQualityScreenMainImage?: string;
26
+ faceQualityScreenCleanCameraImage?: string;
27
+ faceQualityScreenIlluminationImage?: string;
28
+ faceQualityScreenAccessoriesImage?: string;
29
+ faceQualityScreenChangeBackgroundImage?: string;
28
30
  tooMuchTurn?: string;
29
31
  };
30
32
 
@@ -64,6 +66,8 @@ export declare const ErrorTypes: {
64
66
  readonly HTTP_NOT_SUPPORTED: "HTTP_NOT_SUPPORTED";
65
67
  readonly WEBSERVICE_NOT_COMPATIBLE: "WEBSERVICE_NOT_COMPATIBLE";
66
68
  readonly CANCELLED: "CANCELLED";
69
+ readonly BAD_FACE_QUALITY: "BAD_FACE_QUALITY";
70
+ readonly BAD_FRAME_SIZE: "BAD_FRAME_SIZE";
67
71
  };
68
72
 
69
73
  export declare type ErrorTypes = (typeof ErrorTypes)[keyof typeof ErrorTypes];
@@ -212,9 +216,13 @@ export declare interface IFaceLiveness extends IFaceDetection {
212
216
  'device-orientation'?: boolean;
213
217
  }
214
218
 
215
- 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';
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';
216
220
 
217
- declare type Languages = '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';
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
+
223
+ declare type Languages = LocalCodes | LanguageCodes;
224
+
225
+ 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';
218
226
 
219
227
  export declare type Locales = Languages | string;
220
228