@regulaforensics/vp-frontend-face-components 3.0.1 → 3.1.0
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 +78 -99
- package/dist/main.js +1 -1
- package/lib/index.d.ts +17 -6
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Face SDK Web Components
|
|
2
2
|
|
|
3
3
|
- [Overview](#overview)
|
|
4
|
-
- [Before
|
|
4
|
+
- [Before You Start](#before-you-start)
|
|
5
5
|
- [Compatibility](#compatibility)
|
|
6
6
|
- [Install via NPM](#install-via-npm)
|
|
7
7
|
- [Install via CDN](#install-via-cdn)
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
- [Customization](#customization)
|
|
10
10
|
- [Events](#events)
|
|
11
11
|
- [Response](#response)
|
|
12
|
-
- [Attributes](#attributes)
|
|
13
12
|
- [Custom translations](#custom-translations)
|
|
14
13
|
- [Examples](#examples)
|
|
15
14
|
- [Additional resources](#additional-resources)
|
|
@@ -18,22 +17,23 @@
|
|
|
18
17
|
|
|
19
18
|
## Overview
|
|
20
19
|
|
|
21
|
-
The Face SDK
|
|
20
|
+
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 face <a href="https://docs.regulaforensics.com/develop/overview/#liveness-detection" target="_blank">liveness</a>.
|
|
22
21
|
|
|
23
|
-
The available components are:
|
|
22
|
+
The available components are the following:
|
|
24
23
|
|
|
25
24
|
- `face-capture`
|
|
26
25
|
- `face-liveness`
|
|
27
26
|
|
|
28
|
-
The
|
|
27
|
+
The Web Components are based on WebAssembly (.wasm module), which is our core C++ code compiled for use in browsers and wrapped with a JS layer. It is exactly the same code as built for all the other platform SDK packages.
|
|
29
28
|
|
|
30
|
-
## Before
|
|
29
|
+
## Before You Start
|
|
31
30
|
|
|
32
|
-
|
|
31
|
+
Important notes:
|
|
32
|
+
|
|
33
|
+
- The Face SDK Web Components and their methods strictly require secure contexts, so using the **HTTPS** protocol is a must.
|
|
34
|
+
- 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.
|
|
35
|
+
- Only the modern browser versions are supported, see [compatibility](#compatibility). **Polyfills** are not included in the package by default.
|
|
33
36
|
|
|
34
|
-
- The components work **only** under the HTTPS protocol on the web site.
|
|
35
|
-
- The components library does register the components on the web page itself, so make sure to import the library to your web site before adding the components to the web page code.
|
|
36
|
-
- We do not include polyfills for older browsers in the package. If you need to support older versions of browsers in your project, you can simply install the necessary package. For example https://www.npmjs.com/package/@webcomponents/webcomponentsjs
|
|
37
37
|
## Compatibility
|
|
38
38
|
|
|
39
39
|
| Devices |  |  |  |
|
|
@@ -42,6 +42,9 @@ Please note that:
|
|
|
42
42
|
| **Mobile (Android)** | 69 | 63 | - |
|
|
43
43
|
| **Desktop** | 66 | 69 | 11 |
|
|
44
44
|
|
|
45
|
+
To support the older browser versions in your project, install the required polyfill packages manually.
|
|
46
|
+
Follow the link to an npm package <a href="https://www.npmjs.com/package/@webcomponents/webcomponentsjs" target="_blank">@webcomponents/webcomponentsjs</a> for installation details.
|
|
47
|
+
|
|
45
48
|
## Install via NPM
|
|
46
49
|
|
|
47
50
|
On the command line, navigate to the root directory of your project:
|
|
@@ -106,9 +109,11 @@ Add the name of the component to the html, as in the example above.
|
|
|
106
109
|
|
|
107
110
|
## Settings
|
|
108
111
|
|
|
109
|
-
|
|
112
|
+
Note that we have removed the `videoRecording` setting. Now you should use `recordingProcess` instead.
|
|
113
|
+
|
|
114
|
+
You can set any parameter using `settings`. Find below examples of applying all the settings at once as well as using just some of them.
|
|
110
115
|
|
|
111
|
-
|
|
116
|
+
An example of using all the settings:
|
|
112
117
|
|
|
113
118
|
````javascript
|
|
114
119
|
const component = document.getElementsByTagName('face-liveness')[0];
|
|
@@ -121,13 +126,13 @@ component.settings = {
|
|
|
121
126
|
startScreen: true,
|
|
122
127
|
closeDisabled: true,
|
|
123
128
|
finishScreen: true,
|
|
124
|
-
videoRecording: true,
|
|
125
129
|
url: 'https://your-server.com',
|
|
126
130
|
headers: {
|
|
127
131
|
Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
|
|
128
132
|
},
|
|
129
133
|
tag: 'sessionIdValue',
|
|
130
134
|
retryCount: 5,
|
|
135
|
+
recordingProcess: 1,
|
|
131
136
|
customization: {
|
|
132
137
|
fontFamily: 'Noto Sans, sans-serif',
|
|
133
138
|
fontSize: '16px',
|
|
@@ -156,7 +161,7 @@ component.settings = {
|
|
|
156
161
|
|
|
157
162
|
````
|
|
158
163
|
|
|
159
|
-
|
|
164
|
+
An example of using just the selected settings:
|
|
160
165
|
|
|
161
166
|
````javascript
|
|
162
167
|
const yourSettings = {
|
|
@@ -181,51 +186,55 @@ component.settings = yourSettings;
|
|
|
181
186
|
Here are all the available settings:
|
|
182
187
|
|
|
183
188
|
|
|
184
|
-
| Setting
|
|
185
|
-
|
|
186
|
-
| `locale`
|
|
187
|
-
| `url`
|
|
188
|
-
| `copyright`
|
|
189
|
-
| `cameraId`
|
|
190
|
-
| `changeCamera`
|
|
191
|
-
| `startScreen`
|
|
192
|
-
| `finishScreen`
|
|
193
|
-
| `closeDisabled`
|
|
194
|
-
| `
|
|
195
|
-
| `tag`
|
|
196
|
-
| `retryCount`
|
|
197
|
-
| `headers`
|
|
198
|
-
| `customization`
|
|
199
|
-
| `nonce`
|
|
189
|
+
| Setting | Info | Data type | Default value | Values | Used in |
|
|
190
|
+
|:-------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|-----------------------------------|
|
|
191
|
+
| `locale` | Language of the component. | `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` | `face-liveness`, `face-capture` |
|
|
192
|
+
| `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
|
|
193
|
+
| `copyright` | Whether to show the Regula copyright footer. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture` |
|
|
194
|
+
| `cameraId` | Ability to select a camera by defining the camera ID. | `string` | `undefined` | `camera id string value` | `face-liveness`, `face-capture` |
|
|
195
|
+
| `changeCamera` | Whether to show the "Camera Switch" button. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
|
|
196
|
+
| `startScreen` | Whether to show the Start screen with video instructions. If `true`, the start screen is shown. If `false`, no start screen is shown and instead the camera of the device is turned on automatically to capture a face. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
|
|
197
|
+
| `finishScreen` | Whether to show the Result screen (`success screen`, `retry-screen`). If `true`, the Result screen is shown to the user. If `false`, no Result screen is displayed, and, during a single session, **the user has only one attempt to pass liveness assessment**. <br><br>In cases where `finishScreen` is set to `false`, we recommend to monitor [Events](#events) associated with the liveness assessment and then display relevant information to the user based on those events. This approach ensures that the user receives necessary feedback even though the Result screen is not displayed by the component itself. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
|
|
198
|
+
| `closeDisabled` | Whether to disable the "Close" button of the component. If set to `true`, the "Close" button is hidden from the user. | `boolean` | `false` | `true`, `false` | `face-liveness`, `face-capture` |
|
|
199
|
+
| `recordingProcess` | Whether to enable a video recording of the process. If set to `0`, the video is sent to the server with an additional request. If set to `1`, the video is sent to the server with the liveness package. If set to `2`, the video isn't sent. The video format depends on the browser: MP4 for Safari, WEB for other browsers. | `number` | `0` | `0`, `1`, `2` | `face-liveness` |
|
|
200
|
+
| `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` |
|
|
201
|
+
| `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` | `-1` | number of the attempts count | `face-liveness` |
|
|
202
|
+
| `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` |
|
|
203
|
+
| `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` |
|
|
204
|
+
| `nonce` | You can set a unique nonce value to maintain the CSP policy. | `string` | `undefined` | unique nonce value | `face-liveness`, `face-capture` |
|
|
205
|
+
| `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` |
|
|
206
|
+
| `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` |
|
|
207
|
+
| `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |
|
|
208
|
+
|
|
200
209
|
|
|
201
210
|
## Customization
|
|
202
211
|
|
|
203
|
-
You can customize
|
|
212
|
+
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:
|
|
204
213
|
|
|
205
214
|
| Setting | Info | Migrate from | Data type | Default value |
|
|
206
215
|
|:---------------------------------------------|:-----------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|
|
|
207
|
-
| `fontFamily` |
|
|
208
|
-
| `fontSize` |
|
|
209
|
-
| `onboardingScreenStartButtonBackground` |
|
|
210
|
-
| `onboardingScreenStartButtonBackgroundHover` |
|
|
211
|
-
| `onboardingScreenStartButtonTitle` |
|
|
212
|
-
| `onboardingScreenStartButtonTitleHover` |
|
|
213
|
-
| `onboardingScreenIllumination` |
|
|
214
|
-
| `onboardingScreenAccessories` |
|
|
215
|
-
| `onboardingScreenCameraLevel` |
|
|
216
|
-
| `cameraScreenFrontHintLabelBackground` |
|
|
217
|
-
| `cameraScreenFrontHintLabelText` |
|
|
218
|
-
| `cameraScreenSectorActive` |
|
|
219
|
-
| `cameraScreenSectorTarget` |
|
|
220
|
-
| `cameraScreenStrokeNormal` |
|
|
221
|
-
| `processingScreenProgress` |
|
|
222
|
-
| `retryScreenEnvironmentImage` |
|
|
223
|
-
| `retryScreenPersonImage` |
|
|
224
|
-
| `retryScreenRetryButtonBackground` |
|
|
225
|
-
| `retryScreenRetryButtonBackgroundHover` |
|
|
226
|
-
| `retryScreenRetryButtonTitle` |
|
|
227
|
-
| `retryScreenRetryButtonTitleHover` |
|
|
228
|
-
| `successScreenImage` |
|
|
216
|
+
| `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |
|
|
217
|
+
| `fontSize` | Base font size. | `--font-size` | string | `16px` |
|
|
218
|
+
| `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |
|
|
219
|
+
| `onboardingScreenStartButtonBackgroundHover` | Instruction screen button background hover color. | `--hover-color` | string | `#7C45B4` |
|
|
220
|
+
| `onboardingScreenStartButtonTitle` | Instruction screen button text color. | | string | `#FFFFFF` |
|
|
221
|
+
| `onboardingScreenStartButtonTitleHover` | Instruction screen button text hover color. | | string | `#FFFFFF` |
|
|
222
|
+
| `onboardingScreenIllumination` | Instruction screen "Illumination" icon image. | | base64 or url or imported image | `` |
|
|
223
|
+
| `onboardingScreenAccessories` | Instruction screen "No accessories" icon image. | | base64 or url or imported image | `` |
|
|
224
|
+
| `onboardingScreenCameraLevel` | Instruction screen "Camera level" icon image. | | base64 or url or imported image | `` |
|
|
225
|
+
| `cameraScreenFrontHintLabelBackground` | Сamera screen plate with info message background color. | `--plate-color` | string | `#E8E8E8` |
|
|
226
|
+
| `cameraScreenFrontHintLabelText` | Сamera screen plate with info message text color. | | string | `#000000` |
|
|
227
|
+
| `cameraScreenSectorActive` | User progress sector color (available only in face-liveness component). | | string | `#7E57C5` |
|
|
228
|
+
| `cameraScreenSectorTarget` | Target sector color (available only in face-liveness component). | `--target-sector-color` | string | `#BEABE2` |
|
|
229
|
+
| `cameraScreenStrokeNormal` | Stroke color of the camera circle. | | string | `#7E57C5` |
|
|
230
|
+
| `processingScreenProgress` | Processing screen spinner color. | | string | `#7E57C5` |
|
|
231
|
+
| `retryScreenEnvironmentImage` | Retry screen environment image. | | base64 or url or imported image | `` |
|
|
232
|
+
| `retryScreenPersonImage` | Retry screen person image. | | base64 or url or imported image | `` |
|
|
233
|
+
| `retryScreenRetryButtonBackground` | Retry screen button background color. | `--main-color` | string | `#7E57C5` |
|
|
234
|
+
| `retryScreenRetryButtonBackgroundHover` | Retry screen button background hover color. | `--hover-color` | string | `#7C45B4` |
|
|
235
|
+
| `retryScreenRetryButtonTitle` | Retry screen button text color. | | string | `#FFFFFF` |
|
|
236
|
+
| `retryScreenRetryButtonTitleHover` | Retry screen button text hover color. | | string | `#FFFFFF` |
|
|
237
|
+
| `successScreenImage` | Success screen image. | | base64 or url or imported image | `` |
|
|
229
238
|
|
|
230
239
|
For example:
|
|
231
240
|
|
|
@@ -275,7 +284,7 @@ The generated event object (`event.detail`) contains three fields that describe
|
|
|
275
284
|
Type of actions:
|
|
276
285
|
|
|
277
286
|
| Type of action | Description of the action | The component |
|
|
278
|
-
|
|
287
|
+
|:-------------------------|:---------------------------------------------------------------------------------------|:-------------------------------|
|
|
279
288
|
| `ELEMENT_VISIBLE` | The component is appended in the DOM. | `face-liveness`, `face-capture` |
|
|
280
289
|
| `PRESS_START_BUTTON` | The "Get started" button is pressed. | `face-liveness`, `face-capture` |
|
|
281
290
|
| `PRESS_RETRY_BUTTON` | The "Retry" button is pressed. | `face-liveness`, `face-capture` |
|
|
@@ -305,20 +314,21 @@ In cases of unsuccessful work, the `data` field will contain the following field
|
|
|
305
314
|
Table of event causes:
|
|
306
315
|
|
|
307
316
|
| Reason | Description of the reason |
|
|
308
|
-
|
|
317
|
+
|:----------------------------|:-------------------------------------------------------------------------------------------------------|
|
|
309
318
|
| `WASM_ERROR` | Error in WASM. |
|
|
310
319
|
| `UNKNOWN_ERROR` | Unknown error. |
|
|
311
320
|
| `NOT_SUPPORTED` | The browser is not supported. |
|
|
312
321
|
| `CAMERA_UNKNOWN_ERROR` | Unknown camera error. |
|
|
313
322
|
| `CAMERA_PERMISSION_DENIED` | Access to the camera is prohibited. |
|
|
314
323
|
| `NO_CAMERA` | There is no camera. |
|
|
324
|
+
| `INCORRECT_CAMERA_ID` | There is no camera available. |
|
|
315
325
|
| `CONNECTION_ERROR` | Connection errors. |
|
|
316
326
|
| `LANDSCAPE_MODE_RESTRICTED` | Work in landscape orientation is prohibited. |
|
|
317
327
|
| `TIMEOUT_ERROR` | Transaction failed due to timeout. |
|
|
318
328
|
| `CHANGE_CAMERA` | The user has changed the camera. Return to start-screen or restart service if start-screen is disabled. |
|
|
319
329
|
| `DEVICE_ROTATE` | The user has rotated the device. Return to start-screen or restart service if start-screen is disabled. |
|
|
320
|
-
| `APP_INACTIVE` |
|
|
321
|
-
| `INCORRECT_CAMERA_ID` |
|
|
330
|
+
| `APP_INACTIVE` | The user has closed the tab or browser during the face capture process. |
|
|
331
|
+
| `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
|
|
322
332
|
|
|
323
333
|
The table below describes the cases of event generation:
|
|
324
334
|
|
|
@@ -580,44 +590,19 @@ The `face-capture` response has the following structure:
|
|
|
580
590
|
}
|
|
581
591
|
```
|
|
582
592
|
|
|
583
|
-
## Attributes
|
|
584
|
-
|
|
585
|
-
**Warning**. Passing parameters via attributes is deprecated. In future versions, support will be discontinued. Please use the settings.
|
|
586
|
-
|
|
587
|
-
### face-capture
|
|
588
|
-
|
|
589
|
-
| Attribute | Info | Data type | Default value | Values |
|
|
590
|
-
|:-------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:-------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
591
|
-
| **locale** | The language of the component. | 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` |
|
|
592
|
-
| **copyright** | Whether to show the Regula copyright footer. | boolean | `false` | `true`, `false` |
|
|
593
|
-
| **camera-id** | Ability to select a camera. | string | `undefined` | `camera id string value` |
|
|
594
|
-
| **change-camera** | Whether to show the camera switch button. | boolean | `true` | `true`, `false` |
|
|
595
|
-
| **start-screen** | Whether to show the start screen with video instructions. If `true`, the start screen is shown. If `false`, no start screen is shown and instead the camera of the device is turned on automatically to capture the face. | boolean | `true` | `true`, `false` |
|
|
596
|
-
| **finish-screen** | Whether to show the finish screen (`success screen`, `retry-screen`). If `true`, the finish screen is shown. If `false`, no finish screen will be displayed, and **the user will only have one attempt to pass the liveness check**. | boolean | `true` | `true`, `false` |
|
|
597
|
-
| **close-disabled** | Whether to disable the "Close" button of the component. If set to `true`, the "Close" button is hidden from the user. | boolean | `false` | `true`, `false` |
|
|
598
|
-
|
|
599
|
-
### face-liveness
|
|
600
|
-
|
|
601
|
-
| Attribute | Info | Data type | Default value | Values |
|
|
602
|
-
|:--------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
603
|
-
| **locale** | The language of the component. | 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` |
|
|
604
|
-
| **url** | The backend URL. | string | `https://faceapi.regulaforensics.com/` | any url |
|
|
605
|
-
| **copyright** | Whether to show the Regula copyright footer. | boolean | `false` | `true`, `false` |
|
|
606
|
-
| **camera-id** | The ability to select a camera by defining the camera ID. | string | `undefined` | `camera id string value` |
|
|
607
|
-
| **change-camera** | Whether to show the camera switch button. | boolean | `true` | `true`, `false` |
|
|
608
|
-
| **start-screen** | Whether to show the start screen with video instruction. If `true`, the start screen is shown. If `false`, no start screen is shown and instead the camera of the device is turned on automatically to capture the face. | boolean | `true` | `true`, `false` |
|
|
609
|
-
| **finish-screen** | Whether to show the finish screen (`success screen`, `retry-screen`). If `true`, the finish screen is shown. If `false`, no finish screen will be displayed, and **the user will only have one attempt to pass the liveness check**. | boolean | `true` | `true`, `false` |
|
|
610
|
-
| **close-disabled** | Whether to disable the "Close" button of the component. If set to `true`, the "Close" button is hidden from the user. | boolean | `false` | `true`, `false` |
|
|
611
|
-
| **video-recording** | Whether to enable the video recording of the process. If set to `true`, the video is sent to the server. The video format depends on the browser: MP4 for Safari, WEB for other browsers. | boolean | `false` | `true`, `false` |
|
|
612
|
-
|
|
613
|
-
|
|
614
593
|
## Custom translations
|
|
615
594
|
|
|
616
|
-
To change the standard component messages or any text, specify the language you are using (or add your own) and the label you want to change (you can see the list of available languages in the [
|
|
595
|
+
To change the standard component messages or any text, specify the language you are using (or add your own) and the label you want to change (you can see the list of available languages in the [settings](#settings) section, the `locale` setting):
|
|
596
|
+
|
|
597
|
+
**Note**. To see the changes, don't forget to set the language you changed to the `locale` setting:
|
|
617
598
|
|
|
618
599
|
```javascript
|
|
619
600
|
const element = document.querySelector('face-liveness');
|
|
620
601
|
|
|
602
|
+
element.settings = {
|
|
603
|
+
locale: 'en'
|
|
604
|
+
};
|
|
605
|
+
|
|
621
606
|
element.translations = {
|
|
622
607
|
en: {
|
|
623
608
|
selfieTime: 'Get Selfie',
|
|
@@ -625,16 +610,10 @@ element.translations = {
|
|
|
625
610
|
};
|
|
626
611
|
```
|
|
627
612
|
|
|
628
|
-
**Note**. To see the changes, don't forget to set the language you changed to the `locale` attribute:
|
|
629
|
-
|
|
630
|
-
```html
|
|
631
|
-
<face-liveness locale="en"></face-liveness>
|
|
632
|
-
```
|
|
633
|
-
|
|
634
613
|
The list of labels used in the component:
|
|
635
614
|
|
|
636
|
-
| Label | Default message in `en` locale |
|
|
637
|
-
|
|
615
|
+
| Label | Default message in `en` locale |
|
|
616
|
+
|:------------------------------|:----------------------------------------------------------------------------------------------------|
|
|
638
617
|
| **showOnlyOneFace** | Make sure there is only one face on the screen. | `face-liveness`, `face-capture` |
|
|
639
618
|
| **preparingCamera** | Preparing the camera... | `face-liveness`, `face-capture` |
|
|
640
619
|
| **allowAccessCamera** | Allow access to the camera | `face-liveness`, `face-capture` |
|
|
@@ -680,6 +659,6 @@ The list of labels used in the component:
|
|
|
680
659
|
|
|
681
660
|
You can find examples of using the components on the <a href="https://github.com/regulaforensics/face-web-components-samples" target="_blank">Samples page</a>.
|
|
682
661
|
|
|
683
|
-
## Additional
|
|
662
|
+
## Additional Resources
|
|
684
663
|
|
|
685
|
-
The Face SDK
|
|
664
|
+
The Face SDK Web Components are also available on <a href="https://storybook-face.regulaforensics.com/" target="_blank">Storybook</a>.
|