@smileid/web-components 11.4.0 → 11.4.2

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 (98) hide show
  1. package/dist/esm/DocumentCaptureScreens-zEVFc_Kr.js +4147 -0
  2. package/dist/esm/DocumentCaptureScreens-zEVFc_Kr.js.map +1 -0
  3. package/dist/esm/{EndUserConsent-BGO3oZ-m.js → EndUserConsent-BXvS7t8z.js} +4 -4
  4. package/dist/esm/{EndUserConsent-BGO3oZ-m.js.map → EndUserConsent-BXvS7t8z.js.map} +1 -1
  5. package/dist/esm/Navigation-BRFmg7s1.js +138 -0
  6. package/dist/esm/Navigation-BRFmg7s1.js.map +1 -0
  7. package/dist/esm/{SelfieCaptureScreens-bmwnmeS9.js → SelfieCaptureScreens-DsFp21uW.js} +2520 -2906
  8. package/dist/esm/SelfieCaptureScreens-DsFp21uW.js.map +1 -0
  9. package/dist/esm/{TotpConsent-V3_Ip2Kw.js → TotpConsent-Cn2DkVza.js} +2 -2
  10. package/dist/esm/{TotpConsent-V3_Ip2Kw.js.map → TotpConsent-Cn2DkVza.js.map} +1 -1
  11. package/dist/esm/combobox.js +14 -16
  12. package/dist/esm/combobox.js.map +1 -1
  13. package/dist/esm/document.js +1 -1
  14. package/dist/esm/end-user-consent.js +1 -1
  15. package/dist/esm/{index-Dnpp-kwk.js → index-DBUdxnp9.js} +57 -57
  16. package/dist/esm/{index-Dnpp-kwk.js.map → index-DBUdxnp9.js.map} +1 -1
  17. package/dist/esm/localisation.js +1 -1
  18. package/dist/esm/main.js +6 -6
  19. package/dist/esm/navigation.js +1 -1
  20. package/dist/esm/package-Do9oHVnx.js +565 -0
  21. package/dist/esm/package-Do9oHVnx.js.map +1 -0
  22. package/dist/esm/selfie.js +1 -1
  23. package/dist/esm/smart-camera-web.js +16 -11
  24. package/dist/esm/smart-camera-web.js.map +1 -1
  25. package/dist/esm/{styles-BOEZtbuc.js → styles-BTEClL7R.js} +2 -2
  26. package/dist/esm/{styles-BOEZtbuc.js.map → styles-BTEClL7R.js.map} +1 -1
  27. package/dist/esm/totp-consent.js +1 -1
  28. package/dist/smart-camera-web.js +445 -178
  29. package/dist/smart-camera-web.js.map +1 -1
  30. package/dist/types/main.d.ts +186 -33
  31. package/lib/components/combobox/src/Combobox.js +14 -12
  32. package/lib/components/document/src/DocumentCaptureScreens.js +15 -5
  33. package/lib/components/document/src/assets/icons/guidelines/greenbook/good.svg +77 -0
  34. package/lib/components/document/src/assets/icons/guidelines/greenbook/not-blurry.svg +84 -0
  35. package/lib/components/document/src/assets/icons/guidelines/greenbook/not-cropped.svg +83 -0
  36. package/lib/components/document/src/assets/icons/guidelines/greenbook/not-reflective.svg +89 -0
  37. package/lib/components/document/src/assets/icons/guidelines/id-card/good.svg +87 -0
  38. package/lib/components/document/src/assets/icons/guidelines/id-card/not-blurry.svg +100 -0
  39. package/lib/components/document/src/assets/icons/guidelines/id-card/not-cropped.svg +93 -0
  40. package/lib/components/document/src/assets/icons/guidelines/id-card/not-reflective.svg +98 -0
  41. package/lib/components/document/src/assets/icons/guidelines/passport/good.svg +91 -0
  42. package/lib/components/document/src/assets/icons/guidelines/passport/not-blurry.svg +109 -0
  43. package/lib/components/document/src/assets/icons/guidelines/passport/not-cropped.svg +102 -0
  44. package/lib/components/document/src/assets/icons/guidelines/passport/not-reflective.svg +207 -0
  45. package/lib/components/document/src/assets/lottie/taking photo of ID FLIP 2D.lottie +0 -0
  46. package/lib/components/document/src/assets/lottie/taking photo of ID.lottie +0 -0
  47. package/lib/components/document/src/assets/lottie/taking photo of green book passport.lottie +0 -0
  48. package/lib/components/document/src/assets/lottie/taking photo of passport 2.lottie +0 -0
  49. package/lib/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js +123 -12
  50. package/lib/components/document/src/document-capture-instructions/DocumentCaptureInstructions.tsx +808 -0
  51. package/lib/components/document/src/document-capture-instructions/index.js +1 -0
  52. package/lib/components/navigation/src/Navigation.js +57 -56
  53. package/lib/components/navigation/src/Navigation.stories.js +7 -0
  54. package/lib/components/selfie/src/selfie-capture-wrapper/SelfieCaptureWrapper.tsx +113 -8
  55. package/lib/components/selfie/src/smartselfie-capture/utils/mediapipeManager.ts +65 -0
  56. package/lib/components/signature-pad/package-lock.json +11 -9
  57. package/lib/components/signature-pad/package.json +2 -2
  58. package/lib/components/smart-camera-web/src/SmartCameraWeb.js +7 -1
  59. package/lib/styles/src/styles.js +1 -1
  60. package/package.json +4 -3
  61. package/dist/README.md +0 -15
  62. package/dist/components/README.md +0 -14
  63. package/dist/components/document/src/README.md +0 -111
  64. package/dist/components/document/src/document-capture/README.md +0 -90
  65. package/dist/components/document/src/document-capture-instructions/README.md +0 -56
  66. package/dist/components/document/src/document-capture-review/README.md +0 -79
  67. package/dist/components/selfie/README.md +0 -225
  68. package/dist/components/smart-camera-web/src/README.md +0 -206
  69. package/dist/domain/camera/src/README.md +0 -38
  70. package/dist/domain/file-upload/README.md +0 -35
  71. package/dist/esm/DocumentCaptureScreens-DbU8ZxMx.js +0 -1580
  72. package/dist/esm/DocumentCaptureScreens-DbU8ZxMx.js.map +0 -1
  73. package/dist/esm/Navigation-DH44dkMT.js +0 -144
  74. package/dist/esm/Navigation-DH44dkMT.js.map +0 -1
  75. package/dist/esm/SelfieCaptureScreens-bmwnmeS9.js.map +0 -1
  76. package/dist/esm/package-7J5h4EOW.js +0 -90
  77. package/dist/esm/package-7J5h4EOW.js.map +0 -1
  78. package/dist/package-lock.json +0 -4948
  79. package/dist/package.json +0 -59
  80. package/dist/smart-camera-web.js.gz +0 -0
  81. package/dist/src/components/combobox/src/index.js +0 -425
  82. package/dist/src/components/combobox/src/index.js.map +0 -7
  83. package/dist/src/components/document/src/index.js +0 -1423
  84. package/dist/src/components/document/src/index.js.map +0 -7
  85. package/dist/src/components/end-user-consent/src/index.js +0 -1586
  86. package/dist/src/components/end-user-consent/src/index.js.map +0 -7
  87. package/dist/src/components/selfie/src/index.js +0 -1221
  88. package/dist/src/components/selfie/src/index.js.map +0 -7
  89. package/dist/src/components/signature-pad/src/index.js +0 -796
  90. package/dist/src/components/signature-pad/src/index.js.map +0 -7
  91. package/dist/src/components/smart-camera-web/src/SmartCameraWeb.js +0 -2754
  92. package/dist/src/components/smart-camera-web/src/SmartCameraWeb.js.map +0 -7
  93. package/dist/src/components/totp-consent/src/index.js +0 -1305
  94. package/dist/src/components/totp-consent/src/index.js.map +0 -7
  95. package/dist/src/index.js.map +0 -7
  96. package/dist/styles/README.md +0 -3
  97. package/dist/types/document-auto-capture.d.ts +0 -34
  98. package/dist/types/locale.d.ts +0 -19
@@ -1,206 +0,0 @@
1
- # SmartCameraWeb
2
-
3
- `SmartCameraWeb` is a [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) designed to capture images including selfies, liveness images, and ID Document images for use with SmileIdentity. It interfaces with the [Server to Server](https://docs.usesmileid.com/server-to-server) libraries, serving as a user interface client.
4
-
5
- Explore an [example full stack integration](https://glitch.com/edit/#!/smart-camera-web-demo-node) using our [NodeJS](https://docs.usesmileid.com/server-to-server/javascript) library.
6
-
7
- ## Getting Started
8
-
9
- To integrate `SmartCameraWeb`, follow these steps:
10
-
11
- - [SmartCameraWeb](#smartcameraweb)
12
- - [Getting Started](#getting-started)
13
- - [Choose a Server to Server Library](#choose-a-server-to-server-library)
14
- - [Installation](#installation)
15
- - [Install Via NPM](#install-via-npm)
16
- - [Usage](#usage)
17
- - [Compatibility](#compatibility)
18
- - [Support](#support)
19
- - [Development](#development)
20
-
21
- ### Choose a Server to Server Library
22
-
23
- Supported [Server to Server Libraries](https://docs.usesmileid.com/server-to-server) include:
24
-
25
- - [Java](https://docs.usesmileid.com/server-to-server/java)
26
- - [NodeJS](https://docs.usesmileid.com/server-to-server/javascript)
27
- - [PHP](https://docs.usesmileid.com/server-to-server/php)
28
- - [Python](https://docs.usesmileid.com/server-to-server/python)
29
- - [Ruby](https://docs.usesmileid.com/server-to-server/ruby)
30
-
31
- > **Note**: Code samples in this documentation utilize the NodeJS Server to Server library.
32
-
33
- ### Installation
34
-
35
- You can install via NPM or directly include it from our CDN.
36
-
37
- #### Install Via NPM
38
-
39
- ```shell
40
- npm install @smileid/web-components@<version>
41
- ```
42
-
43
- Then, in your VueJS, AngularJS, or React component:
44
-
45
- ```js
46
- import '@smileid/web-components/smart-camera-web';
47
- ```
48
-
49
- ### Usage
50
-
51
- After installation and necessary imports:
52
-
53
- 1. Add the desired markup to your page/component:
54
- - **For Selfie Capture / Liveness Images**:
55
-
56
- ```html
57
- <smart-camera-web></smart-camera-web>
58
- ```
59
-
60
- - **For Selfie Capture / Liveness and ID Images**:
61
-
62
- ```html
63
- <smart-camera-web capture-id></smart-camera-web>
64
- ```
65
-
66
- Initially, you'll see this image:
67
- ![Selfie Capture Instruction](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture-instruction.png)
68
-
69
- After granting access, the capture screen appears:
70
- ![Selfie Camera](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture.png)
71
-
72
- Upon capturing a selfie, you'll reach the review screen:
73
- ![Selfie Review](https://cdn.smileidentity.com/images/smart-camera-web/selfie-capture-review.png)
74
-
75
- ![Document Capture Instruction](https://cdn.smileidentity.com/images/smart-camera-web/document-capture-instruction.png)
76
-
77
- If the `capture-id` attribute is used, additional screens include:
78
-
79
- ![ID Camera](https://cdn.smileidentity.com/images/smart-camera-web/document-capture.png)
80
-
81
- ![ID Review](https://cdn.smileidentity.com/images/smart-camera-web/document-review-new.png)
82
-
83
- 2. Handle the `smart-camera-web.publish` event:
84
-
85
- When the user approves the captured image, an `smart-camera-web.publish` event is dispatched. The event returns a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) payload in `e.detail`.
86
-
87
- Here's a script example to handle the event and send data to a backend endpoint:
88
-
89
- ```html
90
- <script>
91
- const app = document.querySelector('smart-camera-web');
92
-
93
- const postContent = async (data) => {
94
- const options = {
95
- method: 'POST',
96
- headers: {
97
- 'Content-Type': 'application/json',
98
- },
99
- body: JSON.stringify(data),
100
- };
101
-
102
- try {
103
- const response = await fetch('/', options);
104
- const json = await response.json();
105
-
106
- return json;
107
- } catch (e) {
108
- throw e;
109
- }
110
- };
111
-
112
- app.addEventListener('smart-camera-web.publish', async (e) => {
113
- try {
114
- const response = await postContent(e.detail);
115
-
116
- console.log(response);
117
- } catch (e) {
118
- console.error(e);
119
- }
120
- });
121
- </script>
122
- ```
123
-
124
- The provided backend endpoint uses the NodeJS Server to Server library and ExpressJS:
125
-
126
- ```js
127
- const express = require('express');
128
- const { v4: UUID } = require('uuid');
129
-
130
- if (process.env.NODE_ENV === 'development') {
131
- const dotenv = require('dotenv');
132
-
133
- dotenv.config();
134
- }
135
-
136
- const SIDCore = require('smile-identity-core');
137
- const SIDSignature = SIDCore.Signature;
138
- const SIDWebAPI = SIDCore.WebApi;
139
-
140
- const app = express();
141
-
142
- app.use(express.json({ limit: '500kb' }));
143
- app.use(express.static('public'));
144
-
145
- app.post('/', async (req, res, next) => {
146
- try {
147
- const { PARTNER_ID, API_KEY, SID_SERVER } = process.env;
148
- const connection = new SIDWebAPI(
149
- PARTNER_ID,
150
- '/callback',
151
- API_KEY,
152
- SID_SERVER,
153
- );
154
-
155
- const partner_params_from_server = {
156
- user_id: `user-${UUID()}`,
157
- job_id: `job-${UUID()}`,
158
- job_type: 4, // job_type is the simplest job we have which enrolls a user using their selfie
159
- };
160
-
161
- const {
162
- images,
163
- partner_params: { libraryVersion },
164
- } = req.body;
165
-
166
- const options = {
167
- return_job_status: true,
168
- };
169
-
170
- const partner_params = Object.assign({}, partner_params_from_server, {
171
- libraryVersion,
172
- });
173
-
174
- const result = await connection.submit_job(
175
- partner_params,
176
- images,
177
- {},
178
- options,
179
- );
180
-
181
- res.json(result);
182
- } catch (e) {
183
- console.error(e);
184
- }
185
- });
186
-
187
- // NOTE: This can be used to process responses. don't forget to add it as a callback option in the `connection` config on L22
188
- // https://docs.usesmileid.com/further-reading/faqs/how-do-i-setup-a-callback
189
- app.post('/callback', (req, res, next) => {});
190
-
191
- app.listen(process.env.PORT || 4000);
192
- ```
193
-
194
- This approach can also be achieved using other Server to Server libraries.
195
-
196
- ## Compatibility
197
-
198
- `SmartCameraWeb` is compatible with most JavaScript frameworks and libraries. For integration with [ReactJS](https://reactjs.org), refer to this [tutorial](https://www.robinwieruch.de/react-web-components) due to React-WebComponents compatibility issues.
199
-
200
- ## Support
201
-
202
- Tested on the latest versions of Chrome, Edge, Firefox, and Safari. If compatibility issues arise on certain browsers, please notify us.
203
-
204
- ## Development
205
-
206
- Note: `smart-camera-web.js` is generated from `src/` using [esbuild](https://esbuild.github.io/). To make changes, edit the source files and run `npm run build` to generate the new `smart-camera-web.js` file.
@@ -1,38 +0,0 @@
1
- # SmartCamera.js
2
-
3
- SmartCamera.js is a JavaScript class that provides an interface for interacting with the user's camera device. It has special handling for multi-camera Samsung devices to mitigate issues with blurry images at the edges.
4
-
5
- ## Usage
6
-
7
- ### Getting Media Stream
8
-
9
- To get the media stream from the user's camera, call the `getMedia` method with the desired constraints. This method returns a Promise that resolves to a MediaStream object.
10
-
11
- ```javascript
12
- const constraints = {
13
- video: true,
14
- audio: false,
15
- };
16
- const stream = await SmartCamera.getMedia(constraints);
17
- ```
18
-
19
- `StartCamera` is a singleton so the `stream` can be accessed anytime via `SmartCamera.stream`.
20
-
21
- ```javascript
22
- let video = document.createElement('video');
23
-
24
- video.autoplay = true;
25
- video.playsInline = true;
26
- video.muted = true;
27
-
28
- if ('srcObject' in video) {
29
- video.srcObject = stream;
30
- } else {
31
- video.src = window.URL.createObjectURL(stream);
32
- }
33
- video.play();
34
- ```
35
-
36
- ### Stopping Media Stream
37
-
38
- To stop the media stream, call the stopMedia method. This will stop all tracks in the stream and set the stream to null.
@@ -1,35 +0,0 @@
1
- # SmartFileUpload.js
2
-
3
- This exports a class for dealing with file-uploads in SmileID's web components
4
-
5
- ## Usage
6
-
7
- Suppose you have an file input field
8
-
9
- ```html
10
- <input
11
- type="file"
12
- id="upload-photo"
13
- name="document"
14
- accept="image/png, image/jpeg"
15
- />
16
- ```
17
-
18
- ```javascript
19
- // get the element
20
- const uploadDocumentPhotoButton = document.getElementById('upload-photo');
21
- // add a change event listener
22
- uploadDocumentPhotoButton.addEventListener('change', async (event) => {
23
- try {
24
- const { files } = event.target;
25
-
26
- // validate file, and convert file to data url
27
- // returns the data url for the first file
28
- const fileData = await SmartFileUpload.retrieve(files);
29
-
30
- // use the data url
31
- } catch (error) {
32
- // handle error
33
- }
34
- });
35
- ```