@getyoti/react-face-capture 2.5.0 → 2.6.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/CHANGELOG.md +102 -0
- package/README.md +67 -48
- package/index.d.ts +24 -0
- package/index.js +7 -7
- package/index.js.LICENSE.txt +36 -36
- package/package.json +1 -1
- package/vanilla/index.js +10 -10
- package/vanilla/index.js.LICENSE.txt +1 -1
- package/vanilla/index.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,107 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## v2.6.0
|
|
4
|
+
|
|
5
|
+
### New features
|
|
6
|
+
|
|
7
|
+
#### Theming
|
|
8
|
+
|
|
9
|
+
- Improved theming capabilities:
|
|
10
|
+
- General theming capabilities have been added through CSS variables:
|
|
11
|
+
- `--fcm-background-color` Sets the background color.
|
|
12
|
+
- `--fcm-background-color-variant1` Variant 1 of the background color.
|
|
13
|
+
- `--fcm-background-color-variant2` Variant 2 of the background color.
|
|
14
|
+
- `--fcm-background-color-contrast` Color used for contrast elements like separators or the dialog scrollbar.
|
|
15
|
+
- `--fcm-button-color` Color used for the buttons.
|
|
16
|
+
- `--fcm-button-color-hover` Color used for the buttons when hovered.
|
|
17
|
+
- `--fcm-button-color-press` Color used for the buttons when pressed.
|
|
18
|
+
- `--fcm-text-color-primary` Color used for the primary text.
|
|
19
|
+
- `--fcm-text-color-secondary` Color used for the secondary text.
|
|
20
|
+
- `--fcm-font-family` Sets the font family.
|
|
21
|
+
- Previous css variables to style the FCM have been deprecated, they are still applied but will get removed in future versions.
|
|
22
|
+
- `--fcm-primary-button-background-color`
|
|
23
|
+
- `--fcm-primary-button-background-color-hover`
|
|
24
|
+
- `--fcm-primary-button-text-color`
|
|
25
|
+
- `--fcm-secondary-button-background-color`
|
|
26
|
+
- `--fcm-secondary-button-text-color`
|
|
27
|
+
- `--fcm-secondary-button-text-color-hover`
|
|
28
|
+
- `--fcm-prompt-text-color`
|
|
29
|
+
- `--fcm-prompt-background-color`
|
|
30
|
+
- More extensive theming solutions are also possible. Contact with Yoti for more information about this.
|
|
31
|
+
|
|
32
|
+
#### UI/UX
|
|
33
|
+
|
|
34
|
+
- Improved accuracy of certain error states representation
|
|
35
|
+
- Replaced a misleading `Please connect to the Internet` screen with a `Sorry, there was a problem while loading` one which better describes the nature of the encountered error
|
|
36
|
+
- Improved help dialog UI
|
|
37
|
+
- Added border-radius to images.
|
|
38
|
+
- Centered video.
|
|
39
|
+
- Improved Area Mode face detection method making the face capture process easier.
|
|
40
|
+
- Added new user feedback to Area Mode face detection:
|
|
41
|
+
- "Move your face lower"
|
|
42
|
+
- "Move your face higher"
|
|
43
|
+
- Added a new message to the loading view to better represent the state of the FCM.
|
|
44
|
+
- "Running security checks"
|
|
45
|
+
- The `Processing your photo` screen is now displayed for at least 1.5 seconds after capturing the image to avoid flash-like effects.
|
|
46
|
+
|
|
47
|
+
#### Others
|
|
48
|
+
|
|
49
|
+
- Added a new property `luminosityCheckLevel`, allowing integrators to adjust the strictness of luminosity
|
|
50
|
+
validation with more flexible configuration options. Note: This feature is designed for retail terminals
|
|
51
|
+
and unsuitable for online user's face capture.
|
|
52
|
+
- Added a 20-second timeout to avoid long wait times when the network connection is poor or unavailable.
|
|
53
|
+
|
|
54
|
+
### Fixes
|
|
55
|
+
|
|
56
|
+
- Fixed bug causing the Face overlay to be out of position when specific CSS was applied to the FCM.
|
|
57
|
+
- Fixed an issue where the module layout would break when rotating an iPad.
|
|
58
|
+
- Fixed an overlapping issue for some loading screens.
|
|
59
|
+
- Fixed an issue where integrators could set an invalid `numStableFrames` value for non-secure requests.
|
|
60
|
+
|
|
61
|
+
### Notices
|
|
62
|
+
|
|
63
|
+
- Localisation has been revised. The following languages have been updated:
|
|
64
|
+
- ar-XN
|
|
65
|
+
- bg-BG
|
|
66
|
+
- cs-CZ
|
|
67
|
+
- es-ES
|
|
68
|
+
- fa-IR
|
|
69
|
+
- fi-FI
|
|
70
|
+
- fr-FR
|
|
71
|
+
- he-IL
|
|
72
|
+
- hi-IN
|
|
73
|
+
- hu-HU
|
|
74
|
+
- hy-AM
|
|
75
|
+
- id-ID
|
|
76
|
+
- ja-JP
|
|
77
|
+
- ko-KR
|
|
78
|
+
- lv-LV
|
|
79
|
+
- ms-MY
|
|
80
|
+
- nb-NO
|
|
81
|
+
- pl-PL
|
|
82
|
+
- ro-RO
|
|
83
|
+
- ru-RU
|
|
84
|
+
- sk-SK
|
|
85
|
+
- sv-SE
|
|
86
|
+
- th-TH
|
|
87
|
+
- tl-PH
|
|
88
|
+
- tr-TR
|
|
89
|
+
- uk-UA
|
|
90
|
+
- vi-VN
|
|
91
|
+
- zh-CN
|
|
92
|
+
|
|
93
|
+
## v2.5.1
|
|
94
|
+
|
|
95
|
+
### New features
|
|
96
|
+
|
|
97
|
+
- Made the `FaceCapture` component load faster.
|
|
98
|
+
- The time reduction is most noticeable on devices that were particularly slow
|
|
99
|
+
in previous versions.
|
|
100
|
+
|
|
101
|
+
### Fixes
|
|
102
|
+
|
|
103
|
+
- Fixed the bottom margin of the manual capture button in landscape mode.
|
|
104
|
+
|
|
3
105
|
## v2.5.0
|
|
4
106
|
|
|
5
107
|
### New features
|
package/README.md
CHANGED
|
@@ -24,12 +24,12 @@ The package depends on the following peer dependencies
|
|
|
24
24
|
|
|
25
25
|
| Browser | Versions |
|
|
26
26
|
| ------- | ------------------- |
|
|
27
|
-
| and_chr |
|
|
28
|
-
| chrome | 132,131
|
|
29
|
-
| edge |
|
|
30
|
-
| firefox | 134,133
|
|
31
|
-
| ios_saf | 18.
|
|
32
|
-
| safari | 18.2,18.1,18.0
|
|
27
|
+
| and_chr | 134 |
|
|
28
|
+
| chrome | 134,133,132,131 |
|
|
29
|
+
| edge | 134,133 |
|
|
30
|
+
| firefox | 136,135,134,133 |
|
|
31
|
+
| ios_saf | 18.3,18.2,18.1 |
|
|
32
|
+
| safari | 18.3,18.2,18.1,18.0 |
|
|
33
33
|
|
|
34
34
|
</browserSupportTable>
|
|
35
35
|
|
|
@@ -78,59 +78,76 @@ new CopyPlugin({
|
|
|
78
78
|
|
|
79
79
|
### CSS Customization
|
|
80
80
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
- `--fcm-
|
|
84
|
-
|
|
85
|
-
- `--fcm-
|
|
86
|
-
- `--fcm-
|
|
87
|
-
- `--fcm-
|
|
88
|
-
|
|
89
|
-
- `--fcm-
|
|
90
|
-
- `--fcm-
|
|
91
|
-
- `--fcm-
|
|
81
|
+
It is possible to customize the style by changing the following CSS properties:
|
|
82
|
+
|
|
83
|
+
- `--fcm-background-color` Sets the background color.
|
|
84
|
+
- `--fcm-background-color-variant1` Variant 1 of the background color.
|
|
85
|
+
- `--fcm-background-color-variant2` Variant 2 of the background color.
|
|
86
|
+
- `--fcm-background-color-contrast` Color used for contrast elements like separators or the dialog scrollbar.
|
|
87
|
+
- `--fcm-button-color` Color used for the buttons.
|
|
88
|
+
- `--fcm-button-color-hover` Color used for the buttons when hovered.
|
|
89
|
+
- `--fcm-button-color-press` Color used for the buttons when pressed.
|
|
90
|
+
- `--fcm-text-color-primary` Color used for the primary text.
|
|
91
|
+
- `--fcm-text-color-secondary` Color used for the secondary text.
|
|
92
|
+
- `--fcm-font-family` Sets the font family.
|
|
93
|
+
- `--fcm-overlay-color` Sets the color and opacity of the overlay.
|
|
94
|
+
- `--fcm-frame-color-neutral` Sets the color of the face frame.
|
|
95
|
+
- `--fcm-frame-color-success` Sets the success color of the face frame.
|
|
96
|
+
- `--fcm-frame-color-warning` Sets the warning color of the face frame.
|
|
97
|
+
- `--fcm-frame-color-invalid-manual` Sets the color of the face frame for manual mode invalid image feedback.
|
|
98
|
+
|
|
99
|
+
The approach for the customization changed on version 2.6.0. The following variables got deprecated and will be removed in future versions:
|
|
100
|
+
|
|
101
|
+
- `--fcm-primary-button-background-color`
|
|
102
|
+
- `--fcm-primary-button-background-color-hover`
|
|
103
|
+
- `--fcm-primary-button-text-color`
|
|
104
|
+
- `--fcm-secondary-button-background-color`
|
|
105
|
+
- `--fcm-secondary-button-text-color`
|
|
106
|
+
- `--fcm-secondary-button-text-color-hover`
|
|
107
|
+
- `--fcm-prompt-text-color`
|
|
108
|
+
- `--fcm-prompt-background-color`
|
|
92
109
|
|
|
93
110
|
The CSS custom properties must be defined using the `:root` CSS selector. Here is an example:
|
|
94
111
|
|
|
95
112
|
```css
|
|
96
113
|
:root {
|
|
97
|
-
--fcm-
|
|
114
|
+
--fcm-button-color: red;
|
|
98
115
|
}
|
|
99
116
|
```
|
|
100
117
|
|
|
101
|
-
> **Note:**
|
|
102
|
-
> In addition, we can't guarantee external customizations support on new versions of the library
|
|
118
|
+
> **Note:** All changes on the font and colors are under the integrator's responsibility and need to be tested by the integrator.
|
|
103
119
|
|
|
104
120
|
### Properties
|
|
105
121
|
|
|
106
|
-
| Property name | Type | Default | Mandatory | Description
|
|
107
|
-
| ------------------------------------ | ------------------------------------- | ---------------------- | --------- |
|
|
108
|
-
| captureMethod | String `manual/auto` | `auto` | - | Capture method to take the photo: by clicking a button or auto-capture.
|
|
109
|
-
| manualCaptureFallback | Boolean | `true` | - | In `auto` capture method, allow the use of `manual` capture mode as fallback. This would be triggered only when low performance conditions are detected, usually on very old devices. NOTE: If this option is turned off, some users might not be able to successfully submit an image.
|
|
110
|
-
| secure | Boolean | `true` | - | Use the [secure mode](#secure-mode)
|
|
111
|
-
| clientSdkId | String | - | Yes\* | Identifies your Yoti Hub application. This value can be found in the Hub, within your application section, in the keys tab.
|
|
112
|
-
| onSuccess | Function(payload, base64PreviewImage) | - | Yes | Callback called once the result (payload) is complete. The content of capture will vary when using secure or non-secure mode (See [secure mode section](#secure-mode)). The second argument `base64PreviewImage` will only be provided if `returnPreviewImage` is set to `true`.
|
|
113
|
-
| onError | Function | - | - | Callback called when there is an error. See Appendix for the list of error codes we currently support.
|
|
114
|
-
| onReadyForCapture | Function | - | - | Callback called when the Face Capture is ready to take images (camera feed and face scan are ready).
|
|
115
|
-
| showOverlay | Boolean | `true` | - | Optional use of the face overlay.
|
|
116
|
-
| resolutionType | String `hd/full_hd` | `hd` | - | Image resolution constraints passed to `getUserMedia`.
|
|
117
|
-
| format | String `jpeg/png` | `jpeg` | - | Image format type.
|
|
118
|
-
| imageType | String `original/cropped` | `original` | - | Selects if the image will be the original or it will be cropped in order to improve the timing response when processing the image in the API call.
|
|
119
|
-
| qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90).
|
|
120
|
-
| language | Language code \*\* | `en` | - | The language code to set the Face Capture language.
|
|
121
|
-
| a11yLiveRegionMode | String `assertive/polite` | `polite` | - | Determines the [politeness setting of the live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions) used to read out prompts for screen reader users
|
|
122
|
-
| showInitialGuidance | Boolean | `true` | - | Show the initial help guidance.
|
|
123
|
-
| faceCaptureAssetsRootUrl | String | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration.
|
|
124
|
-
| loadTimeout | Number | 15000 milliseconds | - | Sets the time (ms) the Face Capture will use to notify through the `onError` callback about downloading taking too long. The Face Capture will keep downloading after the notification.
|
|
125
|
-
| showGetHelpButton | Boolean | `true` | - | Show the Get Help button.
|
|
126
|
-
| autoSessionReload | Boolean | `true` | - | Automatically renews sessions after they expire.
|
|
127
|
-
| userRetryError | Boolean | `true` | - | Gives the possibility to users to retry several times when an error occurs.
|
|
128
|
-
| returnPreviewImage | Boolean | `false` | - | Provide the image captured (`base64PreviewImage`) in the `onSuccess` callback.
|
|
129
|
-
| encryptImage | Boolean | `true` | - | Encrypt the image inside the payload argument on the `onSuccess` callback when it runs the secure mode.
|
|
130
|
-
| allowBackgroundFaces | Boolean | `false` | - | Allows faces to be present in the background when the image is being captured. The face capture will return a cropped image with the main face when set to `true`. Note: This feature is designed for retail terminals and unsuitable for online user's face capture.
|
|
131
|
-
| faceSelectionMethod | String `center/area` | `center` | - | Defines where the main face can be placed, in the center or anywhere in the image. Note: This feature is designed for retail terminals and unsuitable for online user's face capture. It is recommend to enable `allowBackgroundFaces` when `faceSelectionMethod` is set to `area`.
|
|
132
|
-
| numStableFrames | Number | 4 | - | Determines how many frames are used for the stability check. The minimum value is 3 and the maximum is 6.
|
|
133
|
-
| isScoPortraitCamera _(experimental)_ | Boolean | `false` | - | Defines if the FCM should adapt to a camera stream with portrait resolution in a SCO (self-checkout) machine. This property won't rotate your camera stream but adapt the module to a portrait resolution. This property is meant for SCO machines only and shouldn't be used on mobile phone integrations.
|
|
122
|
+
| Property name | Type | Default | Mandatory | Description |
|
|
123
|
+
| ------------------------------------ | ------------------------------------- | ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
124
|
+
| captureMethod | String `manual/auto` | `auto` | - | Capture method to take the photo: by clicking a button or auto-capture. |
|
|
125
|
+
| manualCaptureFallback | Boolean | `true` | - | In `auto` capture method, allow the use of `manual` capture mode as fallback. This would be triggered only when low performance conditions are detected, usually on very old devices. NOTE: If this option is turned off, some users might not be able to successfully submit an image. |
|
|
126
|
+
| secure | Boolean | `true` | - | Use the [secure mode](#secure-mode) |
|
|
127
|
+
| clientSdkId | String | - | Yes\* | Identifies your Yoti Hub application. This value can be found in the Hub, within your application section, in the keys tab. |
|
|
128
|
+
| onSuccess | Function(payload, base64PreviewImage) | - | Yes | Callback called once the result (payload) is complete. The content of capture will vary when using secure or non-secure mode (See [secure mode section](#secure-mode)). The second argument `base64PreviewImage` will only be provided if `returnPreviewImage` is set to `true`. |
|
|
129
|
+
| onError | Function | - | - | Callback called when there is an error. See Appendix for the list of error codes we currently support. |
|
|
130
|
+
| onReadyForCapture | Function | - | - | Callback called when the Face Capture is ready to take images (camera feed and face scan are ready). |
|
|
131
|
+
| showOverlay | Boolean | `true` | - | Optional use of the face overlay. |
|
|
132
|
+
| resolutionType | String `hd/full_hd` | `hd` | - | Image resolution constraints passed to `getUserMedia`. |
|
|
133
|
+
| format | String `jpeg/png` | `jpeg` | - | Image format type. |
|
|
134
|
+
| imageType | String `original/cropped` | `original` | - | Selects if the image will be the original or it will be cropped in order to improve the timing response when processing the image in the API call. |
|
|
135
|
+
| qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). |
|
|
136
|
+
| language | Language code \*\* | `en` | - | The language code to set the Face Capture language. |
|
|
137
|
+
| a11yLiveRegionMode | String `assertive/polite` | `polite` | - | Determines the [politeness setting of the live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions) used to read out prompts for screen reader users |
|
|
138
|
+
| showInitialGuidance | Boolean | `true` | - | Show the initial help guidance. |
|
|
139
|
+
| faceCaptureAssetsRootUrl | String | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration. |
|
|
140
|
+
| loadTimeout | Number | 15000 milliseconds | - | Sets the time (ms) the Face Capture will use to notify through the `onError` callback about downloading taking too long. The Face Capture will keep downloading after the notification. |
|
|
141
|
+
| showGetHelpButton | Boolean | `true` | - | Show the Get Help button. |
|
|
142
|
+
| autoSessionReload | Boolean | `true` | - | Automatically renews sessions after they expire. |
|
|
143
|
+
| userRetryError | Boolean | `true` | - | Gives the possibility to users to retry several times when an error occurs. |
|
|
144
|
+
| returnPreviewImage | Boolean | `false` | - | Provide the image captured (`base64PreviewImage`) in the `onSuccess` callback. |
|
|
145
|
+
| encryptImage | Boolean | `true` | - | Encrypt the image inside the payload argument on the `onSuccess` callback when it runs the secure mode. |
|
|
146
|
+
| allowBackgroundFaces | Boolean | `false` | - | Allows faces to be present in the background when the image is being captured. The face capture will return a cropped image with the main face when set to `true`. Note: This feature is designed for retail terminals and unsuitable for online user's face capture. |
|
|
147
|
+
| faceSelectionMethod | String `center/area` | `center` | - | Defines where the main face can be placed, in the center or anywhere in the image. Note: This feature is designed for retail terminals and unsuitable for online user's face capture. It is recommend to enable `allowBackgroundFaces` when `faceSelectionMethod` is set to `area`. |
|
|
148
|
+
| numStableFrames | Number | 4 | - | Determines how many frames are used for the stability check. The minimum value is 3 and the maximum is 6. |
|
|
149
|
+
| isScoPortraitCamera _(experimental)_ | Boolean | `false` | - | Defines if the FCM should adapt to a camera stream with portrait resolution in a SCO (self-checkout) machine. This property won't rotate your camera stream but adapt the module to a portrait resolution. This property is meant for SCO machines only and shouldn't be used on mobile phone integrations. |
|
|
150
|
+
| luminosityCheckLevel | String `default/low/disabled` | `default` | - | Specify how strict the luminosity check should be for the FCM to capture an image. May be helpful to ease the capture process in challenging lighting conditions but could increase the rejection rate in the service. Note: This feature is designed for retail terminals and unsuitable for online user's face capture. |
|
|
134
151
|
|
|
135
152
|
**(\*)**
|
|
136
153
|
This field is only mandatory when using the secure mode. (secure = true)
|
|
@@ -244,6 +261,8 @@ return an error if the `payload` is modified:
|
|
|
244
261
|
`<fcm_version>` is the current version of FCM (embedded in the
|
|
245
262
|
module) and `<session_token>` is the session token generated from the request.
|
|
246
263
|
|
|
264
|
+
> Added a 20-second timeout to avoid long wait times when the network connection is poor or unavailable.
|
|
265
|
+
|
|
247
266
|
##### Possible issues
|
|
248
267
|
|
|
249
268
|
The secure mode requests Yoti services to download the encrypted module
|
package/index.d.ts
CHANGED
|
@@ -83,6 +83,24 @@ declare module '@getyoti/react-face-capture' {
|
|
|
83
83
|
AREA = 'area',
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
+
/**
|
|
87
|
+
* Levels of luminosity checks supported by the FCM.
|
|
88
|
+
*/
|
|
89
|
+
export enum LUMINOSITY_CHECK_LEVEL {
|
|
90
|
+
/**
|
|
91
|
+
* Default level, optimized for Yoti services.
|
|
92
|
+
*/
|
|
93
|
+
DEFAULT = 'default',
|
|
94
|
+
/**
|
|
95
|
+
* Relaxed validation level for hard condition environments. Recommended only for SCO (self-checkout) machine.
|
|
96
|
+
*/
|
|
97
|
+
LOW = 'low',
|
|
98
|
+
/**
|
|
99
|
+
* Luminosity check is disabled, not recommended.
|
|
100
|
+
*/
|
|
101
|
+
DISABLED = 'disabled',
|
|
102
|
+
}
|
|
103
|
+
|
|
86
104
|
/**
|
|
87
105
|
* Languages supported by the Face Capture.
|
|
88
106
|
*/
|
|
@@ -260,6 +278,12 @@ declare module '@getyoti/react-face-capture' {
|
|
|
260
278
|
* resolution in a SCO (self-checkout) machine. (default:false)
|
|
261
279
|
* @experimental*/
|
|
262
280
|
isScoPortraitCamera?: boolean;
|
|
281
|
+
/**
|
|
282
|
+
* Specify how strict the luminosity check should be for the FCM to capture an image.
|
|
283
|
+
* May be helpful to ease the capture process in challenging lighting conditions but
|
|
284
|
+
* could increase the rejection rate in the service. Note: This feature is designed
|
|
285
|
+
* for retail terminals and unsuitable for online user's face capture.(default:default) */
|
|
286
|
+
luminosityCheckLevel?: LUMINOSITY_CHECK_LEVEL;
|
|
263
287
|
}
|
|
264
288
|
|
|
265
289
|
/**
|