@getyoti/react-face-capture 1.4.0 → 2.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 +111 -2
- package/README.md +139 -91
- package/index.d.ts +25 -32
- package/index.js +69 -2
- package/index.js.LICENSE.txt +393 -36
- package/package.json +13 -75
- 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,114 @@
|
|
|
1
1
|
# CHANGELOG
|
|
2
2
|
|
|
3
|
+
## v2.0.0
|
|
4
|
+
|
|
5
|
+
See section [v2.0.0-beta.1](#v200-beta1) with previous changes for version
|
|
6
|
+
`2.0.0`.
|
|
7
|
+
|
|
8
|
+
- Design:
|
|
9
|
+
|
|
10
|
+
- The minimum size for the Face Capture in landscape view is 527px.
|
|
11
|
+
|
|
12
|
+
- Improved the help dialogue UI.
|
|
13
|
+
|
|
14
|
+
- Updated Tagalog localisation message for "Only one face allowed" feedback.
|
|
15
|
+
|
|
16
|
+
### Fixes
|
|
17
|
+
|
|
18
|
+
- Apply portrait or landscape custom styles when the user rotates the device.
|
|
19
|
+
- Fix scale flick when the `FaceCapture` loads.
|
|
20
|
+
- Solve Axios dependency CSRF vulnerability.
|
|
21
|
+
|
|
22
|
+
## v2.0.0-beta.1
|
|
23
|
+
|
|
24
|
+
### New features
|
|
25
|
+
|
|
26
|
+
- The secure mode returns an encrypted image by default now. Use `encryptImage`
|
|
27
|
+
property to return the base64 image in the secure payload. The face capture
|
|
28
|
+
also provides a new property to get the base64 image preview in the `onSuccess`
|
|
29
|
+
callback: `returnPreviewImage`.
|
|
30
|
+
|
|
31
|
+
- New property to identify your Yoti Hub application: `clientSdkId`.
|
|
32
|
+
|
|
33
|
+
- Secure module deprecation and end support handling.
|
|
34
|
+
|
|
35
|
+
- The Face Capture will log a warning message when the secure module version in use
|
|
36
|
+
becomes deprecated. It will return the error `VERSION_NO_LONGER_AVAILABLE`
|
|
37
|
+
in the `onError` callback when the support has ended.
|
|
38
|
+
|
|
39
|
+
- New property to allow auto-reload of the secure session before the session expires: `autoSessionReload`.
|
|
40
|
+
|
|
41
|
+
- New property to let the user handle errors by retrying several times: `userRetryError`.
|
|
42
|
+
|
|
43
|
+
- New design:
|
|
44
|
+
|
|
45
|
+
- The Face Capture will show a loading screen when it returns a valid
|
|
46
|
+
image in the `onSuccess` callback or an error screen if it runs the
|
|
47
|
+
`onError` callback.
|
|
48
|
+
|
|
49
|
+
- New Guidance screen that will be shown before the webcam loads. It can be hidden by providing the property `showInitialGuidance` with value `false`
|
|
50
|
+
|
|
51
|
+
- New Get Help button in the webcam view. It can be hidden by providing the property `showGetHelpButton` with value `false`.
|
|
52
|
+
|
|
53
|
+
- New font family (it can still be changed by `--fcm-font-family` css
|
|
54
|
+
variable).
|
|
55
|
+
|
|
56
|
+
- Improved manual mode user feedback.
|
|
57
|
+
|
|
58
|
+
- Improved Face Capture responsiveness.
|
|
59
|
+
|
|
60
|
+
- It is possible to customize some styles by using css variables. These are
|
|
61
|
+
the properties that can be changed:
|
|
62
|
+
|
|
63
|
+
- `--fcm-primary-button-background-color` changes the background color in
|
|
64
|
+
primary buttons (Take picture, Try again, ... ).
|
|
65
|
+
- `--fcm-primary-button-background-color-hover` changes the background
|
|
66
|
+
color in primary buttons (Take picture, Try again, ... ) when is hovered.
|
|
67
|
+
- `--fcm-primary-button-text-color` changes the text color in primary
|
|
68
|
+
buttons (Take picture, Try again, ... ).
|
|
69
|
+
- `--fcm-secondary-button-background-color` changes the background color in
|
|
70
|
+
primary buttons (Get help).
|
|
71
|
+
- `--fcm-secondary-button-text-color` changes the text color in secondary
|
|
72
|
+
buttons (Get help).
|
|
73
|
+
- `--fcm-secondary-button-text-color-hover` changes the text color in
|
|
74
|
+
secondary buttons (Get help) when the button is hovered.
|
|
75
|
+
- `--fcm-prompt-text-color` changes the text color in the prompt.
|
|
76
|
+
|
|
77
|
+
- The countdown functionality has been removed.
|
|
78
|
+
|
|
79
|
+
- Implemented localisation languages:
|
|
80
|
+
|
|
81
|
+
- `tl-PH`: Tagalog
|
|
82
|
+
- `zh-CN`: Chinese - Simplified
|
|
83
|
+
|
|
84
|
+
- 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.
|
|
85
|
+
|
|
86
|
+
### Breaking changes
|
|
87
|
+
|
|
88
|
+
- The `onSuccess` callback definition changed to (`(payload: FCMPayload, base64PreviewImage?: string) => {}`).
|
|
89
|
+
|
|
90
|
+
- The type of the `payload` argument changed from `FCMResult` to `FCMPayload`.
|
|
91
|
+
|
|
92
|
+
- Secure mode is now the default mode for the Face Capture (`secure` property value is now `true` by default).
|
|
93
|
+
|
|
94
|
+
- The new property `clientSdkId` is required when using secure mode. So will be required by default.
|
|
95
|
+
|
|
96
|
+
- The property `buttonSize` was removed.
|
|
97
|
+
|
|
98
|
+
- The property `isConsentRequired` was removed.
|
|
99
|
+
|
|
100
|
+
- The properties `CustomManualButton` and `CustomConsentButton` were removed.
|
|
101
|
+
|
|
102
|
+
- The property `countdownMode` was removed.
|
|
103
|
+
|
|
104
|
+
- The minimum size for the Face Capture in landscape view is 576px.
|
|
105
|
+
|
|
106
|
+
#### Peer dependencies updates
|
|
107
|
+
|
|
108
|
+
- Updated `react` dependency version to be at least `16.14.0` and a maximum of `18.2.0`.
|
|
109
|
+
|
|
110
|
+
- Updated `react-dom` dependency version to be at least `16.14.0` and a maximum of `18.2.0`.
|
|
111
|
+
|
|
3
112
|
## v1.4.0
|
|
4
113
|
|
|
5
114
|
### New features
|
|
@@ -7,7 +116,7 @@
|
|
|
7
116
|
- 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
117
|
- Implemented localisation languages:
|
|
9
118
|
|
|
10
|
-
- `sk-SK`:
|
|
119
|
+
- `sk-SK`: Slovak
|
|
11
120
|
- `hu-HU`: Hungarian
|
|
12
121
|
|
|
13
122
|
- The translations are available for the manual button.
|
|
@@ -109,7 +218,7 @@
|
|
|
109
218
|
|
|
110
219
|
- Fix the error when the FCM component is unmounted if it uses the secure mode.
|
|
111
220
|
|
|
112
|
-
- Use the new Yoti
|
|
221
|
+
- Use the new Yoti colors for the button and overlay feedback.
|
|
113
222
|
|
|
114
223
|
## v1.1.0
|
|
115
224
|
|
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 | 120,119,118,117 |
|
|
29
|
+
| edge | 120,119 |
|
|
30
|
+
| firefox | 120,119,118,117 |
|
|
31
|
+
| ios_saf | 17.1,17.0,16.6-16.7 |
|
|
32
|
+
| safari | 17.2,17.1,17.0,16.6 |
|
|
33
33
|
|
|
34
34
|
</browserSupportTable>
|
|
35
35
|
|
|
@@ -43,7 +43,9 @@ 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
|
-
|
|
46
|
+
_Note: It is possible to disable the picture-in-picture feature for Firefox in [its configuration](https://support.mozilla.org/en-US/kb/turn-picture-picture-mode)._
|
|
47
|
+
|
|
48
|
+
## React Face Capture
|
|
47
49
|
|
|
48
50
|
### Install dependency
|
|
49
51
|
|
|
@@ -55,64 +57,81 @@ npm i @getyoti/react-face-capture -S
|
|
|
55
57
|
|
|
56
58
|
```
|
|
57
59
|
import FaceCapture from "@getyoti/react-face-capture"
|
|
58
|
-
import "@getyoti/react-face-capture/index.css"
|
|
59
60
|
```
|
|
60
61
|
|
|
61
62
|
### Copy assets
|
|
62
63
|
|
|
63
|
-
**Assets** are not included in the javascript bundle.
|
|
64
|
+
**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
65
|
|
|
65
66
|
For instance, in webpack you can use the plugin `copy-webpack-plugin` in the following way:
|
|
66
67
|
|
|
67
68
|
```js
|
|
68
|
-
new CopyPlugin(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
new CopyPlugin({
|
|
70
|
+
patterns: [
|
|
71
|
+
{
|
|
72
|
+
from: path.resolve(__dirname, './node_modules/@getyoti/react-face-capture/assets'),
|
|
73
|
+
to: path.resolve(__dirname, './dist/assets'),
|
|
74
|
+
},
|
|
75
|
+
],
|
|
76
|
+
});
|
|
74
77
|
```
|
|
75
78
|
|
|
76
79
|
### CSS Customization
|
|
77
80
|
|
|
78
|
-
Now it is possible to
|
|
81
|
+
Now, it is possible to customize the style by changing the following CSS properties:
|
|
82
|
+
|
|
83
|
+
- `--fcm-primary-button-background-color` changes the background color in primary buttons (Take picture, Try again, ... ).
|
|
84
|
+
- `--fcm-primary-button-background-color-hover` changes the background color in primary buttons (Take picture, Try again, ... ) when is hovered.
|
|
85
|
+
- `--fcm-primary-button-text-color` changes the text color in primary buttons (Take picture, Try again, ... ).
|
|
86
|
+
- `--fcm-secondary-button-background-color` changes the background color in primary buttons (Get help).
|
|
87
|
+
- `--fcm-secondary-button-text-color` changes the text color in secondary buttons (Get help).
|
|
88
|
+
- `--fcm-secondary-button-text-color-hover` changes the text color in secondary buttons (Get help) when the button is hovered.
|
|
89
|
+
- `--fcm-font-family` sets the font family.
|
|
90
|
+
- `--fcm-prompt-text-color` changes the text color in the prompt.
|
|
91
|
+
- `--fcm-prompt-background-color` sets the background color in the message prompt.
|
|
92
|
+
|
|
93
|
+
The CSS custom properties must be defined using the `:root` CSS selector. Here is an example:
|
|
79
94
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
- --fcm-prompt-background-color. Sets the background color in the message prompt.
|
|
95
|
+
```css
|
|
96
|
+
:root {
|
|
97
|
+
--fcm-primary-button-background-color: red;
|
|
98
|
+
}
|
|
99
|
+
```
|
|
86
100
|
|
|
87
101
|
> **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
102
|
> In addition, we can't guarantee external customizations support on new versions of the library
|
|
89
103
|
|
|
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
|
-
|
|
|
104
|
+
### Properties
|
|
105
|
+
|
|
106
|
+
| Property name | Type | Default | Mandatory | Description |
|
|
107
|
+
| ------------------------ | ------------------------------------- | ---------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
108
|
+
| captureMethod | String `manual/auto` | `auto` | - | Capture method to take the photo: by clicking a button or auto-capture. |
|
|
109
|
+
| 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. |
|
|
110
|
+
| secure | Boolean | `true` | - | If `true`, the Face Capture will use the [secure mode](#secure-mode) |
|
|
111
|
+
| clientSdkId | String | - | Yes\* | Identifies your Yoti Hub application. This value can be found in the Hub, within your application section, in the keys tab. |
|
|
112
|
+
| 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`. |
|
|
113
|
+
| onError | Function | - | - | Callback called when there is an error. See Appendix for the list of error codes we currently support. |
|
|
114
|
+
| onReadyForCapture | Function | - | - | Callback called when the Face Capture is ready to take images (camera feed and face scan are ready). |
|
|
115
|
+
| showOverlay | Boolean | `true` | - | Optional use of the face overlay. |
|
|
116
|
+
| resolutionType | String `hd/full_hd` | `hd` | - | Image resolution constraints passed to `getUserMedia`. |
|
|
117
|
+
| format | String `jpeg/png` | `jpeg` | - | Image format type. |
|
|
118
|
+
| 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. |
|
|
119
|
+
| qualityType | String `high/medium/low` | `high` | - | Sets the image quality of jpeg format images only. High (1) - Medium (0.96) - Low (0.90). |
|
|
120
|
+
| language | Language code \*\* | `en` | - | The language code to set the Face Capture language. |
|
|
121
|
+
| 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 |
|
|
122
|
+
| showInitialGuidance | Boolean | `true` | - | Determines if the help component will show or not the help section. |
|
|
123
|
+
| faceCaptureAssetsRootUrl | String | `assets/face-capture/` | - | Root url where the face detection assets are located. See [copy assets](#copy-assets) section for assets configuration. |
|
|
124
|
+
| 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. |
|
|
125
|
+
| showGetHelpButton | Boolean | `true` | - | If the Get Help button is shown or not. |
|
|
126
|
+
| autoSessionReload | Boolean | `true` | - | Automatically renews sessions after they expire. |
|
|
127
|
+
| userRetryError | Boolean | `true` | - | Gives the possibility to users to retry several times when an error occurs. |
|
|
128
|
+
| returnPreviewImage | Boolean | `false` | - | If the image captured (`base64PreviewImage`) will be provided in the `onSuccess` callback. |
|
|
129
|
+
| 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
130
|
|
|
115
131
|
**(\*)**
|
|
132
|
+
This field is only mandatory when using the secure mode. (secure = true)
|
|
133
|
+
|
|
134
|
+
**(\*\*)**
|
|
116
135
|
Current languages supported:
|
|
117
136
|
|
|
118
137
|
- `en-GB`: English
|
|
@@ -122,7 +141,7 @@ Current languages supported:
|
|
|
122
141
|
- `da-DK`: Danish
|
|
123
142
|
- `de-DE`: German
|
|
124
143
|
- `el-GR`: Greek
|
|
125
|
-
- `es`: Spanish (Spain)
|
|
144
|
+
- `es`: Spanish (Spain) \*\*\*
|
|
126
145
|
- `es-ES`: Spanish (Spain)
|
|
127
146
|
- `es-419`: Spanish (Latin America)
|
|
128
147
|
- `et-EE`: Estonian
|
|
@@ -143,45 +162,49 @@ Current languages supported:
|
|
|
143
162
|
- `nb-NO`: Norwegian
|
|
144
163
|
- `nl-NL`: Dutch
|
|
145
164
|
- `pl-PL`: Polish
|
|
146
|
-
- `pt`: Portuguese (Portugal)
|
|
165
|
+
- `pt`: Portuguese (Portugal) \*\*\*
|
|
147
166
|
- `pt-BR`: Portuguese (Brazil)
|
|
148
167
|
- `pt-PT`: Portuguese (Portugal)
|
|
149
168
|
- `ro-RO`: Romanian
|
|
150
169
|
- `ru-RU`: Russian
|
|
151
|
-
- `sk-SK`:
|
|
170
|
+
- `sk-SK`: Slovak
|
|
152
171
|
- `sv-SE`: Swedish
|
|
153
172
|
- `th-TH`: Thai
|
|
173
|
+
- `tl-PH`: Tagalog
|
|
154
174
|
- `tr-TR`: Turkish
|
|
155
175
|
- `uk-UA`: Ukrainian
|
|
156
176
|
- `ur-PK`: Urdu
|
|
157
177
|
- `vi-VN`: Vietnamese
|
|
178
|
+
- `zh-CN`: Chinese (Simplified)
|
|
158
179
|
|
|
159
|
-
**(
|
|
160
|
-
Language codes marked with
|
|
180
|
+
**(\*\*\*)**
|
|
181
|
+
Language codes marked with \*\*\* are listed for disambiguation purposes on the fallback. They are exactly the same as their respective regional variants.
|
|
161
182
|
|
|
162
183
|
#### Language fallback
|
|
163
184
|
|
|
164
|
-
A mechanism used for the
|
|
185
|
+
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
186
|
|
|
166
187
|
- If there is no match, try the mainstream (es), by removing the region part (-es).
|
|
167
188
|
- If there is no mainstream, try any other available es-[region] sibling (example: es-419).
|
|
168
189
|
- If there is no regional sibling, use the default language: en.
|
|
169
190
|
|
|
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`
|
|
191
|
+
#### Error codes
|
|
192
|
+
|
|
193
|
+
| Error code | Description |
|
|
194
|
+
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
195
|
+
| `NO_CAMERA` | No camera detected on the user’s device. |
|
|
196
|
+
| `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. |
|
|
197
|
+
| `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.` |
|
|
198
|
+
| `NO_CAMERA_PERMISSION` | The user rejected the camera permission. |
|
|
199
|
+
| `OVERCONSTRAINED` | The camera constraints are not compatible with available camera devices. `Note: One recovery option could be to use hd resolution.` |
|
|
200
|
+
| `FACE_DETECTION_INIT_ERROR` | The face detection has failed to initialise. This usually means the required model assets are missing from the host application. |
|
|
201
|
+
| `INTERNAL_ERROR` | This can be due to a programming error, or the user using an old unsupported browser. |
|
|
202
|
+
| `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. |
|
|
203
|
+
| `VIDEO_STREAM_INTERRUPTED` | The camera stream has stopped unexpectedly. |
|
|
204
|
+
| `SECURE_SESSION_EXPIRED` | The secure session has expired (the token expire field is older than the current time). |
|
|
205
|
+
| `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. |
|
|
206
|
+
| `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. |
|
|
207
|
+
| `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
208
|
|
|
186
209
|
The error codes can be imported as follow:
|
|
187
210
|
|
|
@@ -197,7 +220,9 @@ to verify that the image captured on the client-side browser with the FCM hasn't
|
|
|
197
220
|
modified in any form. Note, the secure mode of Yoti FCM makes a request to Yoti
|
|
198
221
|
back-end to download the encrypted capture package that takes the
|
|
199
222
|
photo and create the secure result request. The secure result information will
|
|
200
|
-
be returned in `onSuccess` callback
|
|
223
|
+
be returned in `onSuccess` callback (`payload` argument). It is the information
|
|
224
|
+
that the _Yoti back-end service_ needs to run a prediction. The service will
|
|
225
|
+
return an error if the `payload` is modified:
|
|
201
226
|
|
|
202
227
|
```json
|
|
203
228
|
{
|
|
@@ -216,60 +241,57 @@ module) and `<session_token>` is the session token generated from the request.
|
|
|
216
241
|
|
|
217
242
|
##### Possible issues
|
|
218
243
|
|
|
219
|
-
The secure mode requests Yoti
|
|
220
|
-
on demand
|
|
221
|
-
your
|
|
222
|
-
cross-site scripting like
|
|
244
|
+
The secure mode requests Yoti services to download the encrypted module
|
|
245
|
+
on demand, therefore the client must be able to handle those requests. Keep in mind if
|
|
246
|
+
your client uses any mechanism to prevent data injection attacks or
|
|
247
|
+
cross-site scripting like CSP you will need to allow the FCM requests.
|
|
223
248
|
|
|
224
249
|
##### Virtual cameras
|
|
225
250
|
|
|
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
|
|
251
|
+
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
252
|
|
|
228
253
|
### Example
|
|
229
254
|
|
|
230
255
|
```js
|
|
231
256
|
import FaceCapture from '@getyoti/react-face-capture';
|
|
232
|
-
import '@getyoti/react-face-capture/index.css';
|
|
233
257
|
|
|
234
258
|
export function App() {
|
|
235
|
-
const onSuccess = (
|
|
259
|
+
const onSuccess = (payload, base64PreviewImage) => console.log('Length = ', payload.img.length);
|
|
236
260
|
const onError = (error) => console.log('Error =', error);
|
|
237
261
|
|
|
238
|
-
return <FaceCapture onSuccess={onSuccess} onError={onError} />;
|
|
262
|
+
return <FaceCapture returnPreviewImage onSuccess={onSuccess} onError={onError} />;
|
|
239
263
|
}
|
|
240
264
|
```
|
|
241
265
|
|
|
242
|
-
## Face
|
|
266
|
+
## Face Capture vanilla
|
|
243
267
|
|
|
244
|
-
|
|
268
|
+
For projects without a React tech stack, you can use the Face Capture vanilla version.
|
|
245
269
|
When you install the library on your machine, It's located inside the folder `vanilla`.
|
|
246
270
|
|
|
247
271
|
Add the package to your codebase and serve the static assets:
|
|
248
272
|
|
|
249
|
-
### 1.
|
|
273
|
+
### 1. Serve package static assets
|
|
250
274
|
|
|
251
275
|
```bash
|
|
252
276
|
|
|
253
277
|
/@getyoti/react-face-capture/vanilla/assets/face-capture/
|
|
254
|
-
/@getyoti/react-face-capture/vanilla/index.css
|
|
255
278
|
/@getyoti/react-face-capture/vanilla/index.js
|
|
256
279
|
```
|
|
257
280
|
|
|
258
|
-
### 2. Add Face
|
|
281
|
+
### 2. Add Face Capture script
|
|
259
282
|
|
|
260
|
-
Inside the page you want to have
|
|
283
|
+
Inside the page you want to have Face Capture, add Face Capture scripts and styles like in the example below.
|
|
261
284
|
`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
285
|
|
|
263
|
-
### 3. Render
|
|
286
|
+
### 3. Render Face Capture
|
|
264
287
|
|
|
265
|
-
Our scripts will give you access to `Yoti.FaceCaptureModule.render` where you can set 2 parameters. The first parameter is the
|
|
288
|
+
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
289
|
|
|
267
290
|
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
291
|
|
|
269
292
|
**index.html**
|
|
270
293
|
|
|
271
294
|
```html
|
|
272
|
-
<link rel="stylesheet" href="/@getyoti/react-face-capture/vanilla/index.css" />
|
|
273
295
|
<script src="/@getyoti/react-face-capture/vanilla/index.js"></script>
|
|
274
296
|
<script>
|
|
275
297
|
const props = {
|
|
@@ -296,8 +318,34 @@ In order to unmount the component, it is highly recommended to call the `Yoti.Fa
|
|
|
296
318
|
<div id="face-capture-module-root"></div>
|
|
297
319
|
```
|
|
298
320
|
|
|
299
|
-
## Debugging Yoti Face Capture
|
|
321
|
+
## Debugging Yoti Face Capture
|
|
322
|
+
|
|
323
|
+
Yoti Face Capture is protected with code obfuscation techniques for security reasons.
|
|
324
|
+
|
|
325
|
+
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.
|
|
326
|
+
|
|
327
|
+
## Troubleshooting
|
|
328
|
+
|
|
329
|
+
### NextJS
|
|
330
|
+
|
|
331
|
+
The Face Capture does not support server side rendering. It needs to be loaded
|
|
332
|
+
dynamically:
|
|
333
|
+
|
|
334
|
+
```jsx
|
|
335
|
+
import dynamic from 'next/dynamic';
|
|
336
|
+
const FaceCapture = dynamic(() => import('@getyoti/react-face-capture'), {
|
|
337
|
+
ssr: false,
|
|
338
|
+
});
|
|
339
|
+
|
|
340
|
+
export default function CustomFCM(props) {
|
|
341
|
+
return <FaceCapture {...props} />;
|
|
342
|
+
}
|
|
343
|
+
```
|
|
300
344
|
|
|
301
|
-
|
|
345
|
+
### Webpack
|
|
302
346
|
|
|
303
|
-
|
|
347
|
+
The secure mode loads secure javascript code from server side on demand. The
|
|
348
|
+
Face Capture uses the comment `/* webpackIgnore: true */` order to tell webpack
|
|
349
|
+
that it does not need to resolve the dependency locally so this comment cannot
|
|
350
|
+
be removed before webpack builds the final javascript files for the web
|
|
351
|
+
application.
|