@getyoti/react-face-capture 0.1.0 → 0.4.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +59 -3
  2. package/README.md +104 -32
  3. package/index.js +1 -1
  4. package/package.json +4 -6
  5. package/vanilla/assets/face-capture/tiny_face_detector_model-shard1 +0 -0
  6. package/vanilla/assets/face-capture/tiny_face_detector_model-weights_manifest.json +197 -0
  7. package/vanilla/index.css +1 -0
  8. package/vanilla/index.js +3 -0
  9. package/vanilla/index.js.LICENSE.txt +34 -0
  10. package/vanilla/index.js.map +1 -0
package/CHANGELOG.md CHANGED
@@ -1,10 +1,64 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## v0.4.0
4
+
5
+ ### New features
6
+
7
+ - implemented Face capture module vanilla, to run our module without react stack application
8
+ - implemented brightness validation to stop images too dark or too bright
9
+ - Implemented localisation languages
10
+ - `cs`: Czech
11
+ - `da`: Danish
12
+ - `de`: German
13
+ - `fi`: Finnish
14
+ - `hi`: Hindi
15
+ - `it`: Italian
16
+ - `ja`: Japanese
17
+ - `nb`: Norwegian
18
+ - `nl`: Dutch
19
+ - `pl`: Polish
20
+ - `pt`: Portuguese
21
+ - `ro`: Romanian
22
+ - `ru`: Russian
23
+ - `sv`: Swedish
24
+ - `th`: Thai
25
+ - `tr`: Turkish
26
+ - `vi`: Vietnamese
27
+
28
+ ## v0.3.1
29
+
30
+ ### New features
31
+
32
+ - Image payload optimisation on Horizontal images by removing unused image edges.
33
+
34
+ ## v0.3.0
35
+
36
+ ### New features
37
+
38
+ - Export error codes and component properties values constants
39
+
40
+ ### Fixes
41
+
42
+ - Fix feedback message when the user is too close to the camera
43
+
44
+ - Fix state warning after component mounting
45
+
46
+ ## v0.2.0
47
+
48
+ ### New features
49
+
50
+ - Add language support fallback
51
+
52
+ ### Fixes
53
+
54
+ - Fix typos in Spanish, Latin Spanish and Italian localisations
55
+ - Fix assets configuration in integrators.md
56
+
3
57
  ## v0.1.0
4
58
 
5
- ## New Features
59
+ ### New Features
6
60
 
7
- - Added image quality prop
61
+ - Add image quality prop
8
62
  - Set JPEG High quality as default image format
9
63
  - Add languages support:
10
64
 
@@ -25,7 +79,7 @@
25
79
  | ios_saf | 14,13.4-13.7,13.3 |
26
80
  | safari | 14,13.1,13,12.1 |
27
81
 
28
- ## Fixes
82
+ ### Fixes
29
83
 
30
84
  - Fix Manual mode Capture Bug
31
85
  - Fix Android 11 Chrome freeze bug
@@ -33,6 +87,8 @@
33
87
 
34
88
  ## v0.1.0-beta.1
35
89
 
90
+ ### New Features
91
+
36
92
  - Update TinyFace image validation values
37
93
  - imageType prop with `original | cropped`
38
94
  - Add initial delay to the Auto Capture Flow
package/README.md CHANGED
@@ -1,4 +1,6 @@
1
- # React Face capture integration
1
+ # Yoti Face capture integration
2
+
3
+ The purpose of this module is to capture a face and return the output image.
2
4
 
3
5
  ## Pre-requisite to adopt the dependency
4
6
 
@@ -15,14 +17,14 @@ The package depends on the following peer dependencies
15
17
 
16
18
  <browserSupportTable>
17
19
 
18
- | Browser | Versions |
19
- | ------- | ----------------- |
20
- | and_chr | 86 |
21
- | chrome | 86,85,84,83 |
22
- | edge | 86,85 |
23
- | firefox | 82,81,80,79 |
24
- | ios_saf | 14,13.4-13.7,13.3 |
25
- | safari | 14,13.1,13,12.1 |
20
+ | Browser | Versions |
21
+ | ------- | ----------------------------- |
22
+ | and_chr | 96 |
23
+ | chrome | 96,95,94,93 |
24
+ | edge | 96,95 |
25
+ | firefox | 95,94,93,92 |
26
+ | ios_saf | 15.0-15.1,14.5-14.8,14.0-14.4 |
27
+ | safari | 15.1,15,14.1,14 |
26
28
 
27
29
  </browserSupportTable>
28
30
 
@@ -47,46 +49,69 @@ import "@getyoti/react-face-capture/index.css"
47
49
 
48
50
  ## Copy assets
49
51
 
50
- **Assets** are not included in the javascript bundle. To have the components to work correctly, you will need to copy library assets from `@getyoti/react-face-capture/assets` folder into your distribution folder assets.
52
+ **Assets** are not included in the javascript bundle. To have the components to work correctly, you will need to copy library assets from `@getyoti/react-face-capture/assets` folder into your assets folder.
51
53
 
52
54
  For instance, in webpack you can use the plugin `copy-webpack-plugin` in the following way:
53
55
 
54
56
  ```js
55
57
  new CopyPlugin([
56
58
  {
57
- from: path.resolve(__dirname, './node_modules/@getyoti/react-face-capture/dist/assets'),
58
- to: path.resolve(__dirname, './dist/assets')
59
+ from: path.resolve(__dirname, './node_modules/@getyoti/react-face-capture/assets'),
60
+ to: path.resolve(__dirname, './assets')
59
61
  }
60
62
  ]),
61
63
  ```
62
64
 
63
- ## Component API contract
64
-
65
- | Property name | Type | Default | Mand | Description |
66
- | -------------------- | -------------------------- | ---------- | ---- | -------------------------------------------------------------------------------------------------------------------- |
67
- | captureMethod | String `manual/auto` | `manual` | - | The way you capture the photo, either with the button of auto-capture |
68
- | onSuccess | Function({ image }) | - | Y | Callback which will be called once the result (capture) is complete |
69
- | onError | Function | - | - | Callback which will be called when there is an error. See Appendix for the list of error codes we currently support. |
70
- | showOverlay | Boolean | `true` | - | Use a face overlay |
71
- | widthMinConstraint | Number | `1024` | - | Video min width constraint passed to `getUserMedia` |
72
- | widthIdealConstraint | Number | `1280` | - | Video ideal width constraint passed to `getUserMedia` |
73
- | format | String | `jpeg` | - | Image format |
74
- | CustomButton | Function | see Zeplin | - | Custom UI of the button. It uses `onClick` and `disabled` as props |
75
- | countdownMode | String `auto/never/always` | `never` | - | Note: `auto` means it will be hidden on mobile and shown on desktop |
76
- | imageType | String `original/cropped` | `original` | - | Cropped image to improve performance on processing from the API |
77
- | isDebug | Boolean | false | - | If `true`, display useful information |
78
- | qualityType | String `high/medium/low` | `high` | - | The quality of the image taken for jpeg format only. High (1) - Medium (0.96) - Low (0.90) |
79
- | language | Language code (\*) | `en` | - | The language code to set the language of the feedback messages |
65
+ ## Props
66
+
67
+ | Property name | Type | Default | Mand | Description |
68
+ | -------------------- | -------------------------- | ------------- | ---- | -------------------------------------------------------------------------------------------------------------------- |
69
+ | captureMethod | String `manual/auto` | `manual` | - | The way you capture the photo, either with the button of auto-capture |
70
+ | onSuccess | Function({ image }) | - | Y | Callback which will be called once the result (capture) is complete |
71
+ | onError | Function | - | - | Callback which will be called when there is an error. See Appendix for the list of error codes we currently support. |
72
+ | showOverlay | Boolean | `true` | - | Use a face overlay |
73
+ | widthMinConstraint | Number | `1024` | - | Video min width constraint passed to `getUserMedia` |
74
+ | widthIdealConstraint | Number | `1280` | - | Video ideal width constraint passed to `getUserMedia` |
75
+ | format | String | `jpeg` | - | Image format |
76
+ | CustomButton | Function | simple button | - | Custom UI of the button. It uses `onClick` and `disabled` as props |
77
+ | countdownMode | String `auto/never/always` | `never` | - | Note: `auto` means it will be hidden on mobile and shown on desktop |
78
+ | imageType | String `original/cropped` | `original` | - | Cropped image to improve performance on processing from the API |
79
+ | isDebug | Boolean | false | - | If `true`, display useful information |
80
+ | qualityType | String `high/medium/low` | `high` | - | The quality of the image taken for jpeg format only. High (1) - Medium (0.96) - Low (0.90) |
81
+ | language | Language code (\*) | `en` | - | The language code to set the language of the feedback messages |
80
82
 
81
83
  **(\*)**
82
84
  Current languages supported:
83
85
 
84
86
  - `en`: English
87
+ - `cs`: Czech
88
+ - `da`: Danish
89
+ - `de`: German
85
90
  - `es`: Spanish (Spain)
86
91
  - `es-419`: Spanish (Latin America)
87
- - `it`: Italian
88
- - `de`: German
92
+ - `fi`: Finnish
89
93
  - `fr`: French
94
+ - `hi`: Hindi
95
+ - `it`: Italian
96
+ - `ja`: Japanese
97
+ - `nb`: Norwegian
98
+ - `nl`: Dutch
99
+ - `pl`: Polish
100
+ - `pt`: Portuguese
101
+ - `ro`: Romanian
102
+ - `ru`: Russian
103
+ - `sv`: Swedish
104
+ - `th`: Thai
105
+ - `tr`: Turkish
106
+ - `vi`: Vietnamese
107
+
108
+ ### Language fallback
109
+
110
+ Mechanisnm 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):
111
+
112
+ - If no match, try the mainstream (es), by removing the region part (-es).
113
+ - If no mainstream, try any other available es-[region] sibling (example: es-419).
114
+ - If no regional sibling, use the default language: en.
90
115
 
91
116
  ### Supported error codes
92
117
 
@@ -94,12 +119,18 @@ Current languages supported:
94
119
  | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
95
120
  | `NO_CAMERA` | No camera detected on the user’s device |
96
121
  | `GENERIC_CAMERA_ERROR` | Other camera error. The reasons can be [various](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), and inconsistent across browsers. The complete error is logged in the user’s browser console. |
97
- | `UNSUPPORTED_BROWSER` | The user’s browser is not supported, because the API needed for camera interaction is missing. `Note: Non-Safari browser on iOS also fall into this category.` |
122
+ | `UNSUPPORTED_BROWSER` | The user’s browser is not supported, because the API needed for camera interaction is missing. `Note: Older Non-Safari browsers on iOS also fall into this category.` |
98
123
  | `NO_CAMERA_PERMISSION` | The user rejected the camera permission |
99
124
  | `OVERCONSTRAINED` | The camera constraints are not compatible with any camera device. `Note: One recovery option is to lower the widthMinConstraint value.` |
100
125
  | `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. |
101
126
  | `INTERNAL_ERROR` | Internal error. This can be due to a programming error, or the user using an old unsupported browser. |
102
127
 
128
+ The error codes can be imported as follow:
129
+
130
+ ```js
131
+ import { ERROR_CODE } from '@getyoti/react-face-capture';
132
+ ```
133
+
103
134
  ## Example
104
135
 
105
136
  ```js
@@ -113,3 +144,44 @@ export function App() {
113
144
  return <FaceCapture onSuccess={onSuccess} onError={onError} />;
114
145
  }
115
146
  ```
147
+
148
+ ## Face capture module vanilla
149
+
150
+ If you do not have a react tech stack, you can use the face capture vanilla version.
151
+ When you install the library on your machine, It's located inside the folder `vanilla`.
152
+
153
+ Add the package in your codebase and serve the static assets:
154
+
155
+ ### 1. serve package static assets
156
+
157
+ ```bash
158
+
159
+ /@getyoti/react-face-capture/vanilla/assets/face-capture/
160
+ /@getyoti/react-face-capture/vanilla/index.css
161
+ /@getyoti/react-face-capture/vanilla/index.js
162
+ ```
163
+
164
+ ### 2. Add Face capture script and style
165
+
166
+ Inside the page you want to have face capture, add Face capture scripts and style like in the example below.
167
+ `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/`.
168
+
169
+ ### 3. Render face capture
170
+
171
+ Our scripts will give you access to `Yoti.FaceCaptureModule.render` you can pass 2 parameters, first parameters are the props and are the same used in react integration and second parameter you need a html DOM reference so we know where we can render the UI.
172
+
173
+ **index.html**
174
+
175
+ ```html
176
+ <link href="/@getyoti/react-face-capture/vanilla/index.css" />
177
+ <script src="/@getyoti/react-face-capture/vanilla/index.js" />
178
+ <script>
179
+ const props = {
180
+ faceCaptureAssetsRootUrl: '/@getyoti/react-face-capture/vanilla/assets/';
181
+ };
182
+
183
+ Yoti.FaceCaptureModule.render(props, document.getElementById('face-capture-module-root'));
184
+ </script>
185
+
186
+ <div id="face-capture-module-root"></div>
187
+ ```