@regulaforensics/vp-frontend-face-components 8.3.2253-rc → 8.3.2254-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 +152 -83
- package/dist/index.d.ts +13 -5
- package/dist/main.iife.js +14 -12
- package/dist/main.js +454 -264
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
- [Settings](#settings)
|
|
9
9
|
- [Customization](#customization)
|
|
10
10
|
- [Package Resources](#package-resources)
|
|
11
|
+
- [Security](#security)
|
|
11
12
|
- [Events](#events)
|
|
12
13
|
- [Response](#response)
|
|
13
14
|
- [Custom Translations](#custom-translations)
|
|
@@ -15,8 +16,6 @@
|
|
|
15
16
|
- [Licensing](#licensing)
|
|
16
17
|
- [Additional Resources](#additional-resources)
|
|
17
18
|
|
|
18
|
-
---
|
|
19
|
-
|
|
20
19
|
## Overview
|
|
21
20
|
|
|
22
21
|
The Face SDK Web Components let you add automatic capture of a user's selfie and liveness check to your web site. The components capture a face from the device camera and can either simply detect a face on the captured photo or confirm the <a href="https://docs.regulaforensics.com/develop/face-sdk/overview/introduction/#liveness-assessment" target="_blank">face liveness</a>.
|
|
@@ -35,11 +34,12 @@ Important notes:
|
|
|
35
34
|
- The Face SDK Web Components and their methods strictly require secure contexts, so using the **HTTPS** protocol is a must.
|
|
36
35
|
- The considered components are registered on the **web page itself**, so make sure to import the library to your website before adding any of the components to the web page code.
|
|
37
36
|
- Only the modern browser versions are supported, see [compatibility](#compatibility). **Polyfills** are not included in the package by default.
|
|
37
|
+
- If your website uses Content Security Policy (CSP), make sure that WebAssembly execution is allowed. For details, see [Security](#security).
|
|
38
38
|
|
|
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
|
+
recordingProcess: 2,
|
|
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,24 +206,23 @@ 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
|
|
211
|
-
| `nonce` |
|
|
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` |
|
|
210
|
+
| `nonce` | A unique nonce value used to maintain a strict Content Security Policy. The value must match the nonce specified in your CSP header. See [Security](#security). | `string` | `undefined` | unique nonce value | `face-liveness`, `face-capture` |
|
|
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` |
|
|
214
213
|
| `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |
|
|
215
|
-
| `livenessType` | You can choose a scenario for the
|
|
214
|
+
| `livenessType` | You can choose a scenario for the Liveness assessment. `0` - active liveness, full process that requires head rotation; `1` - passive liveness, a person is asked to only take a selfie, no head rotation required; `3` - passive liveness with blink, a person is asked to take a selfie and blink, no head rotation required. | `number` | `0` | `0`, `1`, `3` | `face-liveness` |
|
|
216
215
|
| `detectOcclusion` | Whether to disable face occlusion hint. | `boolean` | `true` | `true`, `false` | `face-capture` |
|
|
217
216
|
| `tenant` | A label used to group transactions by specific customers, applications, or other criteria. | `string` | `undefined` | tenant | `face-liveness` |
|
|
218
217
|
| `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `face-liveness` |
|
|
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.
|
|
220
|
-
|
|
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. When `livenessType` is set to `3` (passive liveness with blink), `captureButton` is not supported. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture` |
|
|
221
219
|
|
|
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,6 +413,71 @@ 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
|
+
## Security
|
|
417
|
+
|
|
418
|
+
This section describes security-related requirements and recommendations for using Face SDK Web Components.
|
|
419
|
+
|
|
420
|
+
### Secure Context
|
|
421
|
+
|
|
422
|
+
Face SDK Web Components require a secure browser context. Use **HTTPS** when running the components in production.
|
|
423
|
+
|
|
424
|
+
The components need access to the user's camera, so the browser will request camera permission before starting the capture or liveness process.
|
|
425
|
+
|
|
426
|
+
### Content Security Policy
|
|
427
|
+
|
|
428
|
+
Face SDK Web Components use WebAssembly to run the Face SDK core functionality in the browser. The WebAssembly module contains Regula's C++ code compiled for browser execution and wrapped with a JavaScript layer.
|
|
429
|
+
|
|
430
|
+
Some face detection and liveness operations are executed by the WebAssembly module through a worker process. Because of this, strict Content Security Policy configurations must explicitly allow WebAssembly execution.
|
|
431
|
+
|
|
432
|
+
If your website uses CSP, include one of the following source expressions in the `script-src` directive:
|
|
433
|
+
|
|
434
|
+
```http
|
|
435
|
+
Content-Security-Policy: script-src 'self' 'wasm-unsafe-eval';
|
|
436
|
+
```
|
|
437
|
+
|
|
438
|
+
If `wasm-unsafe-eval` is not supported by your target browsers, use `unsafe-eval` instead:
|
|
439
|
+
|
|
440
|
+
```http
|
|
441
|
+
Content-Security-Policy: script-src 'self' 'unsafe-eval';
|
|
442
|
+
```
|
|
443
|
+
|
|
444
|
+
This requirement is expected and is related to WebAssembly execution in the browser. It does not mean that the component runs untrusted code or evaluates arbitrary customer-provided scripts.
|
|
445
|
+
|
|
446
|
+
### CSP Nonce
|
|
447
|
+
|
|
448
|
+
To maintain a strict CSP configuration for scripts, you can use the `nonce` setting.
|
|
449
|
+
|
|
450
|
+
For example:
|
|
451
|
+
|
|
452
|
+
```javascript
|
|
453
|
+
const component = document.querySelector('face-liveness');
|
|
454
|
+
|
|
455
|
+
component.settings = {
|
|
456
|
+
nonce: '<YOUR_NONCE_VALUE>',
|
|
457
|
+
};
|
|
458
|
+
```
|
|
459
|
+
|
|
460
|
+
The nonce value must match the nonce specified in your CSP header.
|
|
461
|
+
|
|
462
|
+
For details about the `nonce` setting, see [Settings](#settings).
|
|
463
|
+
|
|
464
|
+
### Package Resources
|
|
465
|
+
|
|
466
|
+
Face SDK Web Components load package resources required for WebAssembly execution:
|
|
467
|
+
|
|
468
|
+
- `Liveness.worker.js`
|
|
469
|
+
- `Liveness.wasm`
|
|
470
|
+
- `Liveness.data`
|
|
471
|
+
|
|
472
|
+
By default, these files are downloaded from Regula servers. If your CSP restricts external resources, make sure that the source of these files is allowed by your policy.
|
|
473
|
+
|
|
474
|
+
Alternatively, you can host these files on your own domain and configure `workerPath`. For details, see [Package Resources](#package-resources).
|
|
475
|
+
|
|
476
|
+
### Backend Connection
|
|
477
|
+
|
|
478
|
+
The `face-liveness` component communicates with the Face SDK Web Service using the URL specified in the `url` setting.
|
|
479
|
+
|
|
480
|
+
For production deployments, use HTTPS and protect access to the Web Service according to your security requirements, for example by using authentication on a proxy server.
|
|
416
481
|
|
|
417
482
|
## Events
|
|
418
483
|
|
|
@@ -421,7 +486,7 @@ You can subscribe to the component events.
|
|
|
421
486
|
For example:
|
|
422
487
|
|
|
423
488
|
```javascript
|
|
424
|
-
const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
|
|
489
|
+
const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
|
|
425
490
|
const faceCaptureComponent = document.getElementsByTagName('face-capture')[0];
|
|
426
491
|
|
|
427
492
|
faceLivenessComponent.addEventListener('face-liveness', (event) => console.log(event.detail)); // event listener for face-liveness component
|
|
@@ -440,18 +505,18 @@ The generated event object (`event.detail`) contains three fields that describe
|
|
|
440
505
|
}
|
|
441
506
|
```
|
|
442
507
|
|
|
443
|
-
### Type of
|
|
508
|
+
### Type of action
|
|
444
509
|
|
|
445
|
-
| Type of action |
|
|
446
|
-
|
|
447
|
-
| `ELEMENT_VISIBLE` |
|
|
448
|
-
| `PRESS_START_BUTTON` |
|
|
449
|
-
| `PRESS_RETRY_BUTTON` |
|
|
450
|
-
| `CLOSE` |
|
|
510
|
+
| Type of action | Description of the action | The component |
|
|
511
|
+
| :----------------------- | :-------------------------------------------------------------------------------------- | :------------------------------ |
|
|
512
|
+
| `ELEMENT_VISIBLE` | The component is appended in the DOM. | `face-liveness`, `face-capture` |
|
|
513
|
+
| `PRESS_START_BUTTON` | The "Get started" button is pressed. | `face-liveness`, `face-capture` |
|
|
514
|
+
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `face-liveness`, `face-capture` |
|
|
515
|
+
| `CLOSE` | The "Close" button is pressed. | `face-liveness`, `face-capture` |
|
|
451
516
|
| `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. |
|
|
517
|
+
| `PROCESS_FINISHED` | The component has finished its work. | `face-liveness`, `face-capture` |
|
|
518
|
+
| `SERVICE_INITIALIZED` | The component has started its work. | `face-liveness`, `face-capture` |
|
|
519
|
+
| `RETRY_COUNTER_EXCEEDED` | The component has finished its work due to the exceeded number of transaction attempts. | `face-liveness` |
|
|
455
520
|
|
|
456
521
|
In cases of successful operation of the components, the `data` field will contain the following fields:
|
|
457
522
|
|
|
@@ -474,7 +539,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
474
539
|
### Table of event causes
|
|
475
540
|
|
|
476
541
|
| Reason | Description of the reason |
|
|
477
|
-
|
|
542
|
+
| :-------------------------- | :------------------------------------------------------------------------------------------------------ |
|
|
478
543
|
| `WASM_ERROR` | Error in WASM. |
|
|
479
544
|
| `UNKNOWN_ERROR` | Unknown error. |
|
|
480
545
|
| `NOT_SUPPORTED` | The browser is not supported. |
|
|
@@ -491,7 +556,8 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
491
556
|
| `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
|
|
492
557
|
| `WEBSERVICE_NOT_COMPATIBLE` | The web service and component versions are incompatible. |
|
|
493
558
|
| `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.
|
|
559
|
+
| `CANCELLED` | The user has clicked the Close button. |
|
|
560
|
+
| `BAD_FACE_QUALITY` | The facial image quality is too low. |
|
|
495
561
|
|
|
496
562
|
### Cases of event generation
|
|
497
563
|
|
|
@@ -514,7 +580,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
514
580
|
|
|
515
581
|
```javascript
|
|
516
582
|
{
|
|
517
|
-
action: "ELEMENT_VISIBLE",
|
|
583
|
+
action: "ELEMENT_VISIBLE",
|
|
518
584
|
data: null
|
|
519
585
|
}
|
|
520
586
|
```
|
|
@@ -527,7 +593,7 @@ For example:
|
|
|
527
593
|
|
|
528
594
|
```html
|
|
529
595
|
<div id="add-event-listener-to-this-element">
|
|
530
|
-
|
|
596
|
+
<face-liveness></face-liveness>
|
|
531
597
|
</div>
|
|
532
598
|
```
|
|
533
599
|
|
|
@@ -543,7 +609,7 @@ For example:
|
|
|
543
609
|
|
|
544
610
|
```javascript
|
|
545
611
|
{
|
|
546
|
-
action: "PRESS_START_BUTTON",
|
|
612
|
+
action: "PRESS_START_BUTTON",
|
|
547
613
|
data: null
|
|
548
614
|
}
|
|
549
615
|
```
|
|
@@ -561,7 +627,7 @@ For example:
|
|
|
561
627
|
|
|
562
628
|
```javascript
|
|
563
629
|
{
|
|
564
|
-
action: "PRESS_RETRY_BUTTON",
|
|
630
|
+
action: "PRESS_RETRY_BUTTON",
|
|
565
631
|
data: null
|
|
566
632
|
}
|
|
567
633
|
```
|
|
@@ -579,7 +645,7 @@ For example:
|
|
|
579
645
|
|
|
580
646
|
```javascript
|
|
581
647
|
{
|
|
582
|
-
action: "CLOSE",
|
|
648
|
+
action: "CLOSE",
|
|
583
649
|
data: {
|
|
584
650
|
reason: "CANCELLED",
|
|
585
651
|
status: 0
|
|
@@ -600,7 +666,7 @@ For example:
|
|
|
600
666
|
|
|
601
667
|
```javascript
|
|
602
668
|
{
|
|
603
|
-
action: "CLOSE",
|
|
669
|
+
action: "CLOSE",
|
|
604
670
|
data: {
|
|
605
671
|
reason: "CANCELLED",
|
|
606
672
|
status: 0
|
|
@@ -621,7 +687,7 @@ For example:
|
|
|
621
687
|
|
|
622
688
|
```javascript
|
|
623
689
|
{
|
|
624
|
-
action: "CLOSE",
|
|
690
|
+
action: "CLOSE",
|
|
625
691
|
data: {
|
|
626
692
|
reason: "CANCELLED",
|
|
627
693
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -643,7 +709,7 @@ For example:
|
|
|
643
709
|
|
|
644
710
|
```javascript
|
|
645
711
|
{
|
|
646
|
-
action: "PROCESS_FINISHED",
|
|
712
|
+
action: "PROCESS_FINISHED",
|
|
647
713
|
data: {
|
|
648
714
|
response: { ... },
|
|
649
715
|
status: 1
|
|
@@ -664,7 +730,7 @@ For example:
|
|
|
664
730
|
|
|
665
731
|
```javascript
|
|
666
732
|
{
|
|
667
|
-
action: "PROCESS_FINISHED",
|
|
733
|
+
action: "PROCESS_FINISHED",
|
|
668
734
|
data: {
|
|
669
735
|
reason: "An event has occurred",
|
|
670
736
|
status: 0
|
|
@@ -685,7 +751,7 @@ For example:
|
|
|
685
751
|
|
|
686
752
|
```javascript
|
|
687
753
|
{
|
|
688
|
-
action: "PROCESS_FINISHED",
|
|
754
|
+
action: "PROCESS_FINISHED",
|
|
689
755
|
data: {
|
|
690
756
|
reason: "An event has occurred",
|
|
691
757
|
status: 0
|
|
@@ -706,7 +772,7 @@ For example:
|
|
|
706
772
|
|
|
707
773
|
```javascript
|
|
708
774
|
{
|
|
709
|
-
action: "PROCESS_FINISHED",
|
|
775
|
+
action: "PROCESS_FINISHED",
|
|
710
776
|
data: {
|
|
711
777
|
reason: "An event has occurred",
|
|
712
778
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -728,7 +794,7 @@ For example:
|
|
|
728
794
|
|
|
729
795
|
```javascript
|
|
730
796
|
{
|
|
731
|
-
action: "PROCESS_FINISHED",
|
|
797
|
+
action: "PROCESS_FINISHED",
|
|
732
798
|
data: {
|
|
733
799
|
reason: "TIMEOUT_ERROR",
|
|
734
800
|
status: 0
|
|
@@ -749,7 +815,7 @@ For example:
|
|
|
749
815
|
|
|
750
816
|
```javascript
|
|
751
817
|
{
|
|
752
|
-
action: "PROCESS_FINISHED",
|
|
818
|
+
action: "PROCESS_FINISHED",
|
|
753
819
|
data: {
|
|
754
820
|
reason: "TIMEOUT_ERROR",
|
|
755
821
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -830,19 +896,19 @@ The `face-liveness` response has the following structure:
|
|
|
830
896
|
[key: string]: any
|
|
831
897
|
};
|
|
832
898
|
tag: string
|
|
833
|
-
status: number // liveness status: 0 if the person's liveness is confirmed, 1 if not.
|
|
899
|
+
status: number // liveness status: 0 if the person's liveness is confirmed, 1 if not.
|
|
834
900
|
estimatedAge: number | null // approximate age with an accuracy of +/-3 years
|
|
835
901
|
transactionId: string
|
|
836
902
|
type: number // liveness type: 0 - active, 1 - passive
|
|
837
|
-
images: string[] // array with the final image in base64
|
|
903
|
+
images: string[] // array with the final image in base64
|
|
838
904
|
}
|
|
839
|
-
|
|
905
|
+
```
|
|
840
906
|
|
|
841
907
|
The `face-capture` response has the following structure:
|
|
842
908
|
|
|
843
909
|
```javascript
|
|
844
910
|
{
|
|
845
|
-
capture: string[] // array with the final image in base64
|
|
911
|
+
capture: string[] // array with the final image in base64
|
|
846
912
|
}
|
|
847
913
|
```
|
|
848
914
|
|
|
@@ -856,20 +922,20 @@ To change the standard component messages or any text, specify the language you
|
|
|
856
922
|
const element = document.querySelector('face-liveness');
|
|
857
923
|
|
|
858
924
|
element.settings = {
|
|
859
|
-
locale: 'en'
|
|
925
|
+
locale: 'en',
|
|
860
926
|
};
|
|
861
927
|
|
|
862
928
|
element.translations = {
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
929
|
+
en: {
|
|
930
|
+
selfieTime: 'Get Selfie',
|
|
931
|
+
},
|
|
866
932
|
};
|
|
867
933
|
```
|
|
868
934
|
|
|
869
935
|
The list of labels used in the component:
|
|
870
936
|
|
|
871
|
-
| Label | Default message in `en` locale |
|
|
872
|
-
|
|
937
|
+
| Label | Default message in `en` locale | |
|
|
938
|
+
| :---------------------------- | :-------------------------------------------------------------------------------------------------- | ------------------------------- |
|
|
873
939
|
| **showOnlyOneFace** | Make sure there is only one face on the screen. | `face-liveness`, `face-capture` |
|
|
874
940
|
| **preparingCamera** | Preparing the camera... | `face-liveness`, `face-capture` |
|
|
875
941
|
| **allowAccessCamera** | Allow access to the camera | `face-liveness`, `face-capture` |
|
|
@@ -901,12 +967,12 @@ The list of labels used in the component:
|
|
|
901
967
|
| **noCameraPermission** | Camera unavailable! | `face-liveness`, `face-capture` |
|
|
902
968
|
| **goButton** | Go | `face-liveness`, `face-capture` |
|
|
903
969
|
| **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: |
|
|
970
|
+
| **ambientLighting** | Ambient lighting is not too bright or too dark and there are no shadows or glare on your face | `face-liveness` |
|
|
971
|
+
| **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear | `face-liveness` |
|
|
972
|
+
| **turnHead** | Turn your head a bit | `face-liveness` |
|
|
973
|
+
| **centerFaceTurnHead** | Center your face, turn your head | `face-liveness` |
|
|
974
|
+
| **centerFace** | Center your face | `face-capture` |
|
|
975
|
+
| **errorCode** | Error code: | `face-liveness` |
|
|
910
976
|
| **illumination** | Good illumination. | `face-liveness`, `face-capture` |
|
|
911
977
|
| **cameraLevel** | Camera at eye level. | `face-liveness`, `face-capture` |
|
|
912
978
|
| **noAccessories** | No accessories: glasses, mask, hat, etc. | `face-liveness`, `face-capture` |
|
|
@@ -917,6 +983,9 @@ The list of labels used in the component:
|
|
|
917
983
|
| **turnHeadDown** | Turn head down a bit to look straight | `face-liveness`, `face-capture` |
|
|
918
984
|
| **turnHeadLeft** | Turn head left a bit to look straight | `face-liveness`, `face-capture` |
|
|
919
985
|
| **turnHeadRight** | Turn head right a bit to look straight | `face-liveness`, `face-capture` |
|
|
986
|
+
| **makeFaceFullyVisible** | Remove anything covering your face | `face-liveness`, `face-capture` |
|
|
987
|
+
| **done** | Accessibility label for the success screen image when verification is completed. | `face-liveness`, `face-capture` |
|
|
988
|
+
| **close** | Accessibility label for the close button in the component header. | `face-liveness`, `face-capture` |
|
|
920
989
|
|
|
921
990
|
## Examples
|
|
922
991
|
|
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
|
|
|
@@ -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' | 'done' | 'close';
|
|
216
220
|
|
|
217
|
-
declare type
|
|
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
|
|