@getyoti/react-face-capture 1.0.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 +29 -0
- package/README.md +49 -46
- package/index.css +1 -1
- package/index.d.ts +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,34 @@
|
|
|
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
|
+
|
|
22
|
+
## v1.1.0
|
|
23
|
+
|
|
24
|
+
### New features
|
|
25
|
+
|
|
26
|
+
- New way to sign the `onSuccess` result in the secure mode.
|
|
27
|
+
|
|
28
|
+
### Fixes
|
|
29
|
+
|
|
30
|
+
- `faceCaptureAssetsRootUrl` is no longer typed as a required prop.
|
|
31
|
+
|
|
3
32
|
## v1.0.0
|
|
4
33
|
|
|
5
34
|
### New features
|
package/README.md
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
The purpose of this module is to capture a face and return the output image.
|
|
4
4
|
|
|
5
|
+
## CHANGELOG
|
|
6
|
+
|
|
7
|
+
Please check the [CHANGELOG](https://github.com/getyoti/web-fcm-demo/blob/main/docs/FCM-CHANGELOG.md)
|
|
8
|
+
to review release changes, issues, fixes, and possible breaking changes on Major releases.
|
|
9
|
+
|
|
5
10
|
## Pre-requisite to adopt the dependency
|
|
6
11
|
|
|
7
12
|
### Peer dependencies
|
|
@@ -17,14 +22,14 @@ The package depends on the following peer dependencies
|
|
|
17
22
|
|
|
18
23
|
<browserSupportTable>
|
|
19
24
|
|
|
20
|
-
| Browser | Versions
|
|
21
|
-
| ------- |
|
|
22
|
-
| and_chr |
|
|
23
|
-
| chrome |
|
|
24
|
-
| edge |
|
|
25
|
-
| firefox |
|
|
26
|
-
| ios_saf | 15.
|
|
27
|
-
| 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 |
|
|
28
33
|
|
|
29
34
|
</browserSupportTable>
|
|
30
35
|
|
|
@@ -44,7 +49,7 @@ Finally, some devices might experience poor performance when attempting to detec
|
|
|
44
49
|
npm i @getyoti/react-face-capture -S
|
|
45
50
|
```
|
|
46
51
|
|
|
47
|
-
|
|
52
|
+
### Import js and css
|
|
48
53
|
|
|
49
54
|
```
|
|
50
55
|
import FaceCapture from "@getyoti/react-face-capture"
|
|
@@ -68,25 +73,25 @@ new CopyPlugin([
|
|
|
68
73
|
|
|
69
74
|
### Props
|
|
70
75
|
|
|
71
|
-
| Property name
|
|
72
|
-
|
|
|
73
|
-
| captureMethod
|
|
74
|
-
| manualCaptureFallback
|
|
75
|
-
| countdownMode
|
|
76
|
-
| secure
|
|
77
|
-
| onSuccess
|
|
78
|
-
| onError
|
|
79
|
-
| onReadyForCapture
|
|
80
|
-
| showOverlay
|
|
81
|
-
| resolutionType
|
|
82
|
-
| format
|
|
83
|
-
| CustomManualButton
|
|
84
|
-
| CustomConsentButton
|
|
85
|
-
| imageType
|
|
86
|
-
| qualityType
|
|
87
|
-
| language
|
|
88
|
-
| a11yLiveRegionMode
|
|
89
|
-
| 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. |
|
|
90
95
|
| faceCaptureAssetsRootUrl | string | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration. |
|
|
91
96
|
|
|
92
97
|
**(\*)**
|
|
@@ -97,6 +102,7 @@ Current languages supported:
|
|
|
97
102
|
- `cs`: Czech
|
|
98
103
|
- `da`: Danish
|
|
99
104
|
- `de`: German
|
|
105
|
+
- `el`: Greek
|
|
100
106
|
- `es`: Spanish (Spain)
|
|
101
107
|
- `es-419`: Spanish (Latin America)
|
|
102
108
|
- `et`: Estonian
|
|
@@ -127,7 +133,7 @@ Current languages supported:
|
|
|
127
133
|
|
|
128
134
|
#### Language fallback
|
|
129
135
|
|
|
130
|
-
|
|
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):
|
|
131
137
|
|
|
132
138
|
- If no match, try the mainstream (es), by removing the region part (-es).
|
|
133
139
|
- If no mainstream, try any other available es-[region] sibling (example: es-419).
|
|
@@ -145,6 +151,8 @@ Mechanisnm used for the prop `language` to avoid issues when the value passed is
|
|
|
145
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. |
|
|
146
152
|
| `INTERNAL_ERROR` | Internal error. This can be due to a programming error, or the user using an old unsupported browser. |
|
|
147
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). |
|
|
148
156
|
|
|
149
157
|
The error codes can be imported as follow:
|
|
150
158
|
|
|
@@ -154,12 +162,12 @@ import { ERROR_CODE } from '@getyoti/react-face-capture';
|
|
|
154
162
|
|
|
155
163
|
#### Secure mode
|
|
156
164
|
|
|
157
|
-
The
|
|
165
|
+
The Secure mode allows [Yoti back-end
|
|
158
166
|
service](https://developers.yoti.com/age-estimation/integration-guide)
|
|
159
|
-
|
|
160
|
-
modified in any form. Note the
|
|
161
|
-
back-end
|
|
162
|
-
|
|
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
|
|
163
171
|
be returned in `onSuccess` callback:
|
|
164
172
|
|
|
165
173
|
```json
|
|
@@ -173,15 +181,8 @@ be returned in `onSuccess` callback:
|
|
|
173
181
|
}
|
|
174
182
|
```
|
|
175
183
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
1. Request for a session -> `(GET) https://api.yoti.com/ai/sm/v1/secure-fcm/<version>/token`
|
|
179
|
-
2. Request for the encrypted javascript module -> `(GET) https://api.yoti.com/ai/sm/v1/secure-fcm/<version>/module?s=<token>`
|
|
180
|
-
|
|
181
|
-
Where `<version>` is the current version of the FCM (It is embedded in the
|
|
182
|
-
module) and the `<token>` is the session token the first request returns.
|
|
183
|
-
|
|
184
|
-
|
|
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.
|
|
185
186
|
|
|
186
187
|
##### Possible issues
|
|
187
188
|
|
|
@@ -197,7 +198,7 @@ import FaceCapture from '@getyoti/react-face-capture';
|
|
|
197
198
|
import '@getyoti/react-face-capture/index.css';
|
|
198
199
|
|
|
199
200
|
export function App() {
|
|
200
|
-
const onSuccess = ({
|
|
201
|
+
const onSuccess = ({ img }) => console.log('Length = ', img.length);
|
|
201
202
|
const onError = (error) => console.log('Error =', error);
|
|
202
203
|
|
|
203
204
|
return <FaceCapture onSuccess={onSuccess} onError={onError} />;
|
|
@@ -255,6 +256,8 @@ In order to unmount the component, it is highly recommended to call the `Yoti.Fa
|
|
|
255
256
|
<div id="face-capture-module-root"></div>
|
|
256
257
|
```
|
|
257
258
|
|
|
258
|
-
##
|
|
259
|
+
## Debugging Yoti Face Capture Module
|
|
260
|
+
|
|
261
|
+
Yoti Face capture module is protected with code obfuscation techniques for security reasons.
|
|
259
262
|
|
|
260
|
-
|
|
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%}
|
package/index.d.ts
CHANGED
|
@@ -134,7 +134,7 @@ declare module '@getyoti/react-face-capture' {
|
|
|
134
134
|
*/
|
|
135
135
|
export interface FaceCaptureProps {
|
|
136
136
|
/** Root url where assets for the face detection are located. */
|
|
137
|
-
faceCaptureAssetsRootUrl
|
|
137
|
+
faceCaptureAssetsRootUrl?: string;
|
|
138
138
|
/** Capture method to take the photo: by clicking a button or auto-capture. (default:auto) */
|
|
139
139
|
captureMethod?: CAPTURE_METHOD;
|
|
140
140
|
/** If true, the face capture module will use the secure mode. (default:false) */
|