@getyoti/react-face-capture 2.6.2 → 2.7.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +56 -35
  3. package/index.d.ts +47 -20
  4. package/index.js +7 -7
  5. package/package.json +1 -1
  6. package/vanilla/index.js +10 -10
  7. package/vanilla/index.js.LICENSE.txt +1 -1
  8. package/vanilla/index.js.map +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## v2.7.0
4
+
5
+ ### New features
6
+
7
+ #### Multiframe
8
+
9
+ Multiframe is a new layer of protection added on top of the curren security features that further improves virtual injection detection.
10
+
11
+ - Adds a new prop `multiframe` to enable and disable this features. (Default:false)
12
+ - The new `multiframe`mode, only works with the `secure` mode and needs the query param `multiframe=true` added to the prediction request.
13
+ - Enabling `multiframe` will increase the payload size.
14
+ - When enabling`multiframe`, the following property values will be ignored and handled internally for optimal performance:
15
+ - `format`
16
+ - `resolutionType`
17
+ - `qualityType`
18
+ - `imageType`
19
+ - `allowBackgroundFaces`
20
+
21
+ #### Others
22
+
23
+ - Adds a new prop `sessionDuration` which specifies the maximum duration of the session before it times out, regardless of number of retry attempts.
24
+ - The value must be within 30s and 5m (in milliseconds), and invalid values will trigger an exception.
25
+ - The icon for the multiple faces feedback was changed.
26
+ - `a11yLiveRegionMode` is now deprecated and will be removed in the next major release. Accessibility features like `aria-live` are now handled internally.
27
+
28
+ ### Fixes
29
+
30
+ - The feedback message is centred so the possibility of overlap with the face layout has been reduced.
31
+ - Localisation has been revised. The following languages have been updated:
32
+ - `bs-BA`: Bosnian
33
+ - `sr-RS`: Serbian (Latin script)
34
+
3
35
  ## v2.6.2
4
36
 
5
37
  ### Fixes
package/README.md CHANGED
@@ -24,10 +24,10 @@ The package depends on the following peer dependencies
24
24
 
25
25
  | Browser | Versions |
26
26
  | ------- | ------------------- |
27
- | and_chr | 136 |
28
- | chrome | 136,135,134,133 |
29
- | edge | 136,135 |
30
- | firefox | 138,137,136,135 |
27
+ | and_chr | 138 |
28
+ | chrome | 138,137,136,135 |
29
+ | edge | 138,137 |
30
+ | firefox | 140,139,138,137 |
31
31
  | ios_saf | 18.5,18.4,18.3 |
32
32
  | safari | 18.5,18.4,18.3,18.2 |
33
33
 
@@ -119,35 +119,37 @@ The CSS custom properties must be defined using the `:root` CSS selector. Here i
119
119
 
120
120
  ### Properties
121
121
 
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 | 60000 milliseconds | - | Sets the time (in ms) the Face Capture will use to notify through the `onError` callback if the module takes too long to download and load the module. The Face Capture will keep loading 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. |
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`. If `multiframe` is `true`, the resolution of the captured image will be `HD` and this field will be ignored. |
133
+ | format | String `jpeg/png` | `jpeg` | - | Image format type. If `multiframe` is `true`, the format of the captured image will be `jpeg` and this field will be ignored. |
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. If `multiframe` is `true`, the image type will be `original` and this field will be ignored. |
135
+ | qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). If `multiframe` is `true`, the quality of the captured image will be `high` and this field will be ignored. |
136
+ | language | Language code \*\* | `en` | - | The language code to set the Face Capture language. |
137
+ | a11yLiveRegionMode | String `assertive/polite` | `polite` | - | **DEPRECATED: will be removed in the next major release.** 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 | 60000 milliseconds | - | Sets the time (in ms) the Face Capture will use to notify through the `onError` callback if the module takes too long to download and load the module. The Face Capture will keep loading 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`. If `multiframe` is `true`, this field will be ignored and treated as `false`. Note: This feature is designed for retail terminals and is unsuitable for online users' 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
+ | sessionDuration | Number | - | - | Causes the session to time out after the specified number of milliseconds, regardless of number of retry attempts taken. Must be at least 30,000 (30s) and at most 300,000 (5m). |
150
+ | 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. |
151
+ | 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. |
152
+ | multiframe | Boolean | `false` | - | Causes the FCM to collect more than one image, providing more security. This feature only works when secure is active, if not it will be ignored. |
151
153
 
152
154
  **(\*)**
153
155
  This field is only mandatory when using the secure mode. (secure = true)
@@ -240,8 +242,10 @@ import { ERROR_CODE } from '@getyoti/react-face-capture';
240
242
 
241
243
  The Secure mode allows [Yoti back-end
242
244
  service](https://developers.yoti.com/age-estimation/integration-guide)
243
- to verify that the image captured on the client-side browser with the FCM hasn't been
244
- modified in any form. Note, the secure mode of Yoti FCM makes a request to Yoti
245
+ to verify that the image captured on the client-side browser using the Face Capture hasn't been
246
+ modified in any form.
247
+
248
+ Note, the secure mode of Yoti Face Capture makes a request to Yoti
245
249
  back-end to download the encrypted capture package that takes the
246
250
  photo and create the secure result request. The secure result information will
247
251
  be returned in `onSuccess` callback (`payload` argument). It is the information
@@ -263,6 +267,9 @@ return an error if the `payload` is modified:
263
267
  `<fcm_version>` is the current version of FCM (embedded in the
264
268
  module) and `<session_token>` is the session token generated from the request.
265
269
 
270
+ For more detailed information on how the secure mode interacts with the server, see the
271
+ [Secure image capture](https://developers.yoti.com/age-estimation/secure-image-capture) page.
272
+
266
273
  > Added a 20-second timeout to avoid long wait times when the network connection is poor or unavailable.
267
274
 
268
275
  ##### Possible issues
@@ -276,6 +283,10 @@ cross-site scripting like CSP you will need to allow the FCM requests.
276
283
 
277
284
  The secure mode detects modifications on the camera stream source and fraudulent camera hardware. In these scenarios, it will return an `UNTRUSTED_SECURE_SESSION` error code when calling the Yoti BE services.
278
285
 
286
+ ##### Multiframe
287
+
288
+ The `multiframe` mode adds an extra layer of security to improve the prevention of injection attacks and other forms of image manipulation. It operates seamlessly, ensuring the user experience remains unaffected. It requires `secure` mode to be enabled and increases the size of the generated payload.
289
+
279
290
  ### Example
280
291
 
281
292
  ```js
@@ -379,3 +390,13 @@ application.
379
390
  ### iOS distorted layout (version < 2.4.0)
380
391
 
381
392
  We are aware of a rare display issue on iOS devices which can make the video element appear distorted in versions prior to 2.4.0. Refreshing or reloading will resolve this, and it should not happen often.
393
+
394
+ ### Virtual backgrounds
395
+
396
+ Modifications over the original image captured by the camera, like virtual background or other kinds of filters, are also considered manipulations. Pictures taken using these kinds of features will be rejected as `UNTRUSTED_SECURE_SESSION`.
397
+
398
+ ### Multiframe Mode Usage
399
+
400
+ When using multiframe mode, the prediction request must include the query parameter `multiframe=true`. This is required for the service to process the request correctly. If there is a mismatch between the Face Capture's multiframe setting and the multiframe query parameter in the request, the response will always be `UNTRUSTED_SECURE_SESSION`.
401
+
402
+ When enabling this mode, ensure both the Face Capture configuration and the prediction request are aligned to avoid this error.
package/index.d.ts CHANGED
@@ -54,6 +54,7 @@ declare module '@getyoti/react-face-capture' {
54
54
  }
55
55
 
56
56
  /**
57
+ * @deprecated will be remove in next major release
57
58
  * Politeness setting of the live region supported by the Face Capture.
58
59
  */
59
60
  export enum A11Y_LIVE_REGION_MODE {
@@ -219,7 +220,7 @@ declare module '@getyoti/react-face-capture' {
219
220
  faceCaptureAssetsRootUrl?: string;
220
221
  /** Capture method to take the photo: by clicking a button or auto-capture. (default:auto) */
221
222
  captureMethod?: CAPTURE_METHOD;
222
- /** Use the secure mode. (default:true) */
223
+ /** Use the secure mode. (default: true) */
223
224
  secure?: boolean;
224
225
  /** Callback called once the result (capture) is complete. */
225
226
  onSuccess: (payload: FCMPayload, base64PreviewImage?: string) => void;
@@ -229,65 +230,91 @@ declare module '@getyoti/react-face-capture' {
229
230
  onReadyForCapture?: () => void;
230
231
  /** Optional use of the face overlay (default: true) */
231
232
  showOverlay?: boolean;
232
- /** Image resolution constraints passed to getUserMedia. (default:HD) */
233
+ /** Image resolution constraints passed to getUserMedia.
234
+ *
235
+ * This property will be ignored if the `multiframe` property has the value
236
+ * `true`. The image resolution will be `HD` when multiframe is `true`.
237
+ *
238
+ * (default: HD) */
233
239
  resolutionType?: RESOLUTION_TYPE;
234
- /** Image format type. (default:jpeg) */
240
+ /** Image format type.
241
+ *
242
+ * This property will be ignored if the `multiframe` property has the value
243
+ * `true`. The image format will be `jpeg` when `multiframe` is `true`.
244
+ *
245
+ * (default: jpeg) */
235
246
  format?: FORMAT_TYPE;
236
- /** imageType select if the image will be the original or it will be cropped in order to improve the timing
237
- response when processing the image in the API call. (default:original) */
247
+ /** imageType select if the image will be the original or it will be cropped in order to improve the timing
248
+ response when processing the image in the API call. (default: original) */
238
249
  imageType?: IMAGE_TYPE;
239
- /** Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). (default:high) */
250
+ /** Sets the image quality of jpeg format images only.
251
+ *
252
+ * High (1) - Medium (0.96) - Low (0.90).
253
+ *
254
+ * This property will be ignored if the `multiframe` property has the value
255
+ * `true`. The image quality type will be `high` when `multiframe` is
256
+ * `true`.
257
+ *
258
+ * (default: high) */
240
259
  qualityType?: QUALITY_TYPE;
241
- /** The language code to set the language of the feedback messages. (default:en) */
260
+ /** The language code to set the language of the feedback messages. (default: en) */
242
261
  language?: LANGUAGE_CODE;
243
- /** Determines the politeness setting of the live region used to read out prompts for screen reader users. (default:polite) */
262
+ /** Determines the politeness setting of the live region used to read out prompts for screen reader users. (default: polite)
263
+ * @deprecated will be remove in next major release
264
+ */
244
265
  a11yLiveRegionMode?: A11Y_LIVE_REGION_MODE;
245
- /** Show the initial help guidance. (default:true) */
266
+ /** Show the initial help guidance. (default: true) */
246
267
  showInitialGuidance?: boolean;
247
- /** Indicates if the face capture will use the manual capture method because of slow performance. (default:true) */
268
+ /** Indicates if the face capture will use the manual capture method because of slow performance. (default: true) */
248
269
  manualCaptureFallback?: boolean;
249
270
  /** Indicates the time (in milliseconds) to call the onError callback if the
250
271
  * module takes that time to load (default: 60000) */
251
272
  loadTimeout?: number;
252
273
  /** Identifies your Yoti Hub application. */
253
274
  clientSdkId?: string;
254
- /** Show the Get Help button. (default:true) */
275
+ /** Show the Get Help button. (default: true) */
255
276
  showGetHelpButton?: boolean;
256
- /** Automatically renews sessions after they expire. (default:true) */
277
+ /** Automatically renews sessions after they expire. (default: true) */
257
278
  autoSessionReload?: boolean;
258
279
  /** Gives the possibility to users to retry several times when an error
259
- * occurs. (default:true) */
280
+ * occurs. (default: true) */
260
281
  userRetryError?: boolean;
261
282
  /** Provide the image captured ('base64PreviewImage') in the 'onSuccess'
262
- * callback. (default:false) */
283
+ * callback. (default: false) */
263
284
  returnPreviewImage?: boolean;
264
285
  /** Encrypt the image inside the payload argument on the 'onSuccess'
265
- * callback when it runs the secure mode. (default:true) */
286
+ * callback when it runs the secure mode. (default: true) */
266
287
  encryptImage?: boolean;
267
288
  /** Allows faces to be present in the background when the image is being
268
289
  * captured. The face capture will return a cropped image with the main face
269
290
  * when set to 'true'. Note: This feature is designed for retail terminals
270
- * and unsuitable for online user's face capture. (default:false) */
291
+ * and unsuitable for online user's face capture. (default: false) */
271
292
  allowBackgroundFaces?: boolean;
272
293
  /** Defines where the main face can be placed, in the center or anywhere in
273
294
  * the image. Note: This feature is designed for retail terminals and
274
295
  * unsuitable for online user's face capture. It is recommend to enable
275
296
  * 'allowBackgroundFaces' when 'faceSelectionMethod' is set to 'area'.
276
- * (default:center) */
297
+ * (default: center) */
277
298
  faceSelectionMethod?: FACE_SELECTION_METHOD;
278
299
  /** Determines how many frames are used for the stability check.
279
- * The minimum value is 3 and the maximum is 6. (default:4) */
300
+ * The minimum value is 3 and the maximum is 6. (default: 4) */
280
301
  numStableFrames?: number;
302
+ /** Determines the session timeout period, in milliseconds.
303
+ * The minimum value is 30,000 (30s), maxium 300,000 (5m). */
304
+ sessionDuration?: number;
281
305
  /** Defines if the FCM should adapt to a camera stream with portrait
282
- * resolution in a SCO (self-checkout) machine. (default:false)
306
+ * resolution in a SCO (self-checkout) machine. (default: false)
283
307
  * @experimental*/
284
308
  isScoPortraitCamera?: boolean;
285
309
  /**
286
310
  * Specify how strict the luminosity check should be for the FCM to capture an image.
287
311
  * May be helpful to ease the capture process in challenging lighting conditions but
288
312
  * could increase the rejection rate in the service. Note: This feature is designed
289
- * for retail terminals and unsuitable for online user's face capture.(default:default) */
313
+ * for retail terminals and unsuitable for online user's face capture. (default: default) */
290
314
  luminosityCheckLevel?: LUMINOSITY_CHECK_LEVEL;
315
+ /**
316
+ * Makes the FCM collecting more than one image, providing more security (default: false) */
317
+ multiframe?: boolean;
291
318
  }
292
319
 
293
320
  /**