@getyoti/react-face-capture 1.4.0 → 2.0.0-beta.1
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 +92 -2
- package/README.md +128 -86
- package/index.d.ts +25 -32
- package/index.js +69 -2
- package/index.js.LICENSE.txt +391 -36
- package/package.json +12 -74
- package/vanilla/index.js +98 -3
- package/vanilla/index.js.LICENSE.txt +219 -34
- package/vanilla/index.js.map +1 -1
- package/index.css +0 -1
- package/vanilla/index.css +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,95 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## v2.0.0-beta.1
|
|
4
|
+
|
|
5
|
+
### New features
|
|
6
|
+
|
|
7
|
+
- The secure mode returns an encrypted image by default now. Use `encryptImage`
|
|
8
|
+
property to return the base64 image in the secure payload. The face capture
|
|
9
|
+
also provides a new property to get the base64 image preview in the `onSuccess`
|
|
10
|
+
callback: `returnPreviewImage`.
|
|
11
|
+
|
|
12
|
+
- New property to identify your Yoti Hub application: `clientSdkId`.
|
|
13
|
+
|
|
14
|
+
- Secure module deprecation and end support handling.
|
|
15
|
+
|
|
16
|
+
- The Face Capture will log a warning message when the secure module version in use
|
|
17
|
+
becomes deprecated. It will return the error `VERSION_NO_LONGER_AVAILABLE`
|
|
18
|
+
in the `onError` callback when the support has ended.
|
|
19
|
+
|
|
20
|
+
- New property to allow auto-reload of the secure session before the session expires: `autoSessionReload`.
|
|
21
|
+
|
|
22
|
+
- New property to let the user handle errors by retrying several times: `userRetryError`.
|
|
23
|
+
|
|
24
|
+
- New design:
|
|
25
|
+
|
|
26
|
+
- The Face Capture will show a loading screen when it returns a valid
|
|
27
|
+
image in the `onSuccess` callback or an error screen if it runs the
|
|
28
|
+
`onError` callback.
|
|
29
|
+
|
|
30
|
+
- New Guidance screen that will be shown before the webcam loads. It can be hidden by providing the property `showInitialGuidance` with value `false`
|
|
31
|
+
|
|
32
|
+
- New Get Help button in the webcam view. It can be hidden by providing the property `showGetHelpButton` with value `false`.
|
|
33
|
+
|
|
34
|
+
- New font family (it can still be changed by `--fcm-font-family` css
|
|
35
|
+
variable).
|
|
36
|
+
|
|
37
|
+
- Improved manual mode user feedback.
|
|
38
|
+
|
|
39
|
+
- Improved Face Capture responsiveness.
|
|
40
|
+
|
|
41
|
+
- It is possible to customize some styles by using css variables. These are
|
|
42
|
+
the properties that can be changed:
|
|
43
|
+
|
|
44
|
+
- `--fcm-primary-button-background-color` changes the background color in
|
|
45
|
+
primary buttons (Take picture, Try again, ... ).
|
|
46
|
+
- `--fcm-primary-button-background-color-hover` changes the background
|
|
47
|
+
color in primary buttons (Take picture, Try again, ... ) when is hovered.
|
|
48
|
+
- `--fcm-primary-button-text-color` changes the text color in primary
|
|
49
|
+
buttons (Take picture, Try again, ... ).
|
|
50
|
+
- `--fcm-secondary-button-background-color` changes the background color in
|
|
51
|
+
primary buttons (Get help).
|
|
52
|
+
- `--fcm-secondary-button-text-color` changes the text color in secondary
|
|
53
|
+
buttons (Get help).
|
|
54
|
+
- `--fcm-secondary-button-text-color-hover` changes the text color in
|
|
55
|
+
secondary buttons (Get help) when the button is hovered.
|
|
56
|
+
- `--fcm-prompt-text-color` changes the text color in the prompt.
|
|
57
|
+
|
|
58
|
+
- The countdown functionality has been removed.
|
|
59
|
+
|
|
60
|
+
- Implemented localisation languages:
|
|
61
|
+
|
|
62
|
+
- `tl-PH`: Tagalog
|
|
63
|
+
- `zh-CN`: Chinese - Simplified
|
|
64
|
+
|
|
65
|
+
- The Face Capture style has been encapsulated using shadow Dom. From now on, the only style customization available is through the CSS variables listed in the documentation.
|
|
66
|
+
|
|
67
|
+
### Breaking changes
|
|
68
|
+
|
|
69
|
+
- The `onSuccess` callback definition changed to (`(payload: FCMPayload, base64PreviewImage?: string) => {}`).
|
|
70
|
+
|
|
71
|
+
- The type of the `payload` argument changed from `FCMResult` to `FCMPayload`.
|
|
72
|
+
|
|
73
|
+
- Secure mode is now the default mode for the Face Capture (`secure` property value is now `true` by default).
|
|
74
|
+
|
|
75
|
+
- The new property `clientSdkId` is required when using secure mode. So will be required by default.
|
|
76
|
+
|
|
77
|
+
- The property `buttonSize` was removed.
|
|
78
|
+
|
|
79
|
+
- The property `isConsentRequired` was removed.
|
|
80
|
+
|
|
81
|
+
- The properties `CustomManualButton` and `CustomConsentButton` were removed.
|
|
82
|
+
|
|
83
|
+
- The property `countdownMode` was removed.
|
|
84
|
+
|
|
85
|
+
- The minimum size for the Face Capture in landscape view is 576px.
|
|
86
|
+
|
|
87
|
+
#### Peer dependencies updates
|
|
88
|
+
|
|
89
|
+
- Updated `react` dependency version to be at least `16.14.0` and a maximum of `18.2.0`.
|
|
90
|
+
|
|
91
|
+
- Updated `react-dom` dependency version to be at least `16.14.0` and a maximum of `18.2.0`.
|
|
92
|
+
|
|
3
93
|
## v1.4.0
|
|
4
94
|
|
|
5
95
|
### New features
|
|
@@ -7,7 +97,7 @@
|
|
|
7
97
|
- If the module takes more than 15 seconds to be downloaded, the onError callback will be called with error code `EXCEEDED_TIME_TO_LOAD`. You can modify the timeout to call `onError` by changing the `loadTimeout` property.
|
|
8
98
|
- Implemented localisation languages:
|
|
9
99
|
|
|
10
|
-
- `sk-SK`:
|
|
100
|
+
- `sk-SK`: Slovak
|
|
11
101
|
- `hu-HU`: Hungarian
|
|
12
102
|
|
|
13
103
|
- The translations are available for the manual button.
|
|
@@ -109,7 +199,7 @@
|
|
|
109
199
|
|
|
110
200
|
- Fix the error when the FCM component is unmounted if it uses the secure mode.
|
|
111
201
|
|
|
112
|
-
- Use the new Yoti
|
|
202
|
+
- Use the new Yoti colors for the button and overlay feedback.
|
|
113
203
|
|
|
114
204
|
## v1.1.0
|
|
115
205
|
|
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Yoti Face
|
|
1
|
+
# Yoti Face Capture integration
|
|
2
2
|
|
|
3
3
|
The purpose of this module is to capture a face and return the output image.
|
|
4
4
|
|
|
@@ -14,8 +14,8 @@ to review release changes, issues, fixes, and possible breaking changes on Major
|
|
|
14
14
|
The package depends on the following peer dependencies
|
|
15
15
|
|
|
16
16
|
```
|
|
17
|
-
"react": ">=16.
|
|
18
|
-
"react-dom": ">=16.
|
|
17
|
+
"react": ">=16.14.0 <=18.2.0",
|
|
18
|
+
"react-dom": ">=16.14.0 <=18.2.0"
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
### Browser support
|
|
@@ -24,12 +24,12 @@ The package depends on the following peer dependencies
|
|
|
24
24
|
|
|
25
25
|
| Browser | Versions |
|
|
26
26
|
| ------- | ------------------- |
|
|
27
|
-
| and_chr |
|
|
28
|
-
| chrome |
|
|
29
|
-
| edge |
|
|
30
|
-
| firefox |
|
|
31
|
-
| ios_saf |
|
|
32
|
-
| safari |
|
|
27
|
+
| and_chr | 119 |
|
|
28
|
+
| chrome | 119,118,117,116 |
|
|
29
|
+
| edge | 119,118 |
|
|
30
|
+
| firefox | 119,118,117,116 |
|
|
31
|
+
| ios_saf | 17.1,17.0,16.6-16.7 |
|
|
32
|
+
| safari | 17.1,17.0,16.6,16.5 |
|
|
33
33
|
|
|
34
34
|
</browserSupportTable>
|
|
35
35
|
|
|
@@ -43,7 +43,7 @@ Finally, some devices might experience poor performance when attempting to detec
|
|
|
43
43
|
|
|
44
44
|
_Note: `iPhone 7` and older will take a longer time to load the face detector model than more recent devices, and in most cases, will fall back from auto to manual capture mode. If this behaviour is not desired, as an integrator you could disable the manual capture mode altogether, implementing manualCaptureFallback = false. Note, this could increase the load time for old and low-quality devices._
|
|
45
45
|
|
|
46
|
-
## React
|
|
46
|
+
## React Face Capture
|
|
47
47
|
|
|
48
48
|
### Install dependency
|
|
49
49
|
|
|
@@ -55,12 +55,11 @@ npm i @getyoti/react-face-capture -S
|
|
|
55
55
|
|
|
56
56
|
```
|
|
57
57
|
import FaceCapture from "@getyoti/react-face-capture"
|
|
58
|
-
import "@getyoti/react-face-capture/index.css"
|
|
59
58
|
```
|
|
60
59
|
|
|
61
60
|
### Copy assets
|
|
62
61
|
|
|
63
|
-
**Assets** are not included in the javascript bundle.
|
|
62
|
+
**Assets** are not included in the javascript bundle. To have the components to work correctly, you will need to copy library assets from `./node_modules/@getyoti/react-face-capture/assets` folder into your output assets folder.
|
|
64
63
|
|
|
65
64
|
For instance, in webpack you can use the plugin `copy-webpack-plugin` in the following way:
|
|
66
65
|
|
|
@@ -68,51 +67,67 @@ For instance, in webpack you can use the plugin `copy-webpack-plugin` in the fol
|
|
|
68
67
|
new CopyPlugin([
|
|
69
68
|
{
|
|
70
69
|
from: path.resolve(__dirname, './node_modules/@getyoti/react-face-capture/assets'),
|
|
71
|
-
to: path.resolve(__dirname, './assets')
|
|
70
|
+
to: path.resolve(__dirname, './dist/assets')
|
|
72
71
|
}
|
|
73
72
|
]),
|
|
74
73
|
```
|
|
75
74
|
|
|
76
75
|
### CSS Customization
|
|
77
76
|
|
|
78
|
-
Now it is possible to
|
|
77
|
+
Now, it is possible to customize the style by changing the following CSS properties:
|
|
79
78
|
|
|
80
|
-
-
|
|
81
|
-
-
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
-
|
|
85
|
-
-
|
|
79
|
+
- `--fcm-primary-button-background-color` changes the background color in primary buttons (Take picture, Try again, ... ).
|
|
80
|
+
- `--fcm-primary-button-background-color-hover` changes the background color in primary buttons (Take picture, Try again, ... ) when is hovered.
|
|
81
|
+
- `--fcm-primary-button-text-color` changes the text color in primary buttons (Take picture, Try again, ... ).
|
|
82
|
+
- `--fcm-secondary-button-background-color` changes the background color in primary buttons (Get help).
|
|
83
|
+
- `--fcm-secondary-button-text-color` changes the text color in secondary buttons (Get help).
|
|
84
|
+
- `--fcm-secondary-button-text-color-hover` changes the text color in secondary buttons (Get help) when the button is hovered.
|
|
85
|
+
- `--fcm-font-family` sets the font family.
|
|
86
|
+
- `--fcm-prompt-text-color` changes the text color in the prompt.
|
|
87
|
+
- `--fcm-prompt-background-color` sets the background color in the message prompt.
|
|
88
|
+
|
|
89
|
+
The CSS custom properties must be defined using the `:root` CSS selector. Here is an example:
|
|
90
|
+
|
|
91
|
+
```css
|
|
92
|
+
:root {
|
|
93
|
+
--fcm-primary-button-background-color: red;
|
|
94
|
+
}
|
|
95
|
+
```
|
|
86
96
|
|
|
87
97
|
> **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.
|
|
88
98
|
> In addition, we can't guarantee external customizations support on new versions of the library
|
|
89
99
|
|
|
90
|
-
###
|
|
91
|
-
|
|
92
|
-
| Property name
|
|
93
|
-
|
|
|
94
|
-
| captureMethod
|
|
95
|
-
| manualCaptureFallback
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
| onSuccess
|
|
99
|
-
| onError
|
|
100
|
-
| onReadyForCapture
|
|
101
|
-
| showOverlay
|
|
102
|
-
| resolutionType
|
|
103
|
-
| format
|
|
104
|
-
|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
100
|
+
### Properties
|
|
101
|
+
|
|
102
|
+
| Property name | Type | Default | Mandatory | Description |
|
|
103
|
+
| ------------------------ | ------------------------------------- | ---------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
104
|
+
| captureMethod | String `manual/auto` | `auto` | - | Capture method to take the photo: by clicking a button or auto-capture. |
|
|
105
|
+
| 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. |
|
|
106
|
+
| secure | Boolean | `true` | - | If `true`, the Face Capture will use the [secure mode](#secure-mode) |
|
|
107
|
+
| clientSdkId | String | - | Yes\* | Identifies your Yoti Hub application. This value can be found in the Hub, within your application section, in the keys tab. |
|
|
108
|
+
| 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`. |
|
|
109
|
+
| onError | Function | - | - | Callback called when there is an error. See Appendix for the list of error codes we currently support. |
|
|
110
|
+
| onReadyForCapture | Function | - | - | Callback called when the Face Capture is ready to take images (camera feed and face scan are ready). |
|
|
111
|
+
| showOverlay | Boolean | `true` | - | Optional use of the face overlay. |
|
|
112
|
+
| resolutionType | String `hd/full_hd` | `hd` | - | Image resolution constraints passed to `getUserMedia`. |
|
|
113
|
+
| format | String `jpeg/png` | `jpeg` | - | Image format type. |
|
|
114
|
+
| 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. |
|
|
115
|
+
| qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). |
|
|
116
|
+
| language | Language code \*\* | `en` | - | The language code to set the Face Capture language. |
|
|
117
|
+
| 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 |
|
|
118
|
+
| showInitialGuidance | Boolean | `true` | - | Determines if the help component will show or not the help section. |
|
|
119
|
+
| faceCaptureAssetsRootUrl | String | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration. |
|
|
120
|
+
| 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. |
|
|
121
|
+
| showGetHelpButton | Boolean | `true` | - | If the Get Help button is shown or not. |
|
|
122
|
+
| autoSessionReload | Boolean | `true` | - | Automatically renews sessions after they expire. |
|
|
123
|
+
| userRetryError | Boolean | `true` | - | Gives the possibility to users to retry several times when an error occurs. |
|
|
124
|
+
| returnPreviewImage | Boolean | `false` | - | If the image captured (`base64PreviewImage`) will be provided in the `onSuccess` callback. |
|
|
125
|
+
| encryptImage | Boolean | `true` | - | If the face capture will encrypt the image inside the payload argument on the `onSuccess` callback when it runs the secure mode. |
|
|
114
126
|
|
|
115
127
|
**(\*)**
|
|
128
|
+
This field is only mandatory when using the secure mode. (secure = true)
|
|
129
|
+
|
|
130
|
+
**(\*\*)**
|
|
116
131
|
Current languages supported:
|
|
117
132
|
|
|
118
133
|
- `en-GB`: English
|
|
@@ -122,7 +137,7 @@ Current languages supported:
|
|
|
122
137
|
- `da-DK`: Danish
|
|
123
138
|
- `de-DE`: German
|
|
124
139
|
- `el-GR`: Greek
|
|
125
|
-
- `es`: Spanish (Spain)
|
|
140
|
+
- `es`: Spanish (Spain) \*\*\*
|
|
126
141
|
- `es-ES`: Spanish (Spain)
|
|
127
142
|
- `es-419`: Spanish (Latin America)
|
|
128
143
|
- `et-EE`: Estonian
|
|
@@ -143,45 +158,49 @@ Current languages supported:
|
|
|
143
158
|
- `nb-NO`: Norwegian
|
|
144
159
|
- `nl-NL`: Dutch
|
|
145
160
|
- `pl-PL`: Polish
|
|
146
|
-
- `pt`: Portuguese (Portugal)
|
|
161
|
+
- `pt`: Portuguese (Portugal) \*\*\*
|
|
147
162
|
- `pt-BR`: Portuguese (Brazil)
|
|
148
163
|
- `pt-PT`: Portuguese (Portugal)
|
|
149
164
|
- `ro-RO`: Romanian
|
|
150
165
|
- `ru-RU`: Russian
|
|
151
|
-
- `sk-SK`:
|
|
166
|
+
- `sk-SK`: Slovak
|
|
152
167
|
- `sv-SE`: Swedish
|
|
153
168
|
- `th-TH`: Thai
|
|
169
|
+
- `tl-PH`: Tagalog
|
|
154
170
|
- `tr-TR`: Turkish
|
|
155
171
|
- `uk-UA`: Ukrainian
|
|
156
172
|
- `ur-PK`: Urdu
|
|
157
173
|
- `vi-VN`: Vietnamese
|
|
174
|
+
- `zh-CN`: Chinese (Simplified)
|
|
158
175
|
|
|
159
|
-
**(
|
|
160
|
-
Language codes marked with
|
|
176
|
+
**(\*\*\*)**
|
|
177
|
+
Language codes marked with \*\*\* are listed for disambiguation purposes on the fallback. They are exactly the same as their respective regional variants.
|
|
161
178
|
|
|
162
179
|
#### Language fallback
|
|
163
180
|
|
|
164
|
-
A mechanism used for the
|
|
181
|
+
A mechanism used for the property `language` to avoid issues when the value passed is wrong. Example: first try exact match (es-es or es-ES, ignore case):
|
|
165
182
|
|
|
166
183
|
- If there is no match, try the mainstream (es), by removing the region part (-es).
|
|
167
184
|
- If there is no mainstream, try any other available es-[region] sibling (example: es-419).
|
|
168
185
|
- If there is no regional sibling, use the default language: en.
|
|
169
186
|
|
|
170
|
-
####
|
|
171
|
-
|
|
172
|
-
| Error code
|
|
173
|
-
|
|
|
174
|
-
| `NO_CAMERA`
|
|
175
|
-
| `GENERIC_CAMERA_ERROR`
|
|
176
|
-
| `UNSUPPORTED_BROWSER`
|
|
177
|
-
| `NO_CAMERA_PERMISSION`
|
|
178
|
-
| `OVERCONSTRAINED`
|
|
179
|
-
| `FACE_DETECTION_INIT_ERROR`
|
|
180
|
-
| `INTERNAL_ERROR`
|
|
181
|
-
| `CAPTURE_LOAD_ERROR`
|
|
182
|
-
| `VIDEO_STREAM_INTERRUPTED`
|
|
183
|
-
| `SECURE_SESSION_EXPIRED`
|
|
184
|
-
| `EXCEEDED_TIME_TO_LOAD`
|
|
187
|
+
#### Error codes
|
|
188
|
+
|
|
189
|
+
| Error code | Description |
|
|
190
|
+
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
191
|
+
| `NO_CAMERA` | No camera detected on the user’s device. |
|
|
192
|
+
| `GENERIC_CAMERA_ERROR` | Undefined camera error. The reasons can be [various](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and inconsistent across browsers. |
|
|
193
|
+
| `UNSUPPORTED_BROWSER` | The user’s browser is not supported. This could be because the API needed for the camera interaction is missing. `Note: Older Non-Safari browsers on iOS fall into this category.` |
|
|
194
|
+
| `NO_CAMERA_PERMISSION` | The user rejected the camera permission. |
|
|
195
|
+
| `OVERCONSTRAINED` | The camera constraints are not compatible with available camera devices. `Note: One recovery option could be to use hd resolution.` |
|
|
196
|
+
| `FACE_DETECTION_INIT_ERROR` | The face detection has failed to initialise. This usually means the required model assets are missing from the host application. |
|
|
197
|
+
| `INTERNAL_ERROR` | This can be due to a programming error, or the user using an old unsupported browser. |
|
|
198
|
+
| `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. |
|
|
199
|
+
| `VIDEO_STREAM_INTERRUPTED` | The camera stream has stopped unexpectedly. |
|
|
200
|
+
| `SECURE_SESSION_EXPIRED` | The secure session has expired (the token expire field is older than the current time). |
|
|
201
|
+
| `EXCEEDED_TIME_TO_LOAD` | The module is taking more than the time set in the FaceCapture component to load. The property to change that value is `loadTimeout` which by default is 15 seconds. |
|
|
202
|
+
| `VERSION_NO_LONGER_AVAILABLE` | The requested Face Capture secure module is no longer available. Note that the FCM will log a warning in the console if the module was deprecated. |
|
|
203
|
+
| `INVALID_SECURE_CLIENT_SDK_ID` | The client SDK ID has a wrong format, it isn't included on the internal product mapping or there is a mismatch between the SDK from the JWT and the one related to the internal product contained in the BE request. |
|
|
185
204
|
|
|
186
205
|
The error codes can be imported as follow:
|
|
187
206
|
|
|
@@ -197,7 +216,7 @@ to verify that the image captured on the client-side browser with the FCM hasn't
|
|
|
197
216
|
modified in any form. Note, the secure mode of Yoti FCM makes a request to Yoti
|
|
198
217
|
back-end to download the encrypted capture package that takes the
|
|
199
218
|
photo and create the secure result request. The secure result information will
|
|
200
|
-
be returned in `onSuccess` callback:
|
|
219
|
+
be returned in `onSuccess` callback (`payload` argument):
|
|
201
220
|
|
|
202
221
|
```json
|
|
203
222
|
{
|
|
@@ -216,60 +235,57 @@ module) and `<session_token>` is the session token generated from the request.
|
|
|
216
235
|
|
|
217
236
|
##### Possible issues
|
|
218
237
|
|
|
219
|
-
The secure mode requests Yoti
|
|
220
|
-
on demand
|
|
221
|
-
your
|
|
222
|
-
cross-site scripting like
|
|
238
|
+
The secure mode requests Yoti services to download the encrypted module
|
|
239
|
+
on demand, therefore the client must be able to handle those requests. Keep in mind if
|
|
240
|
+
your client uses any mechanism to prevent data injection attacks or
|
|
241
|
+
cross-site scripting like CSP you will need to allow the FCM requests.
|
|
223
242
|
|
|
224
243
|
##### Virtual cameras
|
|
225
244
|
|
|
226
|
-
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
|
|
245
|
+
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.
|
|
227
246
|
|
|
228
247
|
### Example
|
|
229
248
|
|
|
230
249
|
```js
|
|
231
250
|
import FaceCapture from '@getyoti/react-face-capture';
|
|
232
|
-
import '@getyoti/react-face-capture/index.css';
|
|
233
251
|
|
|
234
252
|
export function App() {
|
|
235
|
-
const onSuccess = (
|
|
253
|
+
const onSuccess = (payload, base64PreviewImage) => console.log('Length = ', payload.img.length);
|
|
236
254
|
const onError = (error) => console.log('Error =', error);
|
|
237
255
|
|
|
238
|
-
return <FaceCapture onSuccess={onSuccess} onError={onError} />;
|
|
256
|
+
return <FaceCapture returnPreviewImage onSuccess={onSuccess} onError={onError} />;
|
|
239
257
|
}
|
|
240
258
|
```
|
|
241
259
|
|
|
242
|
-
## Face
|
|
260
|
+
## Face Capture vanilla
|
|
243
261
|
|
|
244
|
-
|
|
262
|
+
For projects without a React tech stack, you can use the Face Capture vanilla version.
|
|
245
263
|
When you install the library on your machine, It's located inside the folder `vanilla`.
|
|
246
264
|
|
|
247
265
|
Add the package to your codebase and serve the static assets:
|
|
248
266
|
|
|
249
|
-
### 1.
|
|
267
|
+
### 1. Serve package static assets
|
|
250
268
|
|
|
251
269
|
```bash
|
|
252
270
|
|
|
253
271
|
/@getyoti/react-face-capture/vanilla/assets/face-capture/
|
|
254
|
-
/@getyoti/react-face-capture/vanilla/index.css
|
|
255
272
|
/@getyoti/react-face-capture/vanilla/index.js
|
|
256
273
|
```
|
|
257
274
|
|
|
258
|
-
### 2. Add Face
|
|
275
|
+
### 2. Add Face Capture script
|
|
259
276
|
|
|
260
|
-
Inside the page you want to have
|
|
277
|
+
Inside the page you want to have Face Capture, add Face Capture scripts and styles like in the example below.
|
|
261
278
|
`faceCaptureAssetsRootUrl` is a property you can use to instruct the library where neural net files are served otherwise we look for the files relative to the page location `assets/face-capture/`.
|
|
262
279
|
|
|
263
|
-
### 3. Render
|
|
280
|
+
### 3. Render Face Capture
|
|
264
281
|
|
|
265
|
-
Our scripts will give you access to `Yoti.FaceCaptureModule.render` where you can set 2 parameters. The first parameter is the
|
|
282
|
+
Our scripts will give you access to `Yoti.FaceCaptureModule.render` where you can set 2 parameters. The first parameter is the properties, the same ones used in the integration with react. The second parameter is a reference to HTML DOM, so we know where we can render the UI.
|
|
266
283
|
|
|
267
284
|
In order to unmount the component, it is highly recommended to call the `Yoti.FaceCaptureModule.unmount` function instead of destroying the HTML element, which could lead to some issues or misbehaviour.
|
|
268
285
|
|
|
269
286
|
**index.html**
|
|
270
287
|
|
|
271
288
|
```html
|
|
272
|
-
<link rel="stylesheet" href="/@getyoti/react-face-capture/vanilla/index.css" />
|
|
273
289
|
<script src="/@getyoti/react-face-capture/vanilla/index.js"></script>
|
|
274
290
|
<script>
|
|
275
291
|
const props = {
|
|
@@ -296,8 +312,34 @@ In order to unmount the component, it is highly recommended to call the `Yoti.Fa
|
|
|
296
312
|
<div id="face-capture-module-root"></div>
|
|
297
313
|
```
|
|
298
314
|
|
|
299
|
-
## Debugging Yoti Face Capture
|
|
315
|
+
## Debugging Yoti Face Capture
|
|
316
|
+
|
|
317
|
+
Yoti Face Capture is protected with code obfuscation techniques for security reasons.
|
|
318
|
+
|
|
319
|
+
This protection is present in both secure and non-secure modes and it makes it almost 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.
|
|
320
|
+
|
|
321
|
+
## Troubleshooting
|
|
322
|
+
|
|
323
|
+
### NextJS
|
|
324
|
+
|
|
325
|
+
The Face Capture does not support server side rendering. It needs to be loaded
|
|
326
|
+
dynamically:
|
|
327
|
+
|
|
328
|
+
```jsx
|
|
329
|
+
import dynamic from 'next/dynamic';
|
|
330
|
+
const FaceCapture = dynamic(() => import('@getyoti/react-face-capture'), {
|
|
331
|
+
ssr: false,
|
|
332
|
+
});
|
|
333
|
+
|
|
334
|
+
export default function CustomFCM(props) {
|
|
335
|
+
return <FaceCapture {...props} />;
|
|
336
|
+
}
|
|
337
|
+
```
|
|
300
338
|
|
|
301
|
-
|
|
339
|
+
### Webpack
|
|
302
340
|
|
|
303
|
-
|
|
341
|
+
The secure mode loads secure javascript code from server side on demand. The
|
|
342
|
+
Face Capture uses the comment `/* webpackIgnore: true */` order to tell webpack
|
|
343
|
+
that it does not need to resolve the dependency locally so this comment cannot
|
|
344
|
+
be removed before webpack builds the final javascript files for the web
|
|
345
|
+
application.
|
package/index.d.ts
CHANGED
|
@@ -16,6 +16,8 @@ declare module '@getyoti/react-face-capture' {
|
|
|
16
16
|
VIDEO_STREAM_INTERRUPTED = 'VIDEO_STREAM_INTERRUPTED',
|
|
17
17
|
SECURE_SESSION_EXPIRED = 'SECURE_SESSION_EXPIRED',
|
|
18
18
|
EXCEEDED_TIME_TO_LOAD = 'EXCEEDED_TIME_TO_LOAD',
|
|
19
|
+
VERSION_NO_LONGER_AVAILABLE = 'VERSION_NO_LONGER_AVAILABLE',
|
|
20
|
+
INVALID_SECURE_CLIENT_SDK_ID = 'INVALID_SECURE_CLIENT_SDK_ID',
|
|
19
21
|
}
|
|
20
22
|
|
|
21
23
|
/**
|
|
@@ -51,16 +53,6 @@ declare module '@getyoti/react-face-capture' {
|
|
|
51
53
|
LOW = 'low',
|
|
52
54
|
}
|
|
53
55
|
|
|
54
|
-
/**
|
|
55
|
-
* Scenarios in which the countdown will be used.
|
|
56
|
-
*/
|
|
57
|
-
export enum COUNTDOWN_MODES {
|
|
58
|
-
ALWAYS = 'always',
|
|
59
|
-
ONLY_MOBILE = 'only_mobile',
|
|
60
|
-
ONLY_DESKTOP = 'only_desktop',
|
|
61
|
-
NEVER = 'never',
|
|
62
|
-
}
|
|
63
|
-
|
|
64
56
|
/**
|
|
65
57
|
* Politeness setting of the live region supported by the Face Capture.
|
|
66
58
|
*/
|
|
@@ -77,15 +69,6 @@ declare module '@getyoti/react-face-capture' {
|
|
|
77
69
|
FULL_HD = 'full_hd',
|
|
78
70
|
}
|
|
79
71
|
|
|
80
|
-
/**
|
|
81
|
-
* Button sizes supported by the Face Capture.
|
|
82
|
-
*/
|
|
83
|
-
export enum BUTTON_SIZE {
|
|
84
|
-
SMALL = 'SMALL',
|
|
85
|
-
MEDIUM = 'MEDIUM',
|
|
86
|
-
LARGE = 'LARGE'
|
|
87
|
-
}
|
|
88
|
-
|
|
89
72
|
/**
|
|
90
73
|
* Languages supported by the Face Capture.
|
|
91
74
|
*/
|
|
@@ -156,6 +139,8 @@ declare module '@getyoti/react-face-capture' {
|
|
|
156
139
|
SV_SE = 'sv-SE',
|
|
157
140
|
TH = 'th',
|
|
158
141
|
TH_TH = 'th-TH',
|
|
142
|
+
TL = 'tl',
|
|
143
|
+
TL_PH = 'tl-PH',
|
|
159
144
|
TR = 'tr',
|
|
160
145
|
TR_TR = 'tr-TR',
|
|
161
146
|
UK = 'uk',
|
|
@@ -164,6 +149,8 @@ declare module '@getyoti/react-face-capture' {
|
|
|
164
149
|
UR_PK = 'ur-PK',
|
|
165
150
|
VI = 'vi',
|
|
166
151
|
VI_VN = 'vi-VN',
|
|
152
|
+
ZH = 'zh',
|
|
153
|
+
ZH_CN = 'zh-CN',
|
|
167
154
|
}
|
|
168
155
|
|
|
169
156
|
/**
|
|
@@ -177,9 +164,10 @@ declare module '@getyoti/react-face-capture' {
|
|
|
177
164
|
}
|
|
178
165
|
|
|
179
166
|
/**
|
|
180
|
-
* Result entity the FCM will return on the onSuccess callback.
|
|
167
|
+
* Result entity the FCM will return on the onSuccess callback. It is the
|
|
168
|
+
* content that needs to be sent to the Yoti AI services.
|
|
181
169
|
*/
|
|
182
|
-
export interface
|
|
170
|
+
export interface FCMPayload {
|
|
183
171
|
img: string;
|
|
184
172
|
secure?: Secure;
|
|
185
173
|
}
|
|
@@ -195,7 +183,7 @@ declare module '@getyoti/react-face-capture' {
|
|
|
195
183
|
/** If true, the face capture module will use the secure mode. (default:false) */
|
|
196
184
|
secure?: boolean;
|
|
197
185
|
/** Callback called once the result (capture) is complete. */
|
|
198
|
-
onSuccess: (
|
|
186
|
+
onSuccess: (payload: FCMPayload, base64PreviewImage?: string) => void;
|
|
199
187
|
/** Callback called when there is an error. */
|
|
200
188
|
onError?: (e: ERROR_CODE) => void;
|
|
201
189
|
/** Callback called when the face capture module is ready to take images. */
|
|
@@ -206,12 +194,6 @@ declare module '@getyoti/react-face-capture' {
|
|
|
206
194
|
resolutionType?: RESOLUTION_TYPE;
|
|
207
195
|
/** Image format type. (default:jpeg) */
|
|
208
196
|
format?: FORMAT_TYPE;
|
|
209
|
-
/** @deprecated It will be removed in 2.0.0 version. Custom UI of the manual capture button. It uses onClick and disabled as props */
|
|
210
|
-
CustomManualButton?: (props: any) => JSX.Element;
|
|
211
|
-
/** @deprecated It will be removed in 2.0.0 version. Custom UI of the consent button. It uses onClick and disabled as props */
|
|
212
|
-
CustomConsentButton?: (props: any) => JSX.Element;
|
|
213
|
-
/** Indicates when the countdown will be used. Note: It's only used if captureMethod is set to manual. (default:never) */
|
|
214
|
-
countdownMode?: COUNTDOWN_MODES;
|
|
215
197
|
/** imageType select if the image will be the original or it will be cropped in order to improve the timing
|
|
216
198
|
response when processing the image in the API call. (default:original) */
|
|
217
199
|
imageType?: IMAGE_TYPE;
|
|
@@ -221,14 +203,25 @@ declare module '@getyoti/react-face-capture' {
|
|
|
221
203
|
language?: LANGUAGE_CODE;
|
|
222
204
|
/** Determines the politeness setting of the live region used to read out prompts for screen reader users. (default:polite) */
|
|
223
205
|
a11yLiveRegionMode?: A11Y_LIVE_REGION_MODE;
|
|
224
|
-
/**
|
|
225
|
-
|
|
206
|
+
/** showInitialGuidance determines if the initial help guidance will show or not the help section */
|
|
207
|
+
showInitialGuidance?: boolean;
|
|
226
208
|
/** Indicates if the face capture will use the manual capture method because of slow performance. (default:true) */
|
|
227
209
|
manualCaptureFallback?: boolean;
|
|
228
210
|
/** Indicates the time (in milliseconds) to call the onError callback if the module takes that time to load */
|
|
229
211
|
loadTimeout?: number;
|
|
230
|
-
/**
|
|
231
|
-
|
|
212
|
+
/** Identifies your Yoti Hub application. */
|
|
213
|
+
clientSdkId?: string;
|
|
214
|
+
/** If the Get Help button is shown or not. */
|
|
215
|
+
showGetHelpButton?: boolean;
|
|
216
|
+
/** Automatically renews sessions after they expire. */
|
|
217
|
+
autoSessionReload?: boolean;
|
|
218
|
+
/** Gives the possibility to users to retry several times when an error occurs. */
|
|
219
|
+
userRetryError?: boolean;
|
|
220
|
+
/** If the `onSuccess` method will return the base64 image. */
|
|
221
|
+
returnPreviewImage?: boolean;
|
|
222
|
+
/** If the face capture will encrypt the image inside the payload argument
|
|
223
|
+
* on the `onSuccess` callback when it runs the secure mode. */
|
|
224
|
+
encryptImage?: boolean;
|
|
232
225
|
}
|
|
233
226
|
|
|
234
227
|
/**
|