@getyoti/react-face-capture 1.3.1-test.1 → 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 +170 -13
- package/README.md +188 -119
- package/index.d.ts +67 -26
- 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/README.md
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
# Yoti Face
|
|
2
|
-
|
|
3
|
-
> **IMPORTANT**: Testing version. It does not support the `secure` mode.
|
|
1
|
+
# Yoti Face Capture integration
|
|
4
2
|
|
|
5
3
|
The purpose of this module is to capture a face and return the output image.
|
|
6
4
|
|
|
@@ -16,8 +14,8 @@ to review release changes, issues, fixes, and possible breaking changes on Major
|
|
|
16
14
|
The package depends on the following peer dependencies
|
|
17
15
|
|
|
18
16
|
```
|
|
19
|
-
"react": ">=16.
|
|
20
|
-
"react-dom": ">=16.
|
|
17
|
+
"react": ">=16.14.0 <=18.2.0",
|
|
18
|
+
"react-dom": ">=16.14.0 <=18.2.0"
|
|
21
19
|
```
|
|
22
20
|
|
|
23
21
|
### Browser support
|
|
@@ -26,12 +24,12 @@ The package depends on the following peer dependencies
|
|
|
26
24
|
|
|
27
25
|
| Browser | Versions |
|
|
28
26
|
| ------- | ------------------- |
|
|
29
|
-
| and_chr |
|
|
30
|
-
| chrome | 118,117,116
|
|
31
|
-
| edge | 118
|
|
32
|
-
| firefox | 118,117,116
|
|
33
|
-
| ios_saf | 17.0,16.6
|
|
34
|
-
| safari | 17.0,16.6,16.5
|
|
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 |
|
|
35
33
|
|
|
36
34
|
</browserSupportTable>
|
|
37
35
|
|
|
@@ -45,7 +43,7 @@ Finally, some devices might experience poor performance when attempting to detec
|
|
|
45
43
|
|
|
46
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._
|
|
47
45
|
|
|
48
|
-
## React
|
|
46
|
+
## React Face Capture
|
|
49
47
|
|
|
50
48
|
### Install dependency
|
|
51
49
|
|
|
@@ -57,12 +55,11 @@ npm i @getyoti/react-face-capture -S
|
|
|
57
55
|
|
|
58
56
|
```
|
|
59
57
|
import FaceCapture from "@getyoti/react-face-capture"
|
|
60
|
-
import "@getyoti/react-face-capture/index.css"
|
|
61
58
|
```
|
|
62
59
|
|
|
63
60
|
### Copy assets
|
|
64
61
|
|
|
65
|
-
**Assets** are not included in the javascript bundle. To have the components to work correctly, you will need to copy library assets from
|
|
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.
|
|
66
63
|
|
|
67
64
|
For instance, in webpack you can use the plugin `copy-webpack-plugin` in the following way:
|
|
68
65
|
|
|
@@ -70,97 +67,140 @@ For instance, in webpack you can use the plugin `copy-webpack-plugin` in the fol
|
|
|
70
67
|
new CopyPlugin([
|
|
71
68
|
{
|
|
72
69
|
from: path.resolve(__dirname, './node_modules/@getyoti/react-face-capture/assets'),
|
|
73
|
-
to: path.resolve(__dirname, './assets')
|
|
70
|
+
to: path.resolve(__dirname, './dist/assets')
|
|
74
71
|
}
|
|
75
72
|
]),
|
|
76
73
|
```
|
|
77
74
|
|
|
78
|
-
###
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
75
|
+
### CSS Customization
|
|
76
|
+
|
|
77
|
+
Now, it is possible to customize the style by changing the following CSS properties:
|
|
78
|
+
|
|
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
|
+
```
|
|
96
|
+
|
|
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.
|
|
98
|
+
> In addition, we can't guarantee external customizations support on new versions of the library
|
|
99
|
+
|
|
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. |
|
|
100
126
|
|
|
101
127
|
**(\*)**
|
|
128
|
+
This field is only mandatory when using the secure mode. (secure = true)
|
|
129
|
+
|
|
130
|
+
**(\*\*)**
|
|
102
131
|
Current languages supported:
|
|
103
132
|
|
|
104
|
-
- `en`: English
|
|
133
|
+
- `en-GB`: English
|
|
134
|
+
- `ar-XN`: Arabic
|
|
105
135
|
- `bg-BG`: Bulgarian
|
|
106
|
-
- `
|
|
107
|
-
- `
|
|
108
|
-
- `
|
|
109
|
-
- `
|
|
110
|
-
- `
|
|
111
|
-
- `es`: Spanish (Spain)
|
|
136
|
+
- `cs-CZ`: Czech
|
|
137
|
+
- `da-DK`: Danish
|
|
138
|
+
- `de-DE`: German
|
|
139
|
+
- `el-GR`: Greek
|
|
140
|
+
- `es`: Spanish (Spain) \*\*\*
|
|
141
|
+
- `es-ES`: Spanish (Spain)
|
|
112
142
|
- `es-419`: Spanish (Latin America)
|
|
113
|
-
- `et`: Estonian
|
|
114
|
-
- `fa-IR
|
|
115
|
-
- `fi`: Finnish
|
|
116
|
-
- `fr`: French
|
|
117
|
-
- `he`: Hebrew
|
|
118
|
-
- `hi`: Hindi
|
|
119
|
-
- `
|
|
120
|
-
- `
|
|
121
|
-
- `
|
|
122
|
-
- `
|
|
123
|
-
- `
|
|
124
|
-
- `
|
|
125
|
-
- `
|
|
126
|
-
- `
|
|
127
|
-
- `
|
|
128
|
-
- `
|
|
129
|
-
- `
|
|
130
|
-
- `
|
|
143
|
+
- `et-EE`: Estonian
|
|
144
|
+
- `fa-IR`: Persian
|
|
145
|
+
- `fi-FI`: Finnish
|
|
146
|
+
- `fr-FR`: French
|
|
147
|
+
- `he-IL`: Hebrew
|
|
148
|
+
- `hi-IN`: Hindi
|
|
149
|
+
- `hu-HU`: Hungarian
|
|
150
|
+
- `hy-AM`: Armenian
|
|
151
|
+
- `id-ID`: Bahasa
|
|
152
|
+
- `it-IT`: Italian
|
|
153
|
+
- `ja-JP`: Japanese
|
|
154
|
+
- `ko-KR`: Korean
|
|
155
|
+
- `lt-LT`: Lithuanian
|
|
156
|
+
- `lv-LV`: Latvian
|
|
157
|
+
- `ms-MY`: Malay
|
|
158
|
+
- `nb-NO`: Norwegian
|
|
159
|
+
- `nl-NL`: Dutch
|
|
160
|
+
- `pl-PL`: Polish
|
|
161
|
+
- `pt`: Portuguese (Portugal) \*\*\*
|
|
131
162
|
- `pt-BR`: Portuguese (Brazil)
|
|
132
163
|
- `pt-PT`: Portuguese (Portugal)
|
|
133
|
-
- `ro`: Romanian
|
|
134
|
-
- `ru`: Russian
|
|
135
|
-
- `
|
|
136
|
-
- `
|
|
137
|
-
- `
|
|
138
|
-
- `
|
|
139
|
-
- `
|
|
140
|
-
- `
|
|
164
|
+
- `ro-RO`: Romanian
|
|
165
|
+
- `ru-RU`: Russian
|
|
166
|
+
- `sk-SK`: Slovak
|
|
167
|
+
- `sv-SE`: Swedish
|
|
168
|
+
- `th-TH`: Thai
|
|
169
|
+
- `tl-PH`: Tagalog
|
|
170
|
+
- `tr-TR`: Turkish
|
|
171
|
+
- `uk-UA`: Ukrainian
|
|
172
|
+
- `ur-PK`: Urdu
|
|
173
|
+
- `vi-VN`: Vietnamese
|
|
174
|
+
- `zh-CN`: Chinese (Simplified)
|
|
175
|
+
|
|
176
|
+
**(\*\*\*)**
|
|
177
|
+
Language codes marked with \*\*\* are listed for disambiguation purposes on the fallback. They are exactly the same as their respective regional variants.
|
|
141
178
|
|
|
142
179
|
#### Language fallback
|
|
143
180
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
- If no match, try the mainstream (es), by removing the region part (-es).
|
|
147
|
-
- If no mainstream, try any other available es-[region] sibling (example: es-419).
|
|
148
|
-
- If no regional sibling, use the default language: en.
|
|
149
|
-
|
|
150
|
-
####
|
|
151
|
-
|
|
152
|
-
| Error code
|
|
153
|
-
|
|
|
154
|
-
| `NO_CAMERA`
|
|
155
|
-
| `GENERIC_CAMERA_ERROR`
|
|
156
|
-
| `UNSUPPORTED_BROWSER`
|
|
157
|
-
| `NO_CAMERA_PERMISSION`
|
|
158
|
-
| `OVERCONSTRAINED`
|
|
159
|
-
| `FACE_DETECTION_INIT_ERROR`
|
|
160
|
-
| `INTERNAL_ERROR`
|
|
161
|
-
| `CAPTURE_LOAD_ERROR`
|
|
162
|
-
| `VIDEO_STREAM_INTERRUPTED`
|
|
163
|
-
| `SECURE_SESSION_EXPIRED`
|
|
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):
|
|
182
|
+
|
|
183
|
+
- If there is no match, try the mainstream (es), by removing the region part (-es).
|
|
184
|
+
- If there is no mainstream, try any other available es-[region] sibling (example: es-419).
|
|
185
|
+
- If there is no regional sibling, use the default language: en.
|
|
186
|
+
|
|
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. |
|
|
164
204
|
|
|
165
205
|
The error codes can be imported as follow:
|
|
166
206
|
|
|
@@ -172,11 +212,11 @@ import { ERROR_CODE } from '@getyoti/react-face-capture';
|
|
|
172
212
|
|
|
173
213
|
The Secure mode allows [Yoti back-end
|
|
174
214
|
service](https://developers.yoti.com/age-estimation/integration-guide)
|
|
175
|
-
to verify that the image captured on client-side browser with the FCM hasn't been
|
|
215
|
+
to verify that the image captured on the client-side browser with the FCM hasn't been
|
|
176
216
|
modified in any form. Note, the secure mode of Yoti FCM makes a request to Yoti
|
|
177
217
|
back-end to download the encrypted capture package that takes the
|
|
178
218
|
photo and create the secure result request. The secure result information will
|
|
179
|
-
be returned in `onSuccess` callback:
|
|
219
|
+
be returned in `onSuccess` callback (`payload` argument):
|
|
180
220
|
|
|
181
221
|
```json
|
|
182
222
|
{
|
|
@@ -195,82 +235,111 @@ module) and `<session_token>` is the session token generated from the request.
|
|
|
195
235
|
|
|
196
236
|
##### Possible issues
|
|
197
237
|
|
|
198
|
-
The secure mode requests Yoti
|
|
199
|
-
on demand
|
|
200
|
-
your
|
|
201
|
-
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.
|
|
202
242
|
|
|
203
243
|
##### Virtual cameras
|
|
204
244
|
|
|
205
|
-
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.
|
|
206
246
|
|
|
207
247
|
### Example
|
|
208
248
|
|
|
209
249
|
```js
|
|
210
250
|
import FaceCapture from '@getyoti/react-face-capture';
|
|
211
|
-
import '@getyoti/react-face-capture/index.css';
|
|
212
251
|
|
|
213
252
|
export function App() {
|
|
214
|
-
const onSuccess = (
|
|
253
|
+
const onSuccess = (payload, base64PreviewImage) => console.log('Length = ', payload.img.length);
|
|
215
254
|
const onError = (error) => console.log('Error =', error);
|
|
216
255
|
|
|
217
|
-
return <FaceCapture onSuccess={onSuccess} onError={onError} />;
|
|
256
|
+
return <FaceCapture returnPreviewImage onSuccess={onSuccess} onError={onError} />;
|
|
218
257
|
}
|
|
219
258
|
```
|
|
220
259
|
|
|
221
|
-
## Face
|
|
260
|
+
## Face Capture vanilla
|
|
222
261
|
|
|
223
|
-
|
|
262
|
+
For projects without a React tech stack, you can use the Face Capture vanilla version.
|
|
224
263
|
When you install the library on your machine, It's located inside the folder `vanilla`.
|
|
225
264
|
|
|
226
|
-
Add the package
|
|
265
|
+
Add the package to your codebase and serve the static assets:
|
|
227
266
|
|
|
228
|
-
### 1.
|
|
267
|
+
### 1. Serve package static assets
|
|
229
268
|
|
|
230
269
|
```bash
|
|
231
270
|
|
|
232
271
|
/@getyoti/react-face-capture/vanilla/assets/face-capture/
|
|
233
|
-
/@getyoti/react-face-capture/vanilla/index.css
|
|
234
272
|
/@getyoti/react-face-capture/vanilla/index.js
|
|
235
273
|
```
|
|
236
274
|
|
|
237
|
-
### 2. Add Face
|
|
275
|
+
### 2. Add Face Capture script
|
|
238
276
|
|
|
239
|
-
Inside the page you want to have
|
|
240
|
-
`faceCaptureAssetsRootUrl` is property you can use to instruct the library where neural net files are served otherwise we look the files relative to the page location `assets/face-capture/`.
|
|
277
|
+
Inside the page you want to have Face Capture, add Face Capture scripts and styles like in the example below.
|
|
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/`.
|
|
241
279
|
|
|
242
|
-
### 3. Render
|
|
280
|
+
### 3. Render Face Capture
|
|
243
281
|
|
|
244
|
-
Our scripts will give you access to `Yoti.FaceCaptureModule.render` you can
|
|
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.
|
|
245
283
|
|
|
246
|
-
In order to unmount the component, it is highly recommended to call the `Yoti.FaceCaptureModule.unmount` function instead of destroying the HTML element,
|
|
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.
|
|
247
285
|
|
|
248
286
|
**index.html**
|
|
249
287
|
|
|
250
288
|
```html
|
|
251
|
-
<
|
|
252
|
-
<script src="/@getyoti/react-face-capture/vanilla/index.js" />
|
|
289
|
+
<script src="/@getyoti/react-face-capture/vanilla/index.js"></script>
|
|
253
290
|
<script>
|
|
254
291
|
const props = {
|
|
255
|
-
faceCaptureAssetsRootUrl: '/@getyoti/react-face-capture/vanilla/assets/'
|
|
292
|
+
faceCaptureAssetsRootUrl: '/@getyoti/react-face-capture/vanilla/assets/face-capture/',
|
|
293
|
+
onSuccess: (data) => {
|
|
294
|
+
console.log('Length = ', data.img.length);
|
|
295
|
+
},
|
|
296
|
+
onError: (error) => {
|
|
297
|
+
console.log('Error =', error);
|
|
298
|
+
},
|
|
256
299
|
};
|
|
257
300
|
|
|
258
301
|
const fcm = Yoti.FaceCaptureModule.render(props, document.getElementById('face-capture-module-root'));
|
|
259
302
|
|
|
260
303
|
function reload() {
|
|
261
|
-
|
|
304
|
+
fcm.reload();
|
|
262
305
|
}
|
|
263
306
|
|
|
264
307
|
function unmount() {
|
|
265
|
-
|
|
308
|
+
fcm.unmount();
|
|
266
309
|
}
|
|
267
310
|
</script>
|
|
268
311
|
|
|
269
312
|
<div id="face-capture-module-root"></div>
|
|
270
313
|
```
|
|
271
314
|
|
|
272
|
-
## 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
|
+
```
|
|
273
338
|
|
|
274
|
-
|
|
339
|
+
### Webpack
|
|
275
340
|
|
|
276
|
-
|
|
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.
|