@getyoti/react-face-capture 1.0.0-beta.3 → 1.0.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 CHANGED
@@ -1,5 +1,68 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## v1.0.0
4
+
5
+ ### New features
6
+
7
+ - Removed `widthMinConstraint` and `widthIdealConstraint` from the Face Capture Module props.
8
+
9
+ - Added `resolutionType` prop to provide a semantic and easier way of selecting the desired resolution.
10
+ The possible values for the new prop are:
11
+
12
+ - `hd`
13
+ - `full_hd`
14
+
15
+ - Added `onReadyForCapture` callback to provide a way for the integrators to know when the module is ready to take images.
16
+
17
+ - Now the Face Capture Module will stop the process and the camera when the page is hidden.
18
+
19
+ - There is a known issue on iPhone Firefox, when opening a new FCM instance in a different tab, that may cause the previous one to freeze.
20
+
21
+ - Now the vanilla version of the Face Capture Module also exports some useful constants, as the React version does. Here is a list of all of them:
22
+
23
+ - **CAPTURE_METHOD**
24
+ - **COUNTDOWN_MODES**
25
+ - **ERROR_CODE**
26
+ - **FORMAT_TYPE**
27
+ - **IMAGE_TYPE**
28
+ - **LANGUAGE_CODE**
29
+ - **QUALITY_TYPE**
30
+ - **RESOLUTION_TYPE**
31
+
32
+ New constants can be accessed by using `Yoti.<CONSTANT_NAME>`.
33
+
34
+ - Now `countdownMode` has new options:
35
+
36
+ - `never` and `always` remains the same.
37
+ - `auto` has been replaced by `only_mobile` and `only_desktop` which brings extra configuration for all possible scenarios.
38
+
39
+ - Implemented localisation languages:
40
+
41
+ - `ur`: Urdu
42
+ - `hy`: Armenian
43
+ - `he`: Hebrew
44
+
45
+ - Updated localisations languages:
46
+
47
+ - `it`: Italian
48
+ - `es-419`: Latin American Spanish
49
+
50
+ - Fixed typo in German localisation.
51
+
52
+ - Manual capture method fallback when slow performance, is now optional with the new `manualCaptureFallback` prop.
53
+
54
+ - Added type declaration file `index.d.ts` for the Face Capture component and exported properties.
55
+
56
+ - CustomManualButton and CustomConsentButton properties are not supported in the vanilla version.
57
+
58
+ ### Minor changes
59
+
60
+ - Removed ellipsis from user feedback messages.
61
+
62
+ ### Fixes
63
+
64
+ - Fix error added on `FCM 1.0.0-beta.2` causing `JPEG` images to be more compressed than desired on landscape scenario.
65
+
3
66
  ## v1.0.0-beta.3
4
67
 
5
68
  Fix a package install error which cause `yarn` and older `npm` versions to fail.
package/README.md CHANGED
@@ -32,6 +32,8 @@ Secondly, the module needs `MediaDevices.getUserMedia()` to work. When this isn'
32
32
 
33
33
  _Note: Non-Safari browsers on iOS are not supported because of an iOS limitation._
34
34
 
35
+ _Note: Edge is only supported on desktop versions._
36
+
35
37
  Finally, some devices might experience poor performance when attempting to detect a face. This is because the underlying library TensorFlow.js can still be too demanding for older less performant devices.
36
38
 
37
39
  ## React face capture module
@@ -66,25 +68,26 @@ new CopyPlugin([
66
68
 
67
69
  ### Props
68
70
 
69
- | Property name | Type | Default | Mand | Description |
70
- | -------------------- | -------------------------- | ------------- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
71
- | captureMethod | String `manual/auto` | `auto` | - | The way you capture the photo, either with the button of auto-capture |
72
- | secure | Boolean | false | - | If `true`, the face capture module will use the [secure mode](#secure-mode) |
73
- | onSuccess | Function({ img, secure }) | - | Y | Callback which will be called once the result (capture) is complete. The field `secure` is only returned in secure mode (See [secure mode section](#secure-mode)) |
74
- | onError | Function | - | - | Callback which will be called when there is an error. See Appendix for the list of error codes we currently support. |
75
- | showOverlay | Boolean | `true` | - | Use a face overlay |
76
- | widthMinConstraint | Number | `1024` | - | Video min width constraint passed to `getUserMedia` |
77
- | widthIdealConstraint | Number | `1280` | - | Video ideal width constraint passed to `getUserMedia` |
78
- | format | String | `jpeg` | - | Image format |
79
- | CustomManualButton | Function | simple button | - | Custom UI of the manual capture button. It uses `onClick` and `disabled` as props |
80
- | CustomConsentButton | Function | simple button | - | Custom UI of the consent button. It uses `onClick` and `disabled` as props |
81
- | countdownMode | String `auto/never/always` | `never` | - | Note: `auto` means it will be hidden on mobile and shown on desktop |
82
- | imageType | String `original/cropped` | `original` | - | Cropped image to improve performance on processing from the API |
83
- | isDebug | Boolean | false | - | If `true`, display useful information |
84
- | qualityType | String `high/medium/low` | `high` | - | The quality of the image taken for jpeg format only. High (1) - Medium (0.96) - Low (0.90) |
85
- | language | Language code (\*) | `en` | - | The language code to set the language of the feedback messages |
86
- | 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 |
87
- | isConsentRequired | Boolean | `false` | - | Makes sure that the user gives consent to the tool to analyse their face. If it is `true`, a button will appear on the bottom section of the module, asking the user for their consent, and not analysing the user face until the consent is given. After this, the button disappears. |
71
+ | Property name | Type | Default | Mand | Description |
72
+ | --------------------- | ---------------------------------------------- | ------------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
73
+ | captureMethod | String `manual/auto` | `auto` | - | Capture method to take the photo: by clicking a button or auto-capture. |
74
+ | 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. |
75
+ | countdownMode | String `only_desktop/only_mobile/never/always` | `never` | - | Indicates when the countdown will be used. Note: It's only used if captureMethod is set to `manual`. |
76
+ | secure | Boolean | false | - | If `true`, the face capture module will use the [secure mode](#secure-mode) |
77
+ | onSuccess | Function({ img, secure }) | - | Y | Callback called once the result (capture) is complete. The field `secure` is only returned in secure mode (See [secure mode section](#secure-mode)) |
78
+ | onError | Function | - | - | Callback called when there is an error. See Appendix for the list of error codes we currently support. |
79
+ | onReadyForCapture | Function | - | - | Callback called when the face capture module is ready to take images (Video feed and face scan are ready). |
80
+ | showOverlay | Boolean | `true` | - | Optional use of the face overlay. |
81
+ | resolutionType | String `hd/full_hd` | `hd` | - | Image resolution constraints passed to `getUserMedia`. |
82
+ | format | String | `jpeg` | - | Image format type. |
83
+ | CustomManualButton | Function | simple button | - | Custom UI of the manual capture button. It uses `onClick` and `disabled` as props. |
84
+ | CustomConsentButton | Function | simple button | - | Custom UI of the consent button. It uses `onClick` and `disabled` as props. |
85
+ | imageType | String `original/cropped` | `original` | - | imageType select 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. |
86
+ | qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). |
87
+ | language | Language code (\*) | `en` | - | The language code to set the language of the feedback messages. |
88
+ | 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 |
89
+ | isConsentRequired | Boolean | `false` | - | Makes sure that the user gives consent to the tool to analyse their face. If it is `true`, a button will appear on the bottom section of the module, asking the user for their consent, and not analysing the user face until the consent is given. After this, the button disappears. |
90
+ | faceCaptureAssetsRootUrl | string | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration. |
88
91
 
89
92
  **(\*)**
90
93
  Current languages supported:
@@ -99,7 +102,9 @@ Current languages supported:
99
102
  - `et`: Estonian
100
103
  - `fi`: Finnish
101
104
  - `fr`: French
105
+ - `he`: Hebrew
102
106
  - `hi`: Hindi
107
+ - `hy`: Armenian
103
108
  - `id`: Bahasa
104
109
  - `it`: Italian
105
110
  - `ja`: Japanese
@@ -117,6 +122,7 @@ Current languages supported:
117
122
  - `th`: Thai
118
123
  - `tr`: Turkish
119
124
  - `uk`: Ukranian
125
+ - `ur`: Urdu
120
126
  - `vi`: Vietnamese
121
127
 
122
128
  #### Language fallback
@@ -175,20 +181,7 @@ The flow for the secure mode is the following:
175
181
  Where `<version>` is the current version of the FCM (It is embedded in the
176
182
  module) and the `<token>` is the session token the first request returns.
177
183
 
178
- ```mermaid
179
- sequenceDiagram
180
- participant A as Browser (FCM)
181
- participant B as Secure Module Server
182
- participant C as Integrator back-end
183
- participant D as Yoti Anti Spoofing Service
184
- A->>B: Request for a session
185
- B->>A: New session response
186
- A->>B: Request for the secure capture module
187
- B->>A: Secure capture module result
188
- A->>A: Take picture
189
- A->>C: Send capture result
190
- C->>D: Propagate request to the Anti Spoofing service
191
- ```
184
+ ![Diagram](https://raw.githubusercontent.com/getyoti/web-fcm-demo/main/docs/sfcm-diagram.png)
192
185
 
193
186
  ##### Possible issues
194
187
 
@@ -236,6 +229,8 @@ Inside the page you want to have face capture, add Face capture scripts and styl
236
229
 
237
230
  Our scripts will give you access to `Yoti.FaceCaptureModule.render` you can pass 2 parameters, first parameters are the props and are the same used in react integration and second parameter you need a html DOM reference so we know where we can render the UI.
238
231
 
232
+ In order to unmount the component, it is highly recommended to call the `Yoti.FaceCaptureModule.unmount` function instead of destroying the HTML element, as this could lead to some issues or misbehavior.
233
+
239
234
  **index.html**
240
235
 
241
236
  ```html
@@ -259,3 +254,7 @@ Our scripts will give you access to `Yoti.FaceCaptureModule.render` you can pass
259
254
 
260
255
  <div id="face-capture-module-root"></div>
261
256
  ```
257
+
258
+ ## CHANGELOG
259
+
260
+ [CHANGELOG](https://github.com/getyoti/web-fcm-demo/blob/main/docs/FCM-CHANGELOG.md) file.
package/index.css CHANGED
@@ -1 +1 @@
1
- ._2_U2DYHedfGUyvS1oS5{display:flex;flex-direction:column;overflow:hidden;position:relative}.mteIzegCA0cNMXt96BYN{position:relative}.Ds2gos19dHtdm4Aer1pq,.Va8swWS5S29Uvou7UNnc{height:100%;position:absolute;width:100%}.Ds2gos19dHtdm4Aer1pq{display:flex;justify-content:center;top:0}.x_r8eQXclQHy5Jjno7pU{display:block;height:100%;margin:auto;position:absolute}.HPEPfcUpwWOVOJSPP9R_{box-sizing:border-box;color:#67717f;height:100%;left:0;position:absolute;right:0}.HPEPfcUpwWOVOJSPP9R_._0fft05LhDRetV8QdNSI{color:#39c48e}.HPEPfcUpwWOVOJSPP9R_.JHe4OqVjOOuBZXJn_axE{color:#ffba37}.xsnSbKRs6MZbpP2odJGk{box-sizing:border-box;position:absolute;width:100%}.xsnSbKRs6MZbpP2odJGk.lSsJ_kvBTJOO0shULKLn{height:43.5%;top:28.3%}.xsnSbKRs6MZbpP2odJGk._6X0Zl0a0b8R2wCqGS_K{height:71.7%;top:11.5%}.IpX4dJbHat9i3luoCwef{align-items:start;background-color:#fff;border-radius:.3em;box-shadow:0 8px 15px #333b401a;box-sizing:border-box;color:#333b40;display:flex;font-family:sans-serif;font-size:16px;font-size:var(--message-font-size);font-weight:900;justify-content:start;left:50%;padding:.4em 0;position:absolute;text-align:center}.a_0VmnisbKCGWfubHrmj{margin-bottom:50px;top:4.6%;transform:translate(-50%);width:90%}.CqNtyAmFAcDIeu8mRGPD{top:5.5%;transform:translate(-50%);width:51.25%}.rlF15FcuMGotbEHYe5KW{align-items:start;font-size:calc(var(--message-font-size) + 3px)}._CvVxyqwMB2D7fkKx_NZ{display:flex;justify-content:center;order:1;width:14%}._znJxLRvhRnuCU0KBY3_{order:2;width:72%}.aM6UBOeSFg8vwirw8BEs{position:absolute}.RxkomAqHmrdu47_oGii4{bottom:-8px;box-sizing:border-box;display:grid;font-size:40px;grid-template-columns:repeat(3,80px) 50px;justify-content:center;padding:16px;position:absolute;text-align:center;width:100%}.ZSTtG9h6K6_0_axlDNnV,.__OOQVMtxL3v8uCw9eKy,.hwSkw4zQBundKmrqIwqC{color:#333b40;font-family:sans-serif;font-size:40px;font-weight:700;height:50px;line-height:55px;text-align:center;width:51px}.__OOQVMtxL3v8uCw9eKy{opacity:.5}.Gf_S7QnzULbIZZZ7roY2,.OZI1jG8pdtaOfb2ZsB2n,.XOix2SeWtEFksSSmLt9v{fill:#333b40}.Gf_S7QnzULbIZZZ7roY2 use,.OZI1jG8pdtaOfb2ZsB2n use,.XOix2SeWtEFksSSmLt9v use{fill:inherit}.ZSTtG9h6K6_0_axlDNnV svg,.__OOQVMtxL3v8uCw9eKy svg,.hwSkw4zQBundKmrqIwqC svg{font-size:50px}.Gf_S7QnzULbIZZZ7roY2{opacity:.5}._XKP_3EMO0LKJr53EW21{box-shadow:0 0 3px 1px #0000001c;height:auto;transform:scaleX(-1);width:100%}@keyframes TgYAVlLOGfJ_hl3TBdkC{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.X_Bq5FImnGbO6TLe3Len{align-items:center;display:flex;height:100%;justify-content:center;line-height:0;text-align:center}.WPX6_jcjLpB6aH420ZCd{animation:TgYAVlLOGfJ_hl3TBdkC 1.5s infinite}.bPwt8l_jKvlB2llQ7azY{height:35.71px;width:35.71px}.bPwt8l_jKvlB2llQ7azY use{fill:#333b40}.mtcvKOHbFdRFpAH7ZHwW{align-items:center;background-color:#229dff;border:none;border-radius:5px;color:#fff;cursor:pointer;display:block;display:flex;font-size:14px;font-weight:500;justify-content:center;letter-spacing:.5px;margin:auto;min-width:134px;outline:none;padding:12px 20px;text-transform:uppercase;transition:background-color .15s ease-out 0s;width:100%}.mtcvKOHbFdRFpAH7ZHwW.kYH4ilWb5sFtCcwqD29n{max-width:350px;width:45%}.mtcvKOHbFdRFpAH7ZHwW:hover{background-color:#007ee8}.mtcvKOHbFdRFpAH7ZHwW:disabled{background-color:#88caff}.GusgiqC_1nbmjyHkruu0 use{fill:currentColor}.dDcfK_agfQV9XSYSuuxR{align-items:center;bottom:-8px;box-sizing:border-box;display:inline-block;justify-content:center;padding:16px;position:absolute;text-align:center;width:100%}
1
+ .mtcvKOHbFdRFpAH7ZHwW{align-items:center;background-color:#229dff;border:none;border-radius:5px;color:#fff;cursor:pointer;display:block;display:flex;font-size:14px;font-weight:500;justify-content:center;letter-spacing:.5px;margin:auto;min-width:134px;outline:none;padding:12px 20px;text-transform:uppercase;transition:background-color .15s ease-out 0s;width:100%}.mtcvKOHbFdRFpAH7ZHwW.kYH4ilWb5sFtCcwqD29n{max-width:350px;width:45%}.mtcvKOHbFdRFpAH7ZHwW:hover{background-color:#007ee8}.mtcvKOHbFdRFpAH7ZHwW:disabled{background-color:#88caff}.GusgiqC_1nbmjyHkruu0 use{fill:currentColor}.dDcfK_agfQV9XSYSuuxR{align-items:center;bottom:-8px;box-sizing:border-box;display:inline-block;justify-content:center;padding:16px;position:absolute;text-align:center;width:100%}._XKP_3EMO0LKJr53EW21{box-shadow:0 0 3px 1px #0000001c;height:auto;transform:scaleX(-1);width:100%}.bX5GJJw3AqsCwBDA6qWZ{visibility:hidden}.RxkomAqHmrdu47_oGii4{bottom:-8px;box-sizing:border-box;display:grid;font-size:40px;grid-template-columns:repeat(3,80px) 50px;justify-content:center;padding:16px;position:absolute;text-align:center;width:100%}.ZSTtG9h6K6_0_axlDNnV,.__OOQVMtxL3v8uCw9eKy,.hwSkw4zQBundKmrqIwqC{color:#333b40;font-family:sans-serif;font-size:40px;font-weight:700;height:50px;line-height:55px;text-align:center;width:51px}.__OOQVMtxL3v8uCw9eKy{opacity:.5}.Gf_S7QnzULbIZZZ7roY2,.OZI1jG8pdtaOfb2ZsB2n,.XOix2SeWtEFksSSmLt9v{fill:#333b40}.Gf_S7QnzULbIZZZ7roY2 use,.OZI1jG8pdtaOfb2ZsB2n use,.XOix2SeWtEFksSSmLt9v use{fill:inherit}.ZSTtG9h6K6_0_axlDNnV svg,.__OOQVMtxL3v8uCw9eKy svg,.hwSkw4zQBundKmrqIwqC svg{font-size:50px}.Gf_S7QnzULbIZZZ7roY2{opacity:.5}.aM6UBOeSFg8vwirw8BEs{position:absolute}.HPEPfcUpwWOVOJSPP9R_{box-sizing:border-box;color:#67717f;height:100%;left:0;position:absolute;right:0}.HPEPfcUpwWOVOJSPP9R_._0fft05LhDRetV8QdNSI{color:#39c48e}.HPEPfcUpwWOVOJSPP9R_.JHe4OqVjOOuBZXJn_axE{color:#ffba37}.xsnSbKRs6MZbpP2odJGk{box-sizing:border-box;position:absolute;width:100%}.xsnSbKRs6MZbpP2odJGk.lSsJ_kvBTJOO0shULKLn{height:43.5%;top:28.3%}.xsnSbKRs6MZbpP2odJGk._6X0Zl0a0b8R2wCqGS_K{height:71.7%;top:11.5%}@keyframes TgYAVlLOGfJ_hl3TBdkC{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.X_Bq5FImnGbO6TLe3Len{align-items:center;display:flex;height:100%;justify-content:center;line-height:0;text-align:center}.WPX6_jcjLpB6aH420ZCd{animation:TgYAVlLOGfJ_hl3TBdkC 1.5s infinite}.bPwt8l_jKvlB2llQ7azY{height:35.71px;width:35.71px}.bPwt8l_jKvlB2llQ7azY use{fill:#333b40}.Ds2gos19dHtdm4Aer1pq{display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%}.x_r8eQXclQHy5Jjno7pU{display:block;height:100%;margin:auto;position:absolute}.IpX4dJbHat9i3luoCwef{align-items:start;background-color:#fff;border-radius:.3em;box-shadow:0 8px 15px #333b401a;box-sizing:border-box;color:#333b40;display:flex;font-family:sans-serif;font-size:16px;font-size:var(--message-font-size);font-weight:900;justify-content:start;left:50%;padding:.4em 0;position:absolute;text-align:center}.a_0VmnisbKCGWfubHrmj{margin-bottom:50px;top:4.6%;transform:translate(-50%);width:90%}.CqNtyAmFAcDIeu8mRGPD{top:5.5%;transform:translate(-50%);width:51.25%}.rlF15FcuMGotbEHYe5KW{align-items:start;font-size:calc(var(--message-font-size) + 3px)}._CvVxyqwMB2D7fkKx_NZ{display:flex;justify-content:center;order:1;width:14%}._znJxLRvhRnuCU0KBY3_{order:2;width:72%}._2_U2DYHedfGUyvS1oS5{display:flex;flex-direction:column;overflow:hidden;position:relative}.mteIzegCA0cNMXt96BYN{position:relative}.Va8swWS5S29Uvou7UNnc{height:100%;position:absolute;width:100%}
package/index.d.ts ADDED
@@ -0,0 +1,181 @@
1
+ declare module '@getyoti/react-face-capture' {
2
+ import * as React from 'react';
3
+
4
+ /**
5
+ * Error codes used by the Face Capture.
6
+ */
7
+ export enum ERROR_CODE {
8
+ NO_CAMERA_PERMISSION = 'NO_CAMERA_PERMISSION',
9
+ NO_CAMERA = 'NO_CAMERA',
10
+ UNSUPPORTED_BROWSER = 'UNSUPPORTED_BROWSER',
11
+ OVERCONSTRAINED = 'OVERCONSTRAINED',
12
+ GENERIC_CAMERA_ERROR = 'GENERIC_CAMERA_ERROR',
13
+ FACE_DETECTION_INIT_ERROR = 'FACE_DETECTION_INIT_ERROR',
14
+ CAPTURE_LOAD_ERROR = 'CAPTURE_LOAD_ERROR',
15
+ INTERNAL_ERROR = 'INTERNAL_ERROR',
16
+ }
17
+
18
+ /**
19
+ * Capture modes supported by the Face Capture.
20
+ */
21
+ export enum CAPTURE_METHOD {
22
+ MANUAL = 'manual',
23
+ AUTO = 'auto',
24
+ }
25
+
26
+ /**
27
+ * Image formats supported by the Face Capture.
28
+ */
29
+ export enum FORMAT_TYPE {
30
+ PNG = 'png',
31
+ JPEG = 'jpeg',
32
+ }
33
+
34
+ /**
35
+ * Image types supported by the Face Capture.
36
+ */
37
+ export enum IMAGE_TYPE {
38
+ ORIGINAL = 'original',
39
+ CROPPED = 'cropped',
40
+ }
41
+
42
+ /**
43
+ * Quality types supported by the Face Capture for the JPEG encoding.
44
+ */
45
+ export enum QUALITY_TYPE {
46
+ HIGH = 'high',
47
+ MEDIUM = 'medium',
48
+ LOW = 'low',
49
+ }
50
+
51
+ /**
52
+ * Scenarios in which the countdown will be used.
53
+ */
54
+ export enum COUNTDOWN_MODES {
55
+ ALWAYS = 'always',
56
+ ONLY_MOBILE = 'only_mobile',
57
+ ONLY_DESKTOP = 'only_desktop',
58
+ NEVER = 'never',
59
+ }
60
+
61
+ /**
62
+ * Politeness setting of the live region supported by the Face Capture.
63
+ */
64
+ export enum A11Y_LIVE_REGION_MODE {
65
+ ASSERTIVE = 'assertive',
66
+ POLITE = 'polite',
67
+ }
68
+
69
+ /**
70
+ * Image resolutions supported by the Face Capture.
71
+ */
72
+ export enum RESOLUTION_TYPE {
73
+ HD = 'hd',
74
+ FULL_HD = 'full_hd',
75
+ }
76
+
77
+ /**
78
+ * Languages supported by the Face Capture.
79
+ */
80
+ export enum LANGUAGE_CODE {
81
+ AR = 'ar',
82
+ CS = 'cs',
83
+ DA = 'da',
84
+ DE = 'de',
85
+ EN = 'en',
86
+ ES = 'es',
87
+ ES_419 = 'es-419',
88
+ ET = 'et',
89
+ FI = 'fi',
90
+ FR = 'fr',
91
+ HE = 'he',
92
+ HI = 'hi',
93
+ HY = 'hy',
94
+ ID = 'id',
95
+ IT = 'it',
96
+ JA = 'ja',
97
+ KO = 'ko',
98
+ LT = 'lt',
99
+ LV = 'lv',
100
+ MS = 'ms',
101
+ NB = 'nb',
102
+ NL = 'nl',
103
+ PL = 'pl',
104
+ PT = 'pt',
105
+ RO = 'ro',
106
+ RU = 'ru',
107
+ SV = 'sv',
108
+ TH = 'th',
109
+ TR = 'tr',
110
+ UK = 'uk',
111
+ UR = 'ur',
112
+ VI = 'vi',
113
+ }
114
+
115
+ /**
116
+ * Secure information the Face Capture will provide as result when it takes a picture (onSuccess callback). Only when the secure prop is set to true.
117
+ */
118
+ export interface Secure {
119
+ version: string;
120
+ token: string;
121
+ signature: string;
122
+ }
123
+
124
+ /**
125
+ * Result entity the FCM will return on the onSuccess callback.
126
+ */
127
+ export interface FCMResult {
128
+ img: string;
129
+ secure?: Secure;
130
+ }
131
+
132
+ /**
133
+ * Face Capture properties.
134
+ */
135
+ export interface FaceCaptureProps {
136
+ /** Root url where assets for the face detection are located. */
137
+ faceCaptureAssetsRootUrl: string;
138
+ /** Capture method to take the photo: by clicking a button or auto-capture. (default:auto) */
139
+ captureMethod?: CAPTURE_METHOD;
140
+ /** If true, the face capture module will use the secure mode. (default:false) */
141
+ secure?: boolean;
142
+ /** Callback called once the result (capture) is complete. */
143
+ onSuccess: (e: FCMResult) => void;
144
+ /** Callback called when there is an error. */
145
+ onError?: (e: ERROR_CODE) => void;
146
+ /** Callback called when the face capture module is ready to take images. */
147
+ onReadyForCapture?: () => void;
148
+ /** Optional use of the face overlay (default: true) */
149
+ showOverlay?: boolean;
150
+ /** Image resolution constraints passed to getUserMedia. (default:HD) */
151
+ resolutionType?: RESOLUTION_TYPE;
152
+ /** Image format type. (default:jpeg) */
153
+ format?: FORMAT_TYPE;
154
+ /** Custom UI of the manual capture button. It uses onClick and disabled as props */
155
+ CustomManualButton?: (props: any) => JSX.Element;
156
+ /** Custom UI of the consent button. It uses onClick and disabled as props */
157
+ CustomConsentButton?: (props: any) => JSX.Element;
158
+ /** Indicates when the countdown will be used. Note: It's only used if captureMethod is set to manual. (default:never) */
159
+ countdownMode?: COUNTDOWN_MODES;
160
+ /** imageType select if the image will be the original or it will be cropped in order to improve the timing
161
+ response when processing the image in the API call. (default:original) */
162
+ imageType?: IMAGE_TYPE;
163
+ /** Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). (default:high) */
164
+ qualityType?: QUALITY_TYPE;
165
+ /** The language code to set the language of the feedback messages. (default:en) */
166
+ language?: LANGUAGE_CODE;
167
+ /** Determines the politeness setting of the live region used to read out prompts for screen reader users. (default:polite) */
168
+ a11yLiveRegionMode?: A11Y_LIVE_REGION_MODE;
169
+ /** isConsentRequired Adds a step to click a button to ensure the user gives consent to the tool to start the face capture process. (default:false) */
170
+ isConsentRequired?: boolean;
171
+ /** Indicates if the face capture will use the manual capture method because of slow performance. (default:true) */
172
+ manualCaptureFallback?: boolean;
173
+ }
174
+
175
+ /**
176
+ * Module to capture a face and return the output image.
177
+ */
178
+ const FaceCapture: React.FC<FaceCaptureProps>;
179
+
180
+ export default FaceCapture;
181
+ }