@regulaforensics/vp-frontend-face-components 8.3.2251-nightly → 8.3.2253-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 +83 -152
- package/dist/index.d.ts +5 -13
- package/dist/main.iife.js +12 -14
- package/dist/main.js +264 -454
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
- [Settings](#settings)
|
|
9
9
|
- [Customization](#customization)
|
|
10
10
|
- [Package Resources](#package-resources)
|
|
11
|
-
- [Security](#security)
|
|
12
11
|
- [Events](#events)
|
|
13
12
|
- [Response](#response)
|
|
14
13
|
- [Custom Translations](#custom-translations)
|
|
@@ -16,6 +15,8 @@
|
|
|
16
15
|
- [Licensing](#licensing)
|
|
17
16
|
- [Additional Resources](#additional-resources)
|
|
18
17
|
|
|
18
|
+
---
|
|
19
|
+
|
|
19
20
|
## Overview
|
|
20
21
|
|
|
21
22
|
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>.
|
|
@@ -34,12 +35,11 @@ Important notes:
|
|
|
34
35
|
- The Face SDK Web Components and their methods strictly require secure contexts, so using the **HTTPS** protocol is a must.
|
|
35
36
|
- 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.
|
|
36
37
|
- 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,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,23 +207,24 @@ 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
|
-
| `nonce` |
|
|
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` |
|
|
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` |
|
|
213
214
|
| `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |
|
|
214
|
-
| `livenessType` | You can choose a scenario for the
|
|
215
|
+
| `livenessType` | You can choose a scenario for the liveness assessment. `0` - active liveness, full process that requires head rotation; `1` - passive liveness, a person is asked to only take a selfie, no head rotation required. | `number` | `0` | `0`, `1` | `face-liveness` |
|
|
215
216
|
| `detectOcclusion` | Whether to disable face occlusion hint. | `boolean` | `true` | `true`, `false` | `face-capture` |
|
|
216
217
|
| `tenant` | A label used to group transactions by specific customers, applications, or other criteria. | `string` | `undefined` | tenant | `face-liveness` |
|
|
217
218
|
| `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `face-liveness` |
|
|
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.
|
|
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` |
|
|
220
|
+
|
|
219
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,71 +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
|
-
## 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.
|
|
481
416
|
|
|
482
417
|
## Events
|
|
483
418
|
|
|
@@ -486,7 +421,7 @@ You can subscribe to the component events.
|
|
|
486
421
|
For example:
|
|
487
422
|
|
|
488
423
|
```javascript
|
|
489
|
-
const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
|
|
424
|
+
const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0];
|
|
490
425
|
const faceCaptureComponent = document.getElementsByTagName('face-capture')[0];
|
|
491
426
|
|
|
492
427
|
faceLivenessComponent.addEventListener('face-liveness', (event) => console.log(event.detail)); // event listener for face-liveness component
|
|
@@ -505,18 +440,18 @@ The generated event object (`event.detail`) contains three fields that describe
|
|
|
505
440
|
}
|
|
506
441
|
```
|
|
507
442
|
|
|
508
|
-
### Type of
|
|
443
|
+
### Type of actions
|
|
509
444
|
|
|
510
|
-
| Type of action |
|
|
511
|
-
|
|
512
|
-
| `ELEMENT_VISIBLE` |
|
|
513
|
-
| `PRESS_START_BUTTON` |
|
|
514
|
-
| `PRESS_RETRY_BUTTON` |
|
|
515
|
-
| `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` |
|
|
516
451
|
| `PROCESSING_REQUEST` | The component is sending data to the backend. | `face-liveness` |
|
|
517
|
-
| `PROCESS_FINISHED` |
|
|
518
|
-
| `SERVICE_INITIALIZED` |
|
|
519
|
-
| `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` |
|
|
520
455
|
|
|
521
456
|
In cases of successful operation of the components, the `data` field will contain the following fields:
|
|
522
457
|
|
|
@@ -539,7 +474,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
539
474
|
### Table of event causes
|
|
540
475
|
|
|
541
476
|
| Reason | Description of the reason |
|
|
542
|
-
|
|
477
|
+
|:----------------------------|:--------------------------------------------------------------------------------------------------------|
|
|
543
478
|
| `WASM_ERROR` | Error in WASM. |
|
|
544
479
|
| `UNKNOWN_ERROR` | Unknown error. |
|
|
545
480
|
| `NOT_SUPPORTED` | The browser is not supported. |
|
|
@@ -556,8 +491,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
556
491
|
| `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
|
|
557
492
|
| `WEBSERVICE_NOT_COMPATIBLE` | The web service and component versions are incompatible. |
|
|
558
493
|
| `HTTP_NOT_SUPPORTED` | The web component does not work over the HTTP protocol, use HTTPS instead. |
|
|
559
|
-
| `CANCELLED` | The user has clicked the Close button.
|
|
560
|
-
| `BAD_FACE_QUALITY` | The facial image quality is too low. |
|
|
494
|
+
| `CANCELLED` | The user has clicked the Close button. |
|
|
561
495
|
|
|
562
496
|
### Cases of event generation
|
|
563
497
|
|
|
@@ -580,7 +514,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
580
514
|
|
|
581
515
|
```javascript
|
|
582
516
|
{
|
|
583
|
-
action: "ELEMENT_VISIBLE",
|
|
517
|
+
action: "ELEMENT_VISIBLE",
|
|
584
518
|
data: null
|
|
585
519
|
}
|
|
586
520
|
```
|
|
@@ -593,7 +527,7 @@ For example:
|
|
|
593
527
|
|
|
594
528
|
```html
|
|
595
529
|
<div id="add-event-listener-to-this-element">
|
|
596
|
-
|
|
530
|
+
<face-liveness></face-liveness>
|
|
597
531
|
</div>
|
|
598
532
|
```
|
|
599
533
|
|
|
@@ -609,7 +543,7 @@ For example:
|
|
|
609
543
|
|
|
610
544
|
```javascript
|
|
611
545
|
{
|
|
612
|
-
action: "PRESS_START_BUTTON",
|
|
546
|
+
action: "PRESS_START_BUTTON",
|
|
613
547
|
data: null
|
|
614
548
|
}
|
|
615
549
|
```
|
|
@@ -627,7 +561,7 @@ For example:
|
|
|
627
561
|
|
|
628
562
|
```javascript
|
|
629
563
|
{
|
|
630
|
-
action: "PRESS_RETRY_BUTTON",
|
|
564
|
+
action: "PRESS_RETRY_BUTTON",
|
|
631
565
|
data: null
|
|
632
566
|
}
|
|
633
567
|
```
|
|
@@ -645,7 +579,7 @@ For example:
|
|
|
645
579
|
|
|
646
580
|
```javascript
|
|
647
581
|
{
|
|
648
|
-
action: "CLOSE",
|
|
582
|
+
action: "CLOSE",
|
|
649
583
|
data: {
|
|
650
584
|
reason: "CANCELLED",
|
|
651
585
|
status: 0
|
|
@@ -666,7 +600,7 @@ For example:
|
|
|
666
600
|
|
|
667
601
|
```javascript
|
|
668
602
|
{
|
|
669
|
-
action: "CLOSE",
|
|
603
|
+
action: "CLOSE",
|
|
670
604
|
data: {
|
|
671
605
|
reason: "CANCELLED",
|
|
672
606
|
status: 0
|
|
@@ -687,7 +621,7 @@ For example:
|
|
|
687
621
|
|
|
688
622
|
```javascript
|
|
689
623
|
{
|
|
690
|
-
action: "CLOSE",
|
|
624
|
+
action: "CLOSE",
|
|
691
625
|
data: {
|
|
692
626
|
reason: "CANCELLED",
|
|
693
627
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -709,7 +643,7 @@ For example:
|
|
|
709
643
|
|
|
710
644
|
```javascript
|
|
711
645
|
{
|
|
712
|
-
action: "PROCESS_FINISHED",
|
|
646
|
+
action: "PROCESS_FINISHED",
|
|
713
647
|
data: {
|
|
714
648
|
response: { ... },
|
|
715
649
|
status: 1
|
|
@@ -730,7 +664,7 @@ For example:
|
|
|
730
664
|
|
|
731
665
|
```javascript
|
|
732
666
|
{
|
|
733
|
-
action: "PROCESS_FINISHED",
|
|
667
|
+
action: "PROCESS_FINISHED",
|
|
734
668
|
data: {
|
|
735
669
|
reason: "An event has occurred",
|
|
736
670
|
status: 0
|
|
@@ -751,7 +685,7 @@ For example:
|
|
|
751
685
|
|
|
752
686
|
```javascript
|
|
753
687
|
{
|
|
754
|
-
action: "PROCESS_FINISHED",
|
|
688
|
+
action: "PROCESS_FINISHED",
|
|
755
689
|
data: {
|
|
756
690
|
reason: "An event has occurred",
|
|
757
691
|
status: 0
|
|
@@ -772,7 +706,7 @@ For example:
|
|
|
772
706
|
|
|
773
707
|
```javascript
|
|
774
708
|
{
|
|
775
|
-
action: "PROCESS_FINISHED",
|
|
709
|
+
action: "PROCESS_FINISHED",
|
|
776
710
|
data: {
|
|
777
711
|
reason: "An event has occurred",
|
|
778
712
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -794,7 +728,7 @@ For example:
|
|
|
794
728
|
|
|
795
729
|
```javascript
|
|
796
730
|
{
|
|
797
|
-
action: "PROCESS_FINISHED",
|
|
731
|
+
action: "PROCESS_FINISHED",
|
|
798
732
|
data: {
|
|
799
733
|
reason: "TIMEOUT_ERROR",
|
|
800
734
|
status: 0
|
|
@@ -815,7 +749,7 @@ For example:
|
|
|
815
749
|
|
|
816
750
|
```javascript
|
|
817
751
|
{
|
|
818
|
-
action: "PROCESS_FINISHED",
|
|
752
|
+
action: "PROCESS_FINISHED",
|
|
819
753
|
data: {
|
|
820
754
|
reason: "TIMEOUT_ERROR",
|
|
821
755
|
transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
|
@@ -896,19 +830,19 @@ The `face-liveness` response has the following structure:
|
|
|
896
830
|
[key: string]: any
|
|
897
831
|
};
|
|
898
832
|
tag: string
|
|
899
|
-
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.
|
|
900
834
|
estimatedAge: number | null // approximate age with an accuracy of +/-3 years
|
|
901
835
|
transactionId: string
|
|
902
836
|
type: number // liveness type: 0 - active, 1 - passive
|
|
903
|
-
images: string[] // array with the final image in base64
|
|
837
|
+
images: string[] // array with the final image in base64
|
|
904
838
|
}
|
|
905
|
-
|
|
839
|
+
````
|
|
906
840
|
|
|
907
841
|
The `face-capture` response has the following structure:
|
|
908
842
|
|
|
909
843
|
```javascript
|
|
910
844
|
{
|
|
911
|
-
capture: string[] // array with the final image in base64
|
|
845
|
+
capture: string[] // array with the final image in base64
|
|
912
846
|
}
|
|
913
847
|
```
|
|
914
848
|
|
|
@@ -922,20 +856,20 @@ To change the standard component messages or any text, specify the language you
|
|
|
922
856
|
const element = document.querySelector('face-liveness');
|
|
923
857
|
|
|
924
858
|
element.settings = {
|
|
925
|
-
locale: 'en'
|
|
859
|
+
locale: 'en'
|
|
926
860
|
};
|
|
927
861
|
|
|
928
862
|
element.translations = {
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
863
|
+
en: {
|
|
864
|
+
selfieTime: 'Get Selfie',
|
|
865
|
+
},
|
|
932
866
|
};
|
|
933
867
|
```
|
|
934
868
|
|
|
935
869
|
The list of labels used in the component:
|
|
936
870
|
|
|
937
|
-
| Label | Default message in `en` locale |
|
|
938
|
-
|
|
871
|
+
| Label | Default message in `en` locale |
|
|
872
|
+
|:------------------------------|:----------------------------------------------------------------------------------------------------|
|
|
939
873
|
| **showOnlyOneFace** | Make sure there is only one face on the screen. | `face-liveness`, `face-capture` |
|
|
940
874
|
| **preparingCamera** | Preparing the camera... | `face-liveness`, `face-capture` |
|
|
941
875
|
| **allowAccessCamera** | Allow access to the camera | `face-liveness`, `face-capture` |
|
|
@@ -967,12 +901,12 @@ The list of labels used in the component:
|
|
|
967
901
|
| **noCameraPermission** | Camera unavailable! | `face-liveness`, `face-capture` |
|
|
968
902
|
| **goButton** | Go | `face-liveness`, `face-capture` |
|
|
969
903
|
| **selfieTime** | Selfie time! | `face-liveness`, `face-capture` |
|
|
970
|
-
| **ambientLighting** | Ambient lighting is not too bright or too dark and there are no shadows or glare on your face |
|
|
971
|
-
| **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear |
|
|
972
|
-
| **turnHead** | Turn your head a bit |
|
|
973
|
-
| **centerFaceTurnHead** | Center your face, turn your head |
|
|
974
|
-
| **centerFace** | Center your face |
|
|
975
|
-
| **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` |
|
|
976
910
|
| **illumination** | Good illumination. | `face-liveness`, `face-capture` |
|
|
977
911
|
| **cameraLevel** | Camera at eye level. | `face-liveness`, `face-capture` |
|
|
978
912
|
| **noAccessories** | No accessories: glasses, mask, hat, etc. | `face-liveness`, `face-capture` |
|
|
@@ -983,9 +917,6 @@ The list of labels used in the component:
|
|
|
983
917
|
| **turnHeadDown** | Turn head down a bit to look straight | `face-liveness`, `face-capture` |
|
|
984
918
|
| **turnHeadLeft** | Turn head left a bit to look straight | `face-liveness`, `face-capture` |
|
|
985
919
|
| **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` |
|
|
989
920
|
|
|
990
921
|
## Examples
|
|
991
922
|
|
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];
|
|
@@ -216,13 +212,9 @@ export declare interface IFaceLiveness extends IFaceDetection {
|
|
|
216
212
|
'device-orientation'?: boolean;
|
|
217
213
|
}
|
|
218
214
|
|
|
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'
|
|
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
|
|