@regulaforensics/vp-frontend-face-components 8.3.2231-nightly → 8.3.2232-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.
- package/README.md +77 -77
- package/dist/index.d.ts +4 -12
- package/dist/main.iife.js +11 -13
- package/dist/main.js +858 -929
- 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,7 +60,6 @@ Run the following command:
|
|
|
60
60
|
```
|
|
61
61
|
npm init
|
|
62
62
|
```
|
|
63
|
-
|
|
64
63
|
Answer the questions in the command line questionnaire.
|
|
65
64
|
|
|
66
65
|
Install `@regulaforensics/vp-frontend-face-components`:
|
|
@@ -87,14 +86,14 @@ For example:
|
|
|
87
86
|
```html
|
|
88
87
|
<!DOCTYPE html>
|
|
89
88
|
<html>
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
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>
|
|
98
97
|
</html>
|
|
99
98
|
```
|
|
100
99
|
|
|
@@ -120,7 +119,7 @@ Note that `settings` must be applied **after** the component has been added to t
|
|
|
120
119
|
|
|
121
120
|
An example of using all the settings:
|
|
122
121
|
|
|
123
|
-
|
|
122
|
+
````javascript
|
|
124
123
|
const component = document.getElementsByTagName('face-liveness')[0];
|
|
125
124
|
|
|
126
125
|
component.settings = {
|
|
@@ -133,7 +132,7 @@ component.settings = {
|
|
|
133
132
|
finishScreen: true,
|
|
134
133
|
url: 'https://your-server.com',
|
|
135
134
|
headers: {
|
|
136
|
-
Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
|
|
135
|
+
Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
|
|
137
136
|
},
|
|
138
137
|
tag: 'sessionIdValue',
|
|
139
138
|
tenant: 'ABCDEF',
|
|
@@ -165,35 +164,37 @@ component.settings = {
|
|
|
165
164
|
retryScreenEnvironmentImage: 'https://path-to-image.com',
|
|
166
165
|
retryScreenPersonImage: 'data:image/svg+xml;base64,PHN2...',
|
|
167
166
|
successScreenImage: importedImage,
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
|
|
167
|
+
}
|
|
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
|
-
|
|
191
|
+
|
|
192
|
+
````
|
|
192
193
|
|
|
193
194
|
Here are all the available settings:
|
|
194
195
|
|
|
195
196
|
| Setting | Info | Data type | Default value | Values | Used in |
|
|
196
|
-
|
|
197
|
+
|:--------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|---------------------------------|
|
|
197
198
|
| `locale` | Language of the component. The value is determined based on the following priority:<br><br>1. `locale` component attribute takes the highest priority if explicitly set.<br>2. If `locale` is not set, the system checks the `html.lang` attribute.<br>3. If no `html.lang` attribute is available, the system attempts to determine the language from `window.navigator`.<br>4. If none of the above are available, the default value `en` is used. | `string` | `en` | `ru`, `en`, `de`, `pl`, `it`, `hu`, `zh`, `sk`, `uk`, `fr`, `es`, `pt`, `ar`, `nl`, `id`, `vi`, `ko`, `ms`, `ro`, `el`, `tr`, `ja`, `cs`, `th`, `hi`, `bn`, `he`, `fi`, `sv`, `da`, `hr`, `no`, `uz` | `face-liveness`, `face-capture` |
|
|
198
199
|
| `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
|
|
199
200
|
| `copyright` | Whether to show the Regula copyright footer. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
|
|
@@ -206,7 +207,7 @@ Here are all the available settings:
|
|
|
206
207
|
| `tag` | The server generates a unique identifier for each session before starting a verification process. Using `tag`, you can set a custom value. Make sure that `tag` is unique for each session. | `string` | `undefined` | any unique for each session | `face-liveness` |
|
|
207
208
|
| `retryCount` | Using the `retryCount` setter, you can set the number of liveness transaction attempts for the user. Once the attempts are exhausted, the component will display a white screen and throw the "RETRY_COUNTER_EXCEEDED" event. By default, the number of attempts is unlimited. Setting the value to **0** removes the limit on the number of attempts, while any positive number limits the attempts. | `number` | `undefined` | number of the attempts count | `face-liveness` |
|
|
208
209
|
| `headers` | Before starting the camera capture, the component sends a `start` request to the server and receives the initialization data in response. Once the component successfully completes two stages of verification, it sends the received data to the API for processing. You can use the `headers` setter to set the headers for the HTTP POST method. Additionally, the video recording is transmitted to the server along with these `headers`. | `object` | `undefined` | object with headers (key, value). | `face-liveness` |
|
|
209
|
-
| `customization` | You can customize the element's color, font, and image by using this object. See the [Customization](#customization) section
|
|
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` |
|
|
210
211
|
| `nonce` | You can set a unique nonce value to maintain the CSP policy. | `string` | `undefined` | unique nonce value | `face-liveness`, `face-capture` |
|
|
211
212
|
| `rotationAngle` | Desktop only. By using the `rotationAngle` setter, you can specify an angle to compensate for the rotation of your physical camera. When set to values of `90` and `-90`, the component's design will switch to a mobile (vertical) orientation. | `number` | `undefined` | `0`,`180`,`90`,`-90` | `face-liveness`, `face-capture` |
|
|
212
213
|
| `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` |
|
|
@@ -217,12 +218,13 @@ Here are all the available settings:
|
|
|
217
218
|
| `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `face-liveness` |
|
|
218
219
|
| `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` |
|
|
219
220
|
|
|
221
|
+
|
|
220
222
|
## Customization
|
|
221
223
|
|
|
222
224
|
You can customize the color of some elements, fonts, and images with the help of the `customization` field in the `settings` object. The customization settings are the following:
|
|
223
225
|
|
|
224
226
|
| Setting | Info | Migrate from | Data type | Default value |
|
|
225
|
-
|
|
227
|
+
|:---------------------------------------------|:------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|
|
|
226
228
|
| `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |
|
|
227
229
|
| `fontSize` | Base font size. | `--font-size` | string | `16px` |
|
|
228
230
|
| `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |
|
|
@@ -246,16 +248,13 @@ You can customize the color of some elements, fonts, and images with the help of
|
|
|
246
248
|
| `retryScreenRetryButtonTitle` | Retry screen button text color. | | string | `#FFFFFF` |
|
|
247
249
|
| `retryScreenRetryButtonTitleHover` | Retry screen button text hover color. | | string | `#FFFFFF` |
|
|
248
250
|
| `successScreenImage` | Success screen image. | | base64 or url or imported image | `` |
|
|
249
|
-
|
|
250
|
-
|
|
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 | `` |
|
|
251
|
+
|
|
252
|
+
|
|
254
253
|
|
|
255
254
|
For example:
|
|
256
255
|
|
|
257
256
|
```javascript
|
|
258
|
-
const component = document.getElementsByTagName('face-liveness')[0];
|
|
257
|
+
const component = document.getElementsByTagName('face-liveness')[0];
|
|
259
258
|
|
|
260
259
|
component.settings = {
|
|
261
260
|
...otherSettings,
|
|
@@ -265,8 +264,9 @@ component.settings = {
|
|
|
265
264
|
onboardingScreenStartButtonBackground: '#7E57C5',
|
|
266
265
|
onboardingScreenStartButtonBackgroundHover: '#7c45b4',
|
|
267
266
|
retryScreenPersonImage: 'data:image/svg+xml;base64,PHN2...',
|
|
268
|
-
}
|
|
269
|
-
}
|
|
267
|
+
}
|
|
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
|
-
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,6 +413,7 @@ 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
|
+
|
|
416
417
|
## Events
|
|
417
418
|
|
|
418
419
|
You can subscribe to the component events.
|
|
@@ -420,7 +421,7 @@ You can subscribe to the component events.
|
|
|
420
421
|
For example:
|
|
421
422
|
|
|
422
423
|
```javascript
|
|
423
|
-
const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
|
|
424
|
+
const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
|
|
424
425
|
const faceCaptureComponent = document.getElementsByTagName('face-capture')[0];
|
|
425
426
|
|
|
426
427
|
faceLivenessComponent.addEventListener('face-liveness', (event) => console.log(event.detail)); // event listener for face-liveness component
|
|
@@ -441,16 +442,16 @@ The generated event object (`event.detail`) contains three fields that describe
|
|
|
441
442
|
|
|
442
443
|
### Type of actions
|
|
443
444
|
|
|
444
|
-
| Type of action |
|
|
445
|
-
|
|
446
|
-
| `ELEMENT_VISIBLE` |
|
|
447
|
-
| `PRESS_START_BUTTON` |
|
|
448
|
-
| `PRESS_RETRY_BUTTON` |
|
|
449
|
-
| `CLOSE` |
|
|
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` |
|
|
450
451
|
| `PROCESSING_REQUEST` | The component is sending data to the backend. | `face-liveness` |
|
|
451
|
-
| `PROCESS_FINISHED` |
|
|
452
|
-
| `SERVICE_INITIALIZED` |
|
|
453
|
-
| `RETRY_COUNTER_EXCEEDED` | The component has finished its work due to the exceeded number of transaction attempts. |
|
|
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` |
|
|
454
455
|
|
|
455
456
|
In cases of successful operation of the components, the `data` field will contain the following fields:
|
|
456
457
|
|
|
@@ -473,7 +474,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
473
474
|
### Table of event causes
|
|
474
475
|
|
|
475
476
|
| Reason | Description of the reason |
|
|
476
|
-
|
|
477
|
+
|:----------------------------|:--------------------------------------------------------------------------------------------------------|
|
|
477
478
|
| `WASM_ERROR` | Error in WASM. |
|
|
478
479
|
| `UNKNOWN_ERROR` | Unknown error. |
|
|
479
480
|
| `NOT_SUPPORTED` | The browser is not supported. |
|
|
@@ -490,8 +491,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
490
491
|
| `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
|
|
491
492
|
| `WEBSERVICE_NOT_COMPATIBLE` | The web service and component versions are incompatible. |
|
|
492
493
|
| `HTTP_NOT_SUPPORTED` | The web component does not work over the HTTP protocol, use HTTPS instead. |
|
|
493
|
-
| `CANCELLED` | The user has clicked the Close button.
|
|
494
|
-
| `BAD_FACE_QUALITY` | The facial image quality is too low. |
|
|
494
|
+
| `CANCELLED` | The user has clicked the Close button. |
|
|
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
|
-
|
|
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
|
-
|
|
864
|
-
|
|
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 |
|
|
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: |
|
|
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` |
|
package/dist/index.d.ts
CHANGED
|
@@ -22,11 +22,9 @@ export declare type ComputedCss = {
|
|
|
22
22
|
successScreenImage?: string;
|
|
23
23
|
retryScreenEnvironmentImage?: string;
|
|
24
24
|
retryScreenPersonImage?: string;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
faceQualityScreenAccessoriesImage?: string;
|
|
29
|
-
faceQualityScreenChangeBackgroundImage?: string;
|
|
25
|
+
retryScreenFaceQualityImage?: string;
|
|
26
|
+
retryScreenCleanCamera?: string;
|
|
27
|
+
retryScreenChangeBackground?: string;
|
|
30
28
|
tooMuchTurn?: string;
|
|
31
29
|
};
|
|
32
30
|
|
|
@@ -66,8 +64,6 @@ export declare const ErrorTypes: {
|
|
|
66
64
|
readonly HTTP_NOT_SUPPORTED: "HTTP_NOT_SUPPORTED";
|
|
67
65
|
readonly WEBSERVICE_NOT_COMPATIBLE: "WEBSERVICE_NOT_COMPATIBLE";
|
|
68
66
|
readonly CANCELLED: "CANCELLED";
|
|
69
|
-
readonly BAD_FACE_QUALITY: "BAD_FACE_QUALITY";
|
|
70
|
-
readonly BAD_FRAME_SIZE: "BAD_FRAME_SIZE";
|
|
71
67
|
};
|
|
72
68
|
|
|
73
69
|
export declare type ErrorTypes = (typeof ErrorTypes)[keyof typeof ErrorTypes];
|
|
@@ -218,11 +214,7 @@ export declare interface IFaceLiveness extends IFaceDetection {
|
|
|
218
214
|
|
|
219
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';
|
|
220
216
|
|
|
221
|
-
declare type
|
|
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';
|
|
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';
|
|
226
218
|
|
|
227
219
|
export declare type Locales = Languages | string;
|
|
228
220
|
|