@regulaforensics/vp-frontend-face-components 8.3.2218-rc → 8.3.2220-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.
- package/README.md +76 -77
- package/dist/index.d.ts +10 -4
- package/dist/main.iife.js +11 -9
- package/dist/main.js +898 -850
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ Important notes:
|
|
|
39
39
|
## Compatibility
|
|
40
40
|
|
|
41
41
|
| Devices |  |  |  |
|
|
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
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
391
|
-
|
|
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
|
-
|
|
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 |
|
|
446
|
-
|
|
447
|
-
| `ELEMENT_VISIBLE` |
|
|
448
|
-
| `PRESS_START_BUTTON` |
|
|
449
|
-
| `PRESS_RETRY_BUTTON` |
|
|
450
|
-
| `CLOSE` |
|
|
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` |
|
|
453
|
-
| `SERVICE_INITIALIZED` |
|
|
454
|
-
| `RETRY_COUNTER_EXCEEDED` | The component has finished its work due to the exceeded number of transaction attempts. |
|
|
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,7 @@ 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. |
|
|
495
494
|
|
|
496
495
|
### Cases of event generation
|
|
497
496
|
|
|
@@ -514,7 +513,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
514
513
|
|
|
515
514
|
```javascript
|
|
516
515
|
{
|
|
517
|
-
action: "ELEMENT_VISIBLE",
|
|
516
|
+
action: "ELEMENT_VISIBLE",
|
|
518
517
|
data: null
|
|
519
518
|
}
|
|
520
519
|
```
|
|
@@ -527,7 +526,7 @@ For example:
|
|
|
527
526
|
|
|
528
527
|
```html
|
|
529
528
|
<div id="add-event-listener-to-this-element">
|
|
530
|
-
|
|
529
|
+
<face-liveness></face-liveness>
|
|
531
530
|
</div>
|
|
532
531
|
```
|
|
533
532
|
|
|
@@ -543,7 +542,7 @@ For example:
|
|
|
543
542
|
|
|
544
543
|
```javascript
|
|
545
544
|
{
|
|
546
|
-
action: "PRESS_START_BUTTON",
|
|
545
|
+
action: "PRESS_START_BUTTON",
|
|
547
546
|
data: null
|
|
548
547
|
}
|
|
549
548
|
```
|
|
@@ -561,7 +560,7 @@ For example:
|
|
|
561
560
|
|
|
562
561
|
```javascript
|
|
563
562
|
{
|
|
564
|
-
action: "PRESS_RETRY_BUTTON",
|
|
563
|
+
action: "PRESS_RETRY_BUTTON",
|
|
565
564
|
data: null
|
|
566
565
|
}
|
|
567
566
|
```
|
|
@@ -579,7 +578,7 @@ For example:
|
|
|
579
578
|
|
|
580
579
|
```javascript
|
|
581
580
|
{
|
|
582
|
-
action: "CLOSE",
|
|
581
|
+
action: "CLOSE",
|
|
583
582
|
data: {
|
|
584
583
|
reason: "CANCELLED",
|
|
585
584
|
status: 0
|
|
@@ -600,7 +599,7 @@ For example:
|
|
|
600
599
|
|
|
601
600
|
```javascript
|
|
602
601
|
{
|
|
603
|
-
action: "CLOSE",
|
|
602
|
+
action: "CLOSE",
|
|
604
603
|
data: {
|
|
605
604
|
reason: "CANCELLED",
|
|
606
605
|
status: 0
|
|
@@ -621,7 +620,7 @@ For example:
|
|
|
621
620
|
|
|
622
621
|
```javascript
|
|
623
622
|
{
|
|
624
|
-
action: "CLOSE",
|
|
623
|
+
action: "CLOSE",
|
|
625
624
|
data: {
|
|
626
625
|
reason: "CANCELLED",
|
|
627
626
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -643,7 +642,7 @@ For example:
|
|
|
643
642
|
|
|
644
643
|
```javascript
|
|
645
644
|
{
|
|
646
|
-
action: "PROCESS_FINISHED",
|
|
645
|
+
action: "PROCESS_FINISHED",
|
|
647
646
|
data: {
|
|
648
647
|
response: { ... },
|
|
649
648
|
status: 1
|
|
@@ -664,7 +663,7 @@ For example:
|
|
|
664
663
|
|
|
665
664
|
```javascript
|
|
666
665
|
{
|
|
667
|
-
action: "PROCESS_FINISHED",
|
|
666
|
+
action: "PROCESS_FINISHED",
|
|
668
667
|
data: {
|
|
669
668
|
reason: "An event has occurred",
|
|
670
669
|
status: 0
|
|
@@ -685,7 +684,7 @@ For example:
|
|
|
685
684
|
|
|
686
685
|
```javascript
|
|
687
686
|
{
|
|
688
|
-
action: "PROCESS_FINISHED",
|
|
687
|
+
action: "PROCESS_FINISHED",
|
|
689
688
|
data: {
|
|
690
689
|
reason: "An event has occurred",
|
|
691
690
|
status: 0
|
|
@@ -706,7 +705,7 @@ For example:
|
|
|
706
705
|
|
|
707
706
|
```javascript
|
|
708
707
|
{
|
|
709
|
-
action: "PROCESS_FINISHED",
|
|
708
|
+
action: "PROCESS_FINISHED",
|
|
710
709
|
data: {
|
|
711
710
|
reason: "An event has occurred",
|
|
712
711
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -728,7 +727,7 @@ For example:
|
|
|
728
727
|
|
|
729
728
|
```javascript
|
|
730
729
|
{
|
|
731
|
-
action: "PROCESS_FINISHED",
|
|
730
|
+
action: "PROCESS_FINISHED",
|
|
732
731
|
data: {
|
|
733
732
|
reason: "TIMEOUT_ERROR",
|
|
734
733
|
status: 0
|
|
@@ -749,7 +748,7 @@ For example:
|
|
|
749
748
|
|
|
750
749
|
```javascript
|
|
751
750
|
{
|
|
752
|
-
action: "PROCESS_FINISHED",
|
|
751
|
+
action: "PROCESS_FINISHED",
|
|
753
752
|
data: {
|
|
754
753
|
reason: "TIMEOUT_ERROR",
|
|
755
754
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -830,19 +829,19 @@ The `face-liveness` response has the following structure:
|
|
|
830
829
|
[key: string]: any
|
|
831
830
|
};
|
|
832
831
|
tag: string
|
|
833
|
-
status: number // liveness status: 0 if the person's liveness is confirmed, 1 if not.
|
|
832
|
+
status: number // liveness status: 0 if the person's liveness is confirmed, 1 if not.
|
|
834
833
|
estimatedAge: number | null // approximate age with an accuracy of +/-3 years
|
|
835
834
|
transactionId: string
|
|
836
835
|
type: number // liveness type: 0 - active, 1 - passive
|
|
837
|
-
images: string[] // array with the final image in base64
|
|
836
|
+
images: string[] // array with the final image in base64
|
|
838
837
|
}
|
|
839
|
-
|
|
838
|
+
```
|
|
840
839
|
|
|
841
840
|
The `face-capture` response has the following structure:
|
|
842
841
|
|
|
843
842
|
```javascript
|
|
844
843
|
{
|
|
845
|
-
capture: string[] // array with the final image in base64
|
|
844
|
+
capture: string[] // array with the final image in base64
|
|
846
845
|
}
|
|
847
846
|
```
|
|
848
847
|
|
|
@@ -856,20 +855,20 @@ To change the standard component messages or any text, specify the language you
|
|
|
856
855
|
const element = document.querySelector('face-liveness');
|
|
857
856
|
|
|
858
857
|
element.settings = {
|
|
859
|
-
locale: 'en'
|
|
858
|
+
locale: 'en',
|
|
860
859
|
};
|
|
861
860
|
|
|
862
861
|
element.translations = {
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
862
|
+
en: {
|
|
863
|
+
selfieTime: 'Get Selfie',
|
|
864
|
+
},
|
|
866
865
|
};
|
|
867
866
|
```
|
|
868
867
|
|
|
869
868
|
The list of labels used in the component:
|
|
870
869
|
|
|
871
|
-
| Label | Default message in `en` locale |
|
|
872
|
-
|
|
870
|
+
| Label | Default message in `en` locale |
|
|
871
|
+
| :---------------------------- | :-------------------------------------------------------------------------------------------------- | ------------------------------- |
|
|
873
872
|
| **showOnlyOneFace** | Make sure there is only one face on the screen. | `face-liveness`, `face-capture` |
|
|
874
873
|
| **preparingCamera** | Preparing the camera... | `face-liveness`, `face-capture` |
|
|
875
874
|
| **allowAccessCamera** | Allow access to the camera | `face-liveness`, `face-capture` |
|
|
@@ -901,12 +900,12 @@ The list of labels used in the component:
|
|
|
901
900
|
| **noCameraPermission** | Camera unavailable! | `face-liveness`, `face-capture` |
|
|
902
901
|
| **goButton** | Go | `face-liveness`, `face-capture` |
|
|
903
902
|
| **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 |
|
|
905
|
-
| **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear |
|
|
906
|
-
| **turnHead** | Turn your head a bit |
|
|
907
|
-
| **centerFaceTurnHead** | Center your face, turn your head |
|
|
908
|
-
| **centerFace** | Center your face |
|
|
909
|
-
| **errorCode** | Error code: |
|
|
903
|
+
| **ambientLighting** | Ambient lighting is not too bright or too dark and there are no shadows or glare on your face | `face-liveness` |
|
|
904
|
+
| **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear | `face-liveness` |
|
|
905
|
+
| **turnHead** | Turn your head a bit | `face-liveness` |
|
|
906
|
+
| **centerFaceTurnHead** | Center your face, turn your head | `face-liveness` |
|
|
907
|
+
| **centerFace** | Center your face | `face-capture` |
|
|
908
|
+
| **errorCode** | Error code: | `face-liveness` |
|
|
910
909
|
| **illumination** | Good illumination. | `face-liveness`, `face-capture` |
|
|
911
910
|
| **cameraLevel** | Camera at eye level. | `face-liveness`, `face-capture` |
|
|
912
911
|
| **noAccessories** | No accessories: glasses, mask, hat, etc. | `face-liveness`, `face-capture` |
|
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
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
faceQualityScreenMainImage?: string;
|
|
26
|
+
faceQualityScreenCleanCameraImage?: string;
|
|
27
|
+
faceQualityScreenIlluminationImage?: string;
|
|
28
|
+
faceQualityScreenAccessoriesImage?: string;
|
|
29
|
+
faceQualityScreenChangeBackgroundImage?: string;
|
|
28
30
|
tooMuchTurn?: string;
|
|
29
31
|
};
|
|
30
32
|
|
|
@@ -214,7 +216,11 @@ export declare interface IFaceLiveness extends IFaceDetection {
|
|
|
214
216
|
|
|
215
217
|
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';
|
|
216
218
|
|
|
217
|
-
declare type
|
|
219
|
+
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';
|
|
220
|
+
|
|
221
|
+
declare type Languages = LocalCodes | LanguageCodes;
|
|
222
|
+
|
|
223
|
+
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
224
|
|
|
219
225
|
export declare type Locales = Languages | string;
|
|
220
226
|
|