🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@getyoti/react-face-capture

Package Overview
Dependencies
Maintainers
3
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@getyoti/react-face-capture - npm Package Compare versions

Comparing version

2.5.1
to
2.6.0

90

CHANGELOG.md
# CHANGELOG
## v2.6.0
### New features
#### Theming
- Improved theming capabilities:
- General theming capabilities have been added through CSS variables:
- `--fcm-background-color` Sets the background color.
- `--fcm-background-color-variant1` Variant 1 of the background color.
- `--fcm-background-color-variant2` Variant 2 of the background color.
- `--fcm-background-color-contrast` Color used for contrast elements like separators or the dialog scrollbar.
- `--fcm-button-color` Color used for the buttons.
- `--fcm-button-color-hover` Color used for the buttons when hovered.
- `--fcm-button-color-press` Color used for the buttons when pressed.
- `--fcm-text-color-primary` Color used for the primary text.
- `--fcm-text-color-secondary` Color used for the secondary text.
- `--fcm-font-family` Sets the font family.
- Previous css variables to style the FCM have been deprecated, they are still applied but will get removed in future versions.
- `--fcm-primary-button-background-color`
- `--fcm-primary-button-background-color-hover`
- `--fcm-primary-button-text-color`
- `--fcm-secondary-button-background-color`
- `--fcm-secondary-button-text-color`
- `--fcm-secondary-button-text-color-hover`
- `--fcm-prompt-text-color`
- `--fcm-prompt-background-color`
- More extensive theming solutions are also possible. Contact with Yoti for more information about this.
#### UI/UX
- Improved accuracy of certain error states representation
- 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
- Improved help dialog UI
- Added border-radius to images.
- Centered video.
- Improved Area Mode face detection method making the face capture process easier.
- Added new user feedback to Area Mode face detection:
- "Move your face lower"
- "Move your face higher"
- Added a new message to the loading view to better represent the state of the FCM.
- "Running security checks"
- The `Processing your photo` screen is now displayed for at least 1.5 seconds after capturing the image to avoid flash-like effects.
#### Others
- Added a new property `luminosityCheckLevel`, allowing integrators to adjust the strictness of luminosity
validation with more flexible configuration options. Note: This feature is designed for retail terminals
and unsuitable for online user's face capture.
- Added a 20-second timeout to avoid long wait times when the network connection is poor or unavailable.
### Fixes
- Fixed bug causing the Face overlay to be out of position when specific CSS was applied to the FCM.
- Fixed an issue where the module layout would break when rotating an iPad.
- Fixed an overlapping issue for some loading screens.
- Fixed an issue where integrators could set an invalid `numStableFrames` value for non-secure requests.
### Notices
- Localisation has been revised. The following languages have been updated:
- ar-XN
- bg-BG
- cs-CZ
- es-ES
- fa-IR
- fi-FI
- fr-FR
- he-IL
- hi-IN
- hu-HU
- hy-AM
- id-ID
- ja-JP
- ko-KR
- lv-LV
- ms-MY
- nb-NO
- pl-PL
- ro-RO
- ru-RU
- sk-SK
- sv-SE
- th-TH
- tl-PH
- tr-TR
- uk-UA
- vi-VN
- zh-CN
## v2.5.1

@@ -4,0 +94,0 @@

24

index.d.ts

@@ -87,2 +87,20 @@ declare module '@getyoti/react-face-capture' {

/**
* Levels of luminosity checks supported by the FCM.
*/
export enum LUMINOSITY_CHECK_LEVEL {
/**
* Default level, optimized for Yoti services.
*/
DEFAULT = 'default',
/**
* Relaxed validation level for hard condition environments. Recommended only for SCO (self-checkout) machine.
*/
LOW = 'low',
/**
* Luminosity check is disabled, not recommended.
*/
DISABLED = 'disabled',
}
/**
* Languages supported by the Face Capture.

@@ -264,2 +282,8 @@ */

isScoPortraitCamera?: boolean;
/**
* 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.(default:default) */
luminosityCheckLevel?: LUMINOSITY_CHECK_LEVEL;
}

@@ -266,0 +290,0 @@

2

package.json
{
"name": "@getyoti/react-face-capture",
"version": "2.5.1",
"version": "2.6.0",
"description": "Face capture module to collect picture and data for Yoti AI API",

@@ -5,0 +5,0 @@ "main": "index.js",

109

README.md

@@ -27,6 +27,6 @@ # Yoti Face Capture integration

| ------- | ------------------- |
| and_chr | 132 |
| chrome | 133,132,131,130 |
| edge | 132,131 |
| firefox | 135,134,133,132 |
| and_chr | 134 |
| chrome | 134,133,132,131 |
| edge | 134,133 |
| firefox | 136,135,134,133 |
| ios_saf | 18.3,18.2,18.1 |

@@ -82,14 +82,31 @@ | safari | 18.3,18.2,18.1,18.0 |

Now, it is possible to customize the style by changing the following CSS properties:
It is possible to customize the style by changing the following CSS properties:
- `--fcm-primary-button-background-color` changes the background color in primary buttons (Take picture, Try again, ... ).
- `--fcm-primary-button-background-color-hover` changes the background color in primary buttons (Take picture, Try again, ... ) when is hovered.
- `--fcm-primary-button-text-color` changes the text color in primary buttons (Take picture, Try again, ... ).
- `--fcm-secondary-button-background-color` changes the background color in secondary buttons (Get help).
- `--fcm-secondary-button-text-color` changes the text color in secondary buttons (Get help).
- `--fcm-secondary-button-text-color-hover` changes the text color in secondary buttons (Get help) when the button is hovered.
- `--fcm-font-family` sets the font family.
- `--fcm-prompt-text-color` changes the text color in the prompt.
- `--fcm-prompt-background-color` sets the background color in the message prompt.
- `--fcm-background-color` Sets the background color.
- `--fcm-background-color-variant1` Variant 1 of the background color.
- `--fcm-background-color-variant2` Variant 2 of the background color.
- `--fcm-background-color-contrast` Color used for contrast elements like separators or the dialog scrollbar.
- `--fcm-button-color` Color used for the buttons.
- `--fcm-button-color-hover` Color used for the buttons when hovered.
- `--fcm-button-color-press` Color used for the buttons when pressed.
- `--fcm-text-color-primary` Color used for the primary text.
- `--fcm-text-color-secondary` Color used for the secondary text.
- `--fcm-font-family` Sets the font family.
- `--fcm-overlay-color` Sets the color and opacity of the overlay.
- `--fcm-frame-color-neutral` Sets the color of the face frame.
- `--fcm-frame-color-success` Sets the success color of the face frame.
- `--fcm-frame-color-warning` Sets the warning color of the face frame.
- `--fcm-frame-color-invalid-manual` Sets the color of the face frame for manual mode invalid image feedback.
The approach for the customization changed on version 2.6.0. The following variables got deprecated and will be removed in future versions:
- `--fcm-primary-button-background-color`
- `--fcm-primary-button-background-color-hover`
- `--fcm-primary-button-text-color`
- `--fcm-secondary-button-background-color`
- `--fcm-secondary-button-text-color`
- `--fcm-secondary-button-text-color-hover`
- `--fcm-prompt-text-color`
- `--fcm-prompt-background-color`
The CSS custom properties must be defined using the `:root` CSS selector. Here is an example:

@@ -99,39 +116,39 @@

:root {
--fcm-primary-button-background-color: red;
--fcm-button-color: red;
}
```
> **Note:** We do not recommend changing these css properties, all changes on the font and colors are under the integrator's responsibility and need to be tested by the integrator.
> In addition, we can't guarantee external customizations support on new versions of the library
> **Note:** All changes on the font and colors are under the integrator's responsibility and need to be tested by the integrator.
### Properties
| Property name | Type | Default | Mandatory | Description |
| ------------------------------------ | ------------------------------------- | ---------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| captureMethod | String `manual/auto` | `auto` | - | Capture method to take the photo: by clicking a button or auto-capture. |
| 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. |
| secure | Boolean | `true` | - | Use the [secure mode](#secure-mode) |
| clientSdkId | String | - | Yes\* | Identifies your Yoti Hub application. This value can be found in the Hub, within your application section, in the keys tab. |
| 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`. |
| onError | Function | - | - | Callback called when there is an error. See Appendix for the list of error codes we currently support. |
| onReadyForCapture | Function | - | - | Callback called when the Face Capture is ready to take images (camera feed and face scan are ready). |
| showOverlay | Boolean | `true` | - | Optional use of the face overlay. |
| resolutionType | String `hd/full_hd` | `hd` | - | Image resolution constraints passed to `getUserMedia`. |
| format | String `jpeg/png` | `jpeg` | - | Image format type. |
| 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. |
| qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). |
| language | Language code \*\* | `en` | - | The language code to set the Face Capture language. |
| 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 |
| showInitialGuidance | Boolean | `true` | - | Show the initial help guidance. |
| faceCaptureAssetsRootUrl | String | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration. |
| 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. |
| showGetHelpButton | Boolean | `true` | - | Show the Get Help button. |
| autoSessionReload | Boolean | `true` | - | Automatically renews sessions after they expire. |
| userRetryError | Boolean | `true` | - | Gives the possibility to users to retry several times when an error occurs. |
| returnPreviewImage | Boolean | `false` | - | Provide the image captured (`base64PreviewImage`) in the `onSuccess` callback. |
| encryptImage | Boolean | `true` | - | Encrypt the image inside the payload argument on the `onSuccess` callback when it runs the secure mode. |
| 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. |
| 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`. |
| numStableFrames | Number | 4 | - | Determines how many frames are used for the stability check. The minimum value is 3 and the maximum is 6. |
| 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. |
| Property name | Type | Default | Mandatory | Description |
| ------------------------------------ | ------------------------------------- | ---------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| captureMethod | String `manual/auto` | `auto` | - | Capture method to take the photo: by clicking a button or auto-capture. |
| 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. |
| secure | Boolean | `true` | - | Use the [secure mode](#secure-mode) |
| clientSdkId | String | - | Yes\* | Identifies your Yoti Hub application. This value can be found in the Hub, within your application section, in the keys tab. |
| 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`. |
| onError | Function | - | - | Callback called when there is an error. See Appendix for the list of error codes we currently support. |
| onReadyForCapture | Function | - | - | Callback called when the Face Capture is ready to take images (camera feed and face scan are ready). |
| showOverlay | Boolean | `true` | - | Optional use of the face overlay. |
| resolutionType | String `hd/full_hd` | `hd` | - | Image resolution constraints passed to `getUserMedia`. |
| format | String `jpeg/png` | `jpeg` | - | Image format type. |
| 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. |
| qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). |
| language | Language code \*\* | `en` | - | The language code to set the Face Capture language. |
| 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 |
| showInitialGuidance | Boolean | `true` | - | Show the initial help guidance. |
| faceCaptureAssetsRootUrl | String | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration. |
| 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. |
| showGetHelpButton | Boolean | `true` | - | Show the Get Help button. |
| autoSessionReload | Boolean | `true` | - | Automatically renews sessions after they expire. |
| userRetryError | Boolean | `true` | - | Gives the possibility to users to retry several times when an error occurs. |
| returnPreviewImage | Boolean | `false` | - | Provide the image captured (`base64PreviewImage`) in the `onSuccess` callback. |
| encryptImage | Boolean | `true` | - | Encrypt the image inside the payload argument on the `onSuccess` callback when it runs the secure mode. |
| 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. |
| 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`. |
| numStableFrames | Number | 4 | - | Determines how many frames are used for the stability check. The minimum value is 3 and the maximum is 6. |
| 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. |
| 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. |

@@ -250,2 +267,4 @@ **(\*)**

> Added a 20-second timeout to avoid long wait times when the network connection is poor or unavailable.
##### Possible issues

@@ -252,0 +271,0 @@

2

vanilla/index.js.LICENSE.txt

@@ -110,3 +110,3 @@ Name: react

Name: @getyoti/react-face-capture
Version: 2.5.1
Version: 2.6.0
License: Yoti Face Capture Licence

@@ -113,0 +113,0 @@ Private: false

index.js

Sorry, the diff of this file is too big to display

vanilla/index.js

Sorry, the diff of this file is too big to display

vanilla/index.js.map

Sorry, the diff of this file is not supported yet