@getyoti/react-face-capture 0.1.0-beta.1 → 0.3.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.
Files changed (4) hide show
  1. package/CHANGELOG.md +62 -0
  2. package/README.md +55 -27
  3. package/index.js +1 -1
  4. package/package.json +17 -5
package/CHANGELOG.md CHANGED
@@ -1,7 +1,69 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## v0.3.1
4
+
5
+ ### New features
6
+
7
+ - Image payload optimisation on Horizontal images by removing unused image edges.
8
+
9
+ ## v0.3.0
10
+
11
+ ### New features
12
+
13
+ - Export error codes and component properties values constants
14
+
15
+ ### Fixes
16
+
17
+ - Fix feedback message when the user is too close to the camera
18
+
19
+ - Fix state warning after component mounting
20
+
21
+ ## v0.2.0
22
+
23
+ ### New features
24
+
25
+ - Add language support fallback
26
+
27
+ ### Fixes
28
+
29
+ - Fix typos in Spanish, Latin Spanish and Italian localisations
30
+ - Fix assets configuration in integrators.md
31
+
32
+ ## v0.1.0
33
+
34
+ ### New Features
35
+
36
+ - Add image quality prop
37
+ - Set JPEG High quality as default image format
38
+ - Add languages support:
39
+
40
+ - EN - English
41
+ - DE - German
42
+ - ES - Spanish
43
+ - ES-419 Latin Spanish
44
+ - FR - French
45
+ - IT - Italian
46
+
47
+ - Browser support:
48
+ | Browser | Versions |
49
+ | ------- | ----------------- |
50
+ | and_chr | 86 |
51
+ | chrome | 86,85,84,83 |
52
+ | edge | 86,85 |
53
+ | firefox | 82,81,80,79 |
54
+ | ios_saf | 14,13.4-13.7,13.3 |
55
+ | safari | 14,13.1,13,12.1 |
56
+
57
+ ### Fixes
58
+
59
+ - Fix Manual mode Capture Bug
60
+ - Fix Android 11 Chrome freeze bug
61
+ - Fix Storybook endpoints
62
+
3
63
  ## v0.1.0-beta.1
4
64
 
65
+ ### New Features
66
+
5
67
  - Update TinyFace image validation values
6
68
  - imageType prop with `original | cropped`
7
69
  - Add initial delay to the Auto Capture Flow
package/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # React Face capture integration
2
2
 
3
+ The purpose of this module is to capture a face and return the output image.
4
+
3
5
  ## Pre-requisite to adopt the dependency
4
6
 
5
7
  ### Peer dependencies
@@ -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 | 91 |
23
+ | chrome | 91,90,89,88 |
24
+ | edge | 91,90 |
25
+ | firefox | 89,88,87,86 |
26
+ | ios_saf | 14.5-14.6,14.0-14.4,13.4-13.7 |
27
+ | safari | 14.1,14,13.1,13 |
26
28
 
27
29
  </browserSupportTable>
28
30
 
@@ -47,34 +49,54 @@ 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 | `png` | - | 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 |
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 |
82
+
83
+ **(\*)**
84
+ Current languages supported:
85
+
86
+ - `en`: English
87
+ - `es`: Spanish (Spain)
88
+ - `es-419`: Spanish (Latin America)
89
+ - `it`: Italian
90
+ - `de`: German
91
+ - `fr`: French
92
+
93
+ ### Language fallback
94
+
95
+ 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):
96
+
97
+ - If no match, try the mainstream (es), by removing the region part (-es).
98
+ - If no mainstream, try any other available es-[region] sibling (example: es-419).
99
+ - If no regional sibling, use the default language: en.
78
100
 
79
101
  ### Supported error codes
80
102
 
@@ -82,12 +104,18 @@ new CopyPlugin([
82
104
  | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
83
105
  | `NO_CAMERA` | No camera detected on the user’s device |
84
106
  | `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. |
85
- | `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.` |
107
+ | `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.` |
86
108
  | `NO_CAMERA_PERMISSION` | The user rejected the camera permission |
87
109
  | `OVERCONSTRAINED` | The camera constraints are not compatible with any camera device. `Note: One recovery option is to lower the widthMinConstraint value.` |
88
110
  | `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. |
89
111
  | `INTERNAL_ERROR` | Internal error. This can be due to a programming error, or the user using an old unsupported browser. |
90
112
 
113
+ The error codes can be imported as follow:
114
+
115
+ ```js
116
+ import { ERROR_CODE } from '@getyoti/react-face-capture';
117
+ ```
118
+
91
119
  ## Example
92
120
 
93
121
  ```js