@getyoti/react-face-capture 1.1.0 → 1.2.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 +19 -0
- package/README.md +46 -44
- package/index.css +1 -1
- package/index.js +1 -1
- package/package.json +8 -8
- package/vanilla/index.css +1 -1
- package/vanilla/index.js +1 -1
- package/vanilla/index.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## v1.2.0
|
|
4
|
+
|
|
5
|
+
### New features
|
|
6
|
+
|
|
7
|
+
- Added two new error codes:
|
|
8
|
+
|
|
9
|
+
- `SECURE_SESSION_EXPIRED` is thrown when the secure session token has expired.
|
|
10
|
+
- `VIDEO_STREAM_INTERRUPTED` is thrown when the camera connection is lost after reaching the ready state.
|
|
11
|
+
|
|
12
|
+
- Implemented localisation languages:
|
|
13
|
+
|
|
14
|
+
- `el`: Greek
|
|
15
|
+
|
|
16
|
+
- Improve secure mode checks.
|
|
17
|
+
|
|
18
|
+
- Fix the error when the FCM component is unmounted if it uses the secure mode.
|
|
19
|
+
|
|
20
|
+
- Use the new Yoti colors for the button and overlay feedback.
|
|
21
|
+
|
|
3
22
|
## v1.1.0
|
|
4
23
|
|
|
5
24
|
### New features
|
package/README.md
CHANGED
|
@@ -22,14 +22,14 @@ The package depends on the following peer dependencies
|
|
|
22
22
|
|
|
23
23
|
<browserSupportTable>
|
|
24
24
|
|
|
25
|
-
| Browser | Versions
|
|
26
|
-
| ------- |
|
|
27
|
-
| and_chr |
|
|
28
|
-
| chrome |
|
|
29
|
-
| edge |
|
|
30
|
-
| firefox |
|
|
31
|
-
| ios_saf | 15.
|
|
32
|
-
| safari | 15.
|
|
25
|
+
| Browser | Versions |
|
|
26
|
+
| ------- | ------------------------ |
|
|
27
|
+
| and_chr | 104 |
|
|
28
|
+
| chrome | 105,104,103,102 |
|
|
29
|
+
| edge | 105,104 |
|
|
30
|
+
| firefox | 104,103,102,101 |
|
|
31
|
+
| ios_saf | 15.6,15.5,15.4 |
|
|
32
|
+
| safari | 15.6,15.5,15.4,15.2-15.3 |
|
|
33
33
|
|
|
34
34
|
</browserSupportTable>
|
|
35
35
|
|
|
@@ -49,7 +49,7 @@ Finally, some devices might experience poor performance when attempting to detec
|
|
|
49
49
|
npm i @getyoti/react-face-capture -S
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
### Import js and css
|
|
53
53
|
|
|
54
54
|
```
|
|
55
55
|
import FaceCapture from "@getyoti/react-face-capture"
|
|
@@ -73,25 +73,25 @@ new CopyPlugin([
|
|
|
73
73
|
|
|
74
74
|
### Props
|
|
75
75
|
|
|
76
|
-
| Property name
|
|
77
|
-
|
|
|
78
|
-
| captureMethod
|
|
79
|
-
| manualCaptureFallback
|
|
80
|
-
| countdownMode
|
|
81
|
-
| secure
|
|
82
|
-
| onSuccess
|
|
83
|
-
| onError
|
|
84
|
-
| onReadyForCapture
|
|
85
|
-
| showOverlay
|
|
86
|
-
| resolutionType
|
|
87
|
-
| format
|
|
88
|
-
| CustomManualButton
|
|
89
|
-
| CustomConsentButton
|
|
90
|
-
| imageType
|
|
91
|
-
| qualityType
|
|
92
|
-
| language
|
|
93
|
-
| a11yLiveRegionMode
|
|
94
|
-
| isConsentRequired
|
|
76
|
+
| Property name | Type | Default | Mand | Description |
|
|
77
|
+
| ------------------------ | ---------------------------------------------- | ---------------------- | ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
78
|
+
| captureMethod | String `manual/auto` | `auto` | - | Capture method to take the photo: by clicking a button or auto-capture. |
|
|
79
|
+
| 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. |
|
|
80
|
+
| 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`. |
|
|
81
|
+
| secure | Boolean | false | - | If `true`, the face capture module will use the [secure mode](#secure-mode) |
|
|
82
|
+
| 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)) |
|
|
83
|
+
| onError | Function | - | - | Callback called when there is an error. See Appendix for the list of error codes we currently support. |
|
|
84
|
+
| onReadyForCapture | Function | - | - | Callback called when the face capture module is ready to take images (Video feed and face scan are ready). |
|
|
85
|
+
| showOverlay | Boolean | `true` | - | Optional use of the face overlay. |
|
|
86
|
+
| resolutionType | String `hd/full_hd` | `hd` | - | Image resolution constraints passed to `getUserMedia`. |
|
|
87
|
+
| format | String | `jpeg` | - | Image format type. |
|
|
88
|
+
| CustomManualButton | Function | simple button | - | Custom UI of the manual capture button. It uses `onClick` and `disabled` as props. |
|
|
89
|
+
| CustomConsentButton | Function | simple button | - | Custom UI of the consent button. It uses `onClick` and `disabled` as props. |
|
|
90
|
+
| 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. |
|
|
91
|
+
| qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). |
|
|
92
|
+
| language | Language code (\*) | `en` | - | The language code to set the language of the feedback messages. |
|
|
93
|
+
| 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 |
|
|
94
|
+
| 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. |
|
|
95
95
|
| faceCaptureAssetsRootUrl | string | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration. |
|
|
96
96
|
|
|
97
97
|
**(\*)**
|
|
@@ -102,6 +102,7 @@ Current languages supported:
|
|
|
102
102
|
- `cs`: Czech
|
|
103
103
|
- `da`: Danish
|
|
104
104
|
- `de`: German
|
|
105
|
+
- `el`: Greek
|
|
105
106
|
- `es`: Spanish (Spain)
|
|
106
107
|
- `es-419`: Spanish (Latin America)
|
|
107
108
|
- `et`: Estonian
|
|
@@ -132,7 +133,7 @@ Current languages supported:
|
|
|
132
133
|
|
|
133
134
|
#### Language fallback
|
|
134
135
|
|
|
135
|
-
|
|
136
|
+
Mechanism used for the prop `language` to avoid issues when the value passed is wrong. Example: first try exact match (es-es or es-ES, ignore case):
|
|
136
137
|
|
|
137
138
|
- If no match, try the mainstream (es), by removing the region part (-es).
|
|
138
139
|
- If no mainstream, try any other available es-[region] sibling (example: es-419).
|
|
@@ -150,6 +151,8 @@ Mechanisnm used for the prop `language` to avoid issues when the value passed is
|
|
|
150
151
|
| `FACE_DETECTION_INIT_ERROR` | The face detection has failed to initialise. This usually means that the required model assets are missing from the host application. |
|
|
151
152
|
| `INTERNAL_ERROR` | Internal error. This can be due to a programming error, or the user using an old unsupported browser. |
|
|
152
153
|
| `CAPTURE_LOAD_ERROR` | The secure module could not be loaded. This usually means your token is not updated, or there is an error on the module provider. |
|
|
154
|
+
| `VIDEO_STREAM_INTERRUPTED` | The camera stream has stopped unexpectedly. |
|
|
155
|
+
| `SECURE_SESSION_EXPIRED` | The secure session has expired (the token expire field is older than the current time). |
|
|
153
156
|
|
|
154
157
|
The error codes can be imported as follow:
|
|
155
158
|
|
|
@@ -159,12 +162,12 @@ import { ERROR_CODE } from '@getyoti/react-face-capture';
|
|
|
159
162
|
|
|
160
163
|
#### Secure mode
|
|
161
164
|
|
|
162
|
-
The
|
|
165
|
+
The Secure mode allows [Yoti back-end
|
|
163
166
|
service](https://developers.yoti.com/age-estimation/integration-guide)
|
|
164
|
-
|
|
165
|
-
modified in any form. Note the
|
|
166
|
-
back-end
|
|
167
|
-
|
|
167
|
+
to verify that the image captured on client-side browser with the FCM hasn't been
|
|
168
|
+
modified in any form. Note, the secure mode of Yoti FCM makes a request to Yoti
|
|
169
|
+
back-end to download the encrypted capture package that takes the
|
|
170
|
+
photo and create the secure result request. The secure result information will
|
|
168
171
|
be returned in `onSuccess` callback:
|
|
169
172
|
|
|
170
173
|
```json
|
|
@@ -178,15 +181,8 @@ be returned in `onSuccess` callback:
|
|
|
178
181
|
}
|
|
179
182
|
```
|
|
180
183
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
1. Request for a session -> `(GET) https://api.yoti.com/ai/sm/v1/secure-fcm/<version>/token`
|
|
184
|
-
2. Request for the encrypted javascript module -> `(GET) https://api.yoti.com/ai/sm/v1/secure-fcm/<version>/module?s=<token>`
|
|
185
|
-
|
|
186
|
-
Where `<version>` is the current version of the FCM (It is embedded in the
|
|
187
|
-
module) and the `<token>` is the session token the first request returns.
|
|
188
|
-
|
|
189
|
-
|
|
184
|
+
`<fcm_version>` is the current version of FCM (embedded in the
|
|
185
|
+
module) and `<session_token>` is the session token generated from the request.
|
|
190
186
|
|
|
191
187
|
##### Possible issues
|
|
192
188
|
|
|
@@ -202,7 +198,7 @@ import FaceCapture from '@getyoti/react-face-capture';
|
|
|
202
198
|
import '@getyoti/react-face-capture/index.css';
|
|
203
199
|
|
|
204
200
|
export function App() {
|
|
205
|
-
const onSuccess = ({
|
|
201
|
+
const onSuccess = ({ img }) => console.log('Length = ', img.length);
|
|
206
202
|
const onError = (error) => console.log('Error =', error);
|
|
207
203
|
|
|
208
204
|
return <FaceCapture onSuccess={onSuccess} onError={onError} />;
|
|
@@ -259,3 +255,9 @@ In order to unmount the component, it is highly recommended to call the `Yoti.Fa
|
|
|
259
255
|
|
|
260
256
|
<div id="face-capture-module-root"></div>
|
|
261
257
|
```
|
|
258
|
+
|
|
259
|
+
## Debugging Yoti Face Capture Module
|
|
260
|
+
|
|
261
|
+
Yoti Face capture module is protected with code obfuscation techniques for security reasons.
|
|
262
|
+
|
|
263
|
+
This protection is present in both secure and non-secure mode, and it makes it mostly impossible to debug the module by using development tools on any browser, as the application will crash or keep looping right after the tool menu is opened.
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.mtcvKOHbFdRFpAH7ZHwW{align-items:center;background-color:#
|
|
1
|
+
.mtcvKOHbFdRFpAH7ZHwW{align-items:center;background-color:#2875bc;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:#27619b}.mtcvKOHbFdRFpAH7ZHwW:disabled{background-color:#6ba7df}.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{height:auto;transform:scaleX(-1);width:100%}._cYL8AOtgycwZXRT1onC{min-height:300px}.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:#546072;height:100%;left:0;position:absolute;right:0}.HPEPfcUpwWOVOJSPP9R_._0fft05LhDRetV8QdNSI{color:#1b9f4a}.HPEPfcUpwWOVOJSPP9R_.JHe4OqVjOOuBZXJn_axE{color:#db970e}.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%}
|