@tsocial/tvweb-sdk.vib 5.11.4 → 5.12.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 (9) hide show
  1. package/build/tvweb-sdk.cjs.min.js +10 -10
  2. package/build/tvweb-sdk.vib.standalone.min.js +10 -10
  3. package/examples/.DS_Store +0 -0
  4. package/examples/extract-id-info-and-liveness-detection/.DS_Store +0 -0
  5. package/examples/extract-id-info-and-liveness-detection/index.html +434 -412
  6. package/examples/extract-id-info-and-liveness-detection/style.css +13 -6
  7. package/examples/index.html +18 -17
  8. package/examples/native-camera/index.html +44 -0
  9. package/package.json +5 -5
package/examples/extract-id-info-and-liveness-detection/index.html CHANGED
@@ -1,428 +1,450 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
6
- <meta name="description" content="Vanilla JS demo" />
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
10
-
11
- <link rel="stylesheet" href="./style.css" />
12
- </head>
13
- <body>
14
- <noscript>You need to enable JavaScript to run this app.</noscript>
15
- <h2>Extract ID Info & Liveness detection</h2>
16
- <div id="container"></div>
17
-
18
- <div style="margin-bottom: 10px">
19
- <label>
20
- Keys:
21
- <select id="select-api-key" onchange="onSelectKey()">
22
- <option value="0" selected>Web face tracking (..a31)</option>
23
- <option value="1">QA (..217)</option>
24
- <option value="2">Labeller test real data (..3b2)</option>
25
- <option value="3">Labeller test fake data (..ac4)</option>
26
- </select>
27
- </label>
28
- </div>
29
- <div style="margin-bottom: 10px">
30
- <label>
31
- Access key
32
- <input id="access-key" style="width: 500px" />
33
- </label>
34
- </div>
35
- <div style="margin-bottom: 10px">
36
- <label>
37
- Secret key
38
- <input id="secret-key" style="width: 500px" />
39
- </label>
40
- </div>
41
- <div style="margin-bottom: 10px">
42
- <label>
43
- API URL
44
- <input id="api-url" style="width: 500px" />
45
- </label>
46
- </div>
47
- <div>
48
- Api check
49
- <select id="select-api-check">
50
- <option value="false">false</option>
51
- <option value="true" selected>true</option>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
6
+ <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' https: data:; worker-src blob:">
7
+ <meta name="description" content="Vanilla JS demo" />
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="./style.css" />
12
+ </head>
13
+ <body>
14
+ <noscript>You need to enable JavaScript to run this app.</noscript>
15
+ <h2>Extract ID Info & Liveness detection</h2>
16
+ <div id="container"></div>
17
+
18
+ <div id="content">
19
+ <div style="margin-bottom: 10px">
20
+ Language
21
+ <select id="select-lang" onchange="onSelectLang()">
22
+ <option value="vi" selected>vi</option>
23
+ <option value="en">en</option>
24
+ </select>
25
+ </div>
26
+ <div style="margin-bottom: 10px">
27
+ <label>
28
+ Keys:
29
+ <select id="select-api-key" onchange="onSelectKey()">
30
+ <option value="0" selected>Web face tracking (..a31)</option>
31
+ <option value="1">QA (..217)</option>
32
+ <option value="2">Labeller test real data (..3b2)</option>
33
+ <option value="3">Labeller test fake data (..ac4)</option>
52
34
  </select>
53
- </div>
54
-
55
- <div style="margin-top: 10px;">
56
- <label>
57
- Cached User ID
58
- <input id="user-id" readonly style="width: 300px" />
59
- </label>
60
- <button onclick="clearUserId()">Clear user id (x-request-id)</button>
61
- </div>
62
-
63
- <div style="display: inline-block; margin-top: 10px;">
64
- <div>
65
- Tracking config
66
- <select id="select-tracking-config-template" onchange="onSelectTrackingConfigTemplate()">
67
- <option value="0" selected>default</option>
68
- <option value="1">Engineering test (...9fe5)</option>
69
- </select>
70
- </div>
71
- <textarea cols="55" rows="8" id="tracking-config"></textarea>
72
- </div>
73
-
74
- <hr />
75
- <h4>Extract ID Info</h4>
76
- <div style="display: inline-block; margin-right: 20px;">
77
- <div>Settings (notice that if <strong>Api check: true</strong>, settings from api will overwrite these settings)</div>
78
- <textarea cols="55" rows="15" id="id-card-settings"></textarea>
79
- </div>
80
- <div style="display: inline-block">
81
- <div>Steps</div>
82
- <textarea cols="55" rows="15" id="id-card-steps"></textarea>
83
- </div>
84
- <div style="margin-bottom: 10px">
85
- <button onclick="runWarmUpReadIDCard()">Warm up</button>
86
- <span id="status-warmup-read-id-card"></span>
87
- </div>
88
- <button onclick="startExtractIDInfo()">Start</button>
89
- <pre id="result-extract-id-info"></pre>
90
- <div id="read-id-card-loading" style="margin-top: 10px; display: none;">
91
- Api checking
92
- <div class="dot-windmill"></div>
93
- </div>
94
-
95
- <hr />
96
-
97
- <h4>Liveness detection</h4>
35
+ </label>
36
+ </div>
37
+ <div style="margin-bottom: 10px">
38
+ <label>
39
+ Access key
40
+ <input id="access-key" class="key-input" />
41
+ </label>
42
+ </div>
43
+ <div style="margin-bottom: 10px">
44
+ <label>
45
+ Secret key
46
+ <input id="secret-key" class="key-input" />
47
+ </label>
48
+ </div>
49
+ <div style="margin-bottom: 10px">
50
+ <label>
51
+ API URL
52
+ <input id="api-url" class="key-input" />
53
+ </label>
54
+ </div>
55
+ <div>
56
+ Api check
57
+ <select id="select-api-check">
58
+ <option value="false">false</option>
59
+ <option value="true" selected>true</option>
60
+ </select>
61
+ </div>
62
+
63
+ <div style="display: none; margin-top: 10px;">
64
+ <label>
65
+ Cached User ID
66
+ <input id="user-id" readonly style="width: 300px" />
67
+ </label>
68
+ <button onclick="clearUserId()">Clear user id (x-request-id)</button>
69
+ </div>
70
+
71
+ <div style="display: none; margin-top: 10px;">
98
72
  <div>
99
- Mode:
100
- <select id="select-mode"></select>
101
- </div>
102
- <div>
103
- Camera:
104
- <select id="select-camera">
105
- <option value="true">Front</option>
106
- <option value="false">Back</option>
73
+ Tracking config
74
+ <select id="select-tracking-config-template" onchange="onSelectTrackingConfigTemplate()">
75
+ <option value="0" selected>default</option>
76
+ <option value="1">Engineering test (...9fe5)</option>
107
77
  </select>
108
78
  </div>
109
- <div>
110
- <div>Custom step time constraints (ms):</div>
111
- <textarea cols="25" rows="15" id="custom-step-time-constraints"></textarea>
112
- </div>
113
- <button onclick="startLivenessDetection()" id="btn-start-liveness">
114
- Liveness detection
115
- </button>
116
- <div id="liveness-loading" style="padding-top: 10px; display: none;">
117
- Api checking
118
- <div class="dot-windmill"></div>
119
- </div>
120
- <div id="result-liveness-detection"></div>
121
- <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
122
- <script src="https://unpkg.com/@tsocial/trustvision-sdk@2.10.1/dist/trustvision-sdk.umd.js"></script>
123
- <script src="../../build/tvweb-sdk.vib.standalone.min.js"></script>
124
- <script>
125
- const keys = [
126
- {
127
- accessKey: "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31",
128
- secretKey: "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw",
129
- },
130
- {
131
- accessKey: "b96f7a1a-a7f1-46e8-9d7f-5f43d2d51217",
132
- secretKey: "SYsUyQ792pLm7rnDRQFfIL6cgAecZCOp",
133
- },
134
- {
135
- accessKey: "db3d055f-ba7b-4177-b7e8-110068bda3b2",
136
- secretKey: "R1zjKNbTH3RkT2xgO2CarxAsFbcLCdsf",
137
- },
138
- {
139
- accessKey: "4e24c8f3-7fe0-4824-9339-9a1216a72ac4",
140
- secretKey: "CkoyKslrfBGv4m53LIlH0Q8yJYf4O56e",
141
- },
142
- ];
143
- function onSelectKey() {
144
- const selectedKey = document.getElementById("select-api-key").value;
145
- const { accessKey, secretKey } = keys[selectedKey];
146
- inputAccessKey.value = accessKey;
147
- inputSecretKey.value = secretKey;
79
+ <textarea cols="40" rows="8" id="tracking-config"></textarea>
80
+ </div>
81
+
82
+ <hr />
83
+ <h4>Extract ID Info</h4>
84
+ <div style="display: none; margin-right: 20px;">
85
+ <div>Settings (notice that if <strong>Api check: true</strong>, settings from api will overwrite these settings)</div>
86
+ <textarea cols="40" rows="15" id="id-card-settings"></textarea>
87
+ </div>
88
+ <div style="display: none">
89
+ <div>Steps</div>
90
+ <textarea cols="40" rows="15" id="id-card-steps"></textarea>
91
+ </div>
92
+ <button onclick="startExtractIDInfo()">Start</button>
93
+ <pre id="result-extract-id-info"></pre>
94
+ <div id="read-id-card-loading" style="margin-top: 10px; display: none;">
95
+ Api checking
96
+ <div class="dot-windmill"></div>
97
+ </div>
98
+
99
+ <hr />
100
+
101
+ <h4>Liveness detection</h4>
102
+ <div>
103
+ Mode:
104
+ <select id="select-mode"></select>
105
+ </div>
106
+ <div style="display: none">
107
+ Camera:
108
+ <select id="select-camera">
109
+ <option value="true">Front</option>
110
+ <option value="false">Back</option>
111
+ </select>
112
+ </div>
113
+ <button onclick="startLivenessDetection()" id="btn-start-liveness" style="margin-top: 10px">
114
+ Liveness detection
115
+ </button>
116
+ <div id="liveness-loading" style="padding-top: 10px; display: none;">
117
+ Api checking
118
+ <div class="dot-windmill"></div>
119
+ </div>
120
+ <div id="result-liveness-detection"></div>
121
+ </div>
122
+
123
+ <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
124
+ <script src="https://unpkg.com/@tsocial/trustvision-sdk@2.10.1/dist/trustvision-sdk.umd.js"></script>
125
+ <script src="../../build/tvweb-sdk.vib.standalone.min.js"></script>
126
+ <script>
127
+ const keys = [
128
+ {
129
+ accessKey: "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31",
130
+ secretKey: "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw",
131
+ },
132
+ {
133
+ accessKey: "b96f7a1a-a7f1-46e8-9d7f-5f43d2d51217",
134
+ secretKey: "SYsUyQ792pLm7rnDRQFfIL6cgAecZCOp",
135
+ },
136
+ {
137
+ accessKey: "db3d055f-ba7b-4177-b7e8-110068bda3b2",
138
+ secretKey: "R1zjKNbTH3RkT2xgO2CarxAsFbcLCdsf",
139
+ },
140
+ {
141
+ accessKey: "4e24c8f3-7fe0-4824-9339-9a1216a72ac4",
142
+ secretKey: "CkoyKslrfBGv4m53LIlH0Q8yJYf4O56e",
143
+ },
144
+ ];
145
+ let listObjUrls = [];
146
+ function onSelectKey() {
147
+ const selectedKey = document.getElementById("select-api-key").value;
148
+ const { accessKey, secretKey } = keys[selectedKey];
149
+ inputAccessKey.value = accessKey;
150
+ inputSecretKey.value = secretKey;
151
+ }
152
+ function onSelectLang() {
153
+ const langEle = document.getElementById("select-lang");
154
+ localStorage.setItem('lang', langEle?.value);
155
+ location.reload();
156
+ }
157
+ function createObjectURL(blob) {
158
+ const objUrl = URL.createObjectURL(blob);
159
+ listObjUrls.push(objUrl);
160
+ return objUrl;
161
+ }
162
+ function revokeObjectURL() {
163
+ if (listObjUrls.length === 0) return;
164
+ listObjUrls.map((item) => URL.revokeObjectURL(item));
165
+ listObjUrls = [];
166
+ }
167
+ </script>
168
+ <script type="text/javascript">
169
+ const lang = localStorage.getItem('lang');
170
+ if (lang) {
171
+ const langEle = document.getElementById("select-lang");
172
+ langEle.value = lang;
173
+ }
174
+ const tv = new TVWebSDK.SDK({
175
+ container: document.getElementById("container"),
176
+ lang: lang || "vi",
177
+ assetRoot: "https://unpkg.com/@tsocial/tvweb-sdk.vib@latest/assets",
178
+ enableAntiDebug: false,
179
+ });
180
+ window.tv = tv;
181
+ tv.runPreloadEKYCResources();
182
+ const resultExtractIdInfoEl = document.getElementById(
183
+ "result-extract-id-info"
184
+ );
185
+ const resultLivenessDetectionEl = document.getElementById(
186
+ "result-liveness-detection"
187
+ );
188
+ const selectModeEl = document.getElementById("select-mode");
189
+ const selectApiCheckEl = document.getElementById("select-api-check");
190
+ const inputAccessKey = document.getElementById("access-key");
191
+ const inputSecretKey = document.getElementById("secret-key");
192
+ const inputApiUrl = document.getElementById("api-url");
193
+ const userIdEl = document.getElementById("user-id");
194
+ const trackingConfigEl = document.getElementById("tracking-config");
195
+ const readIdCardLoadingEl = document.getElementById("read-id-card-loading");
196
+ const statusWarmupReadIDCardEl = document.getElementById("status-warmup-read-id-card");
197
+ const livenessLoadingEl = document.getElementById("liveness-loading");
198
+ const startLivenessBtn = document.getElementById("btn-start-liveness");
199
+ const idCardSettingsEl = document.getElementById("id-card-settings");
200
+ const idCardStepsEl = document.getElementById("id-card-steps");
201
+ inputAccessKey.value = "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31";
202
+ inputSecretKey.value = "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw";
203
+ inputApiUrl.value = "https://tv-testing.trustingsocial.com/api";
204
+ userIdEl.value = JSON.parse(localStorage.getItem("user-id"));
205
+
206
+ const trackingConfigTemplates = [
207
+ TVWebSDK.TrackingContext.defaultTrackingConfig,
208
+ {
209
+ "enable": true,
210
+ "accessKey": "4df5f9b9-f34d-4ffa-829f-aa4889bc9fe5",
211
+ "secretKey": "dQDfxkVYXfAxpdReqdOd1zJP4pJ088Y7",
212
+ "apiUrl": "https://tv-testing.trustingsocial.com/api",
213
+ "userId": ""
214
+ },
215
+ ];
216
+ function onSelectTrackingConfigTemplate() {
217
+ const selected = document.getElementById("select-tracking-config-template").value;
218
+ trackingConfigEl.value = JSON.stringify(trackingConfigTemplates[selected], null, 2);
219
+ }
220
+
221
+ Object.keys(TVWebSDK.Constants.Mode).forEach((k) => {
222
+ const option = document.createElement("option");
223
+ option.appendChild(document.createTextNode(k));
224
+ option.setAttribute("value", TVWebSDK.Constants.Mode[k]);
225
+ selectModeEl.appendChild(option);
226
+ });
227
+
228
+ idCardSettingsEl.value = JSON.stringify(TVWebSDK.defaultClientSettings, null, 2);
229
+ idCardStepsEl.value = JSON.stringify(TVWebSDK.defaultReadIDCardSteps, null, 2);
230
+ trackingConfigEl.value = JSON.stringify(TVWebSDK.TrackingContext.defaultTrackingConfig, null, 2);
231
+
232
+ function clearUserId() {
233
+ window.localStorage.removeItem('user-id');
234
+ userIdEl.value = JSON.parse(localStorage.getItem("user-id"));
235
+ }
236
+
237
+ function handleStepDoneIDCard ({ stepNumber, image, qrScannedResult, recordedVideos, apiResult }) {
238
+ const steps = JSON.parse(idCardStepsEl.value)
239
+ console.log('image', image)
240
+
241
+ resultExtractIdInfoEl.appendChild(document.createTextNode(`\n-----------------------------------------\n`))
242
+ resultExtractIdInfoEl.appendChild(document.createTextNode(`\nSTEP NUMBER ${stepNumber}:\n`));
243
+
244
+
245
+ const imgEl = document.createElement("img");
246
+ imgEl.width = "300";
247
+ imgEl.src = createObjectURL(image.blob);
248
+ resultExtractIdInfoEl.appendChild(imgEl);
249
+ resultExtractIdInfoEl.appendChild(document.createElement("br"));
250
+ resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
251
+
252
+ if (qrScannedResult) {
253
+ const { result, image } = qrScannedResult
254
+
255
+ if (image && image.blob) {
256
+ const qrImgEl = document.createElement("img");
257
+ qrImgEl.width = "200";
258
+ qrImgEl.src = URL.createObjectURL(image.blob);
259
+ resultExtractIdInfoEl.appendChild(qrImgEl);
148
260
  }
149
- </script>
150
- <script type="text/javascript">
151
- const tv = new TVWebSDK.SDK({
152
- container: document.getElementById("container"),
153
- lang: "vi",
154
- assetRoot: "https://unpkg.com/@tsocial/tvweb-sdk.vib@latest/assets",
155
- enableAntiDebug: false,
156
- });
157
- window.tv = tv;
158
- const resultExtractIdInfoEl = document.getElementById(
159
- "result-extract-id-info"
160
- );
161
- const resultLivenessDetectionEl = document.getElementById(
162
- "result-liveness-detection"
163
- );
164
- const selectModeEl = document.getElementById("select-mode");
165
- const selectApiCheckEl = document.getElementById("select-api-check");
166
- const inputAccessKey = document.getElementById("access-key");
167
- const inputSecretKey = document.getElementById("secret-key");
168
- const inputApiUrl = document.getElementById("api-url");
169
- const userIdEl = document.getElementById("user-id");
170
- const trackingConfigEl = document.getElementById("tracking-config");
171
- const readIdCardLoadingEl = document.getElementById("read-id-card-loading");
172
- const customStepTimeConstraintsEl = document.getElementById("custom-step-time-constraints");
173
- const statusWarmupReadIDCardEl = document.getElementById("status-warmup-read-id-card");
174
- const livenessLoadingEl = document.getElementById("liveness-loading");
175
- const startLivenessBtn = document.getElementById("btn-start-liveness");
176
- const idCardSettingsEl = document.getElementById("id-card-settings");
177
- const idCardStepsEl = document.getElementById("id-card-steps");
178
- inputAccessKey.value = "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31";
179
- inputSecretKey.value = "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw";
180
- inputApiUrl.value = "https://tv-testing.trustingsocial.com/api";
181
- userIdEl.value = JSON.parse(localStorage.getItem("user-id"));
182
-
183
- const trackingConfigTemplates = [
184
- TVWebSDK.TrackingContext.defaultTrackingConfig,
185
- {
186
- "enable": true,
187
- "accessKey": "4df5f9b9-f34d-4ffa-829f-aa4889bc9fe5",
188
- "secretKey": "dQDfxkVYXfAxpdReqdOd1zJP4pJ088Y7",
189
- "apiUrl": "https://tv-testing.trustingsocial.com/api",
190
- "userId": ""
191
- },
192
- ];
193
- function onSelectTrackingConfigTemplate() {
194
- const selected = document.getElementById("select-tracking-config-template").value;
195
- trackingConfigEl.value = JSON.stringify(trackingConfigTemplates[selected], null, 2);
261
+ resultExtractIdInfoEl.appendChild(document.createTextNode(`\n${result}\n`));
262
+ }
263
+
264
+ if (apiResult) {
265
+ resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
266
+ const apiResultEl = document.createElement('textarea');
267
+ apiResultEl.value = JSON.stringify(apiResult, null, 2);
268
+ apiResultEl.cols = 55
269
+ apiResultEl.rows = 15
270
+ resultExtractIdInfoEl.appendChild(apiResultEl);
271
+ }
272
+
273
+ // all steps done
274
+ if (stepNumber === steps.length - 1) {
275
+ tv.destroyView();
276
+ readIdCardLoadingEl.style.display = 'none';
277
+ }
278
+ }
279
+
280
+ async function handleDetectIdCard (props) {
281
+ const { cardType, image, cardSide } = props
282
+ const apiClient = new trustvisionSdk.default(inputAccessKey.value, inputSecretKey.value, inputApiUrl.value);
283
+ const resultUpload = await apiClient.uploadImage({
284
+ file: image.blob,
285
+ label: `id_card.${cardType}.${cardSide}`,
286
+ });
287
+ const imageId = resultUpload.data.image_id
288
+ const resultDetect = await apiClient.httpClient.post('/v1/detect_id_cards_sync', {
289
+ card_type: cardType,
290
+ image: {
291
+ id: imageId,
196
292
  }
197
-
198
- Object.keys(TVWebSDK.Constants.Mode).forEach((k) => {
199
- const option = document.createElement("option");
200
- option.appendChild(document.createTextNode(k));
201
- option.setAttribute("value", TVWebSDK.Constants.Mode[k]);
202
- selectModeEl.appendChild(option);
203
- });
204
-
205
- const customStepTimeConstraintsData = {
206
- [TVWebSDK.Constants.FaceDirection.UP]: { delayTime: 1000 },
207
- [TVWebSDK.Constants.FaceDirection.LEFT]: { delayTime: 1000 },
208
- [TVWebSDK.Constants.FaceDirection.RIGHT]: { delayTime: 1000 },
209
- [TVWebSDK.Constants.FaceDirection.FRONTAL]: { delayTime: 2000 },
210
- };
211
-
212
- customStepTimeConstraintsEl.value = JSON.stringify(customStepTimeConstraintsData, null, 2);
213
- idCardSettingsEl.value = JSON.stringify(TVWebSDK.defaultClientSettings, null, 2);
214
- idCardStepsEl.value = JSON.stringify(TVWebSDK.defaultReadIDCardSteps, null, 2);
215
- trackingConfigEl.value = JSON.stringify(TVWebSDK.TrackingContext.defaultTrackingConfig, null, 2);
216
-
217
- function clearUserId() {
218
- window.localStorage.removeItem('user-id');
219
- userIdEl.value = JSON.parse(localStorage.getItem("user-id"));
220
- }
221
-
222
- function runWarmUpReadIDCard() {
223
- statusWarmupReadIDCardEl.innerHTML = "..."
224
- tv.runWarmUpReadIDCard().then(function() {
225
- statusWarmupReadIDCardEl.innerHTML = "...done"
226
- })
227
- }
228
-
229
- function handleStepDoneIDCard ({ stepNumber, image, qrScannedResult, recordedVideos, apiResult }) {
230
- const steps = JSON.parse(idCardStepsEl.value)
231
-
232
- resultExtractIdInfoEl.appendChild(document.createTextNode(`\n-----------------------------------------\n`))
233
- resultExtractIdInfoEl.appendChild(document.createTextNode(`\nSTEP NUMBER ${stepNumber}:\n`));
234
- const imgEl = document.createElement("img");
235
- imgEl.width = "300";
236
- imgEl.src = URL.createObjectURL(image.blob);
237
- resultExtractIdInfoEl.appendChild(imgEl);
238
- resultExtractIdInfoEl.appendChild(document.createElement("br"));
239
- resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
240
-
241
- if (qrScannedResult) {
242
- const { result, image } = qrScannedResult
243
-
244
- const qrImgEl = document.createElement("img");
245
- qrImgEl.width = "200";
246
- qrImgEl.src = URL.createObjectURL(image.blob);
247
- resultExtractIdInfoEl.appendChild(qrImgEl);
248
- resultExtractIdInfoEl.appendChild(document.createTextNode(`\n${result}\n`));
249
- }
250
-
251
- if (apiResult) {
252
- resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
253
- const apiResultEl = document.createElement('textarea');
254
- apiResultEl.value = JSON.stringify(apiResult, null, 2);
255
- apiResultEl.cols = 55
256
- apiResultEl.rows = 15
257
- resultExtractIdInfoEl.appendChild(apiResultEl);
258
- }
259
-
260
- // all steps done
261
- if (stepNumber === steps.length - 1) {
262
- tv.destroyView();
263
- readIdCardLoadingEl.style.display = 'none';
264
- }
265
- }
266
-
267
- async function handleDetectIdCard (props) {
268
- const { cardType, image, cardSide } = props
269
- const apiClient = new trustvisionSdk.default(inputAccessKey.value, inputSecretKey.value, inputApiUrl.value);
270
- const resultUpload = await apiClient.uploadImage({
271
- file: image.blob,
272
- label: `id_card.${cardType}.${cardSide}`,
273
- });
274
- const imageId = resultUpload.data.image_id
275
- const resultDetect = await apiClient.httpClient.post('/v1/detect_id_cards_sync', {
276
- card_type: cardType,
277
- image: {
278
- id: imageId,
279
- }
280
- });
281
- return _.get(resultDetect, 'data.image.cards.0')
282
- }
283
-
284
- function startExtractIDInfo() {
285
- const apiCheck = selectApiCheckEl.value === "true";
286
- resultExtractIdInfoEl.innerHTML = "";
287
-
288
- const commonProps = {
289
- onError: (e) => {
290
- resultExtractIdInfoEl.appendChild(
291
- document.createTextNode(`Error:\n${JSON.stringify(e, null, 2)}`)
292
- );
293
- tv.destroyView();
294
- readIdCardLoadingEl.style.display = 'none';
295
- },
296
- clientSettings: JSON.parse(idCardSettingsEl.value),
297
- detectIdCard: handleDetectIdCard,
298
- onStepDone: handleStepDoneIDCard,
299
- steps: JSON.parse(idCardStepsEl.value),
300
- tracking: JSON.parse(trackingConfigEl.value),
301
- }
302
-
303
- if (apiCheck) {
304
- console.log('With api call')
305
- tv.readIDCardWithApiCall({
306
- apiCredentials: {
307
- accessKey: inputAccessKey.value,
308
- secretKey: inputSecretKey.value,
309
- apiUrl: inputApiUrl.value,
310
- },
311
- ...commonProps,
312
- })
313
- } else {
314
- console.log('UI only')
315
- tv.readIDCardUIOnly(commonProps)
316
- }
317
- }
318
-
319
- function startLivenessDetection() {
320
- const livenessDetectionMode = selectModeEl.value;
321
- const apiCheck = selectApiCheckEl.value === "true";
322
- const cameraSelected = document.getElementById("select-camera");
323
-
324
- tv.livenessDetection({
325
- apiCheck: apiCheck,
326
- mode: livenessDetectionMode,
293
+ });
294
+ return _.get(resultDetect, 'data.image.cards.0')
295
+ }
296
+
297
+ function startExtractIDInfo() {
298
+ revokeObjectURL();
299
+ const apiCheck = selectApiCheckEl.value === "true";
300
+ resultExtractIdInfoEl.innerHTML = "";
301
+ document.body.style.height = 0;
302
+
303
+ const commonProps = {
304
+ onError: (e) => {
305
+ resultExtractIdInfoEl.appendChild(
306
+ document.createTextNode(`Error:\n${JSON.stringify(e, null, 2)}`)
307
+ );
308
+ tv.destroyView();
309
+ document.body.style.height = 'auto';
310
+ readIdCardLoadingEl.style.display = 'none';
311
+ },
312
+ onClose: () => {
313
+ document.body.style.height = 'auto';
314
+ tv.destroyView();
315
+ },
316
+ detectIdCard: handleDetectIdCard,
317
+ onStepDone: handleStepDoneIDCard,
318
+ tracking: JSON.parse(trackingConfigEl.value),
319
+ }
320
+
321
+ if (apiCheck) {
322
+ console.log('With api call')
323
+ tv.readIDCardWithApiCall({
324
+ apiCredentials: {
327
325
  accessKey: inputAccessKey.value,
328
326
  secretKey: inputSecretKey.value,
329
327
  apiUrl: inputApiUrl.value,
330
- onLivenessDetectionDone: handleLivenessDetectionDone,
331
- customStepTimeConstraints: JSON.parse(customStepTimeConstraintsEl.value),
332
- captureFrameSettings: {
333
- enable: true,
334
- framesIntervalTime: 180,
335
- framesBatchLength: 0,
336
- },
337
- onError: (e) => {
338
- livenessLoadingEl.style.display = "none";
339
- startLivenessBtn.disabled = false;
340
- resultLivenessDetectionEl.appendChild(
341
- document.createTextNode(`${JSON.stringify(e, null, 2)}`)
342
- );
343
- },
344
- frontCamera: cameraSelected.value === "true",
345
- onProcessing: () => {
346
- livenessLoadingEl.style.display = "block";
347
- startLivenessBtn.disabled = true;
348
-
349
- resultLivenessDetectionEl.innerHTML = "";
328
+ },
329
+ ...commonProps,
330
+ })
331
+ } else {
332
+ console.log('UI only')
333
+ tv.readIDCardUIOnly(commonProps)
334
+ }
335
+ }
336
+
337
+ function startLivenessDetection() {
338
+ revokeObjectURL();
339
+ const livenessDetectionMode = selectModeEl.value;
340
+ const apiCheck = selectApiCheckEl.value === "true";
341
+ const cameraSelected = document.getElementById("select-camera");
342
+ document.body.style.height = 0;
343
+
344
+ tv.livenessDetection({
345
+ apiCheck: apiCheck,
346
+ mode: livenessDetectionMode,
347
+ apiCredentials: {
348
+ accessKey: inputAccessKey.value,
349
+ secretKey: inputSecretKey.value,
350
+ apiUrl: inputApiUrl.value,
351
+ },
352
+ onLivenessDetectionDone: handleLivenessDetectionDone,
353
+ captureFrameSettings: {
354
+ enable: true,
355
+ framesIntervalTime: 180,
356
+ framesBatchLength: 15,
357
+ },
358
+ onError: (e) => {
359
+ livenessLoadingEl.style.display = "none";
360
+ startLivenessBtn.disabled = false;
361
+ resultLivenessDetectionEl.appendChild(
362
+ document.createTextNode(`${JSON.stringify(e, null, 2)}`)
363
+ );
364
+ },
365
+ frontCamera: cameraSelected.value === "true",
366
+ onProcessing: () => {
367
+ livenessLoadingEl.style.display = "block";
368
+ startLivenessBtn.disabled = true;
350
369
 
351
- setTimeout(() => {
352
- tv.destroyView();
353
- }, 250);
354
- },
355
- });
370
+ resultLivenessDetectionEl.innerHTML = "";
371
+ document.body.style.height = 'auto';
372
+ setTimeout(() => {
373
+ tv.destroyView();
374
+ }, 250);
375
+ },
376
+ onClose: () => { document.body.style.height = 'auto'; tv.destroyView(); },
377
+ });
378
+ }
379
+
380
+ function handleReadIDCardResult({ image, recordedVideos, apiResult }) {
381
+ const apiCheck = selectApiCheckEl.value === "true";
382
+
383
+ const imgEl = document.createElement("img");
384
+ imgEl.width = "200";
385
+ imgEl.src = createObjectURL(image);
386
+ resultExtractIdInfoEl.appendChild(imgEl);
387
+ resultExtractIdInfoEl.appendChild(document.createElement("br"));
388
+ resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
389
+
390
+ if (apiCheck) {
391
+ resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
392
+ resultExtractIdInfoEl.appendChild(
393
+ document.createTextNode(`${JSON.stringify(apiResult, null, 2)}`)
394
+ );
395
+ if (cardSide === TVWebSDK.Constants.IDCardSide.FRONT) {
396
+ const frontCardId = apiResult.cardInfo.image1.id;
397
+ inputFrontIdEl.value = frontCardId;
356
398
  }
357
-
358
- function handleReadIDCardResult({ image, recordedVideos, apiResult }) {
359
- const apiCheck = selectApiCheckEl.value === "true";
360
-
399
+ }
400
+
401
+ tv.destroyView();
402
+ readIdCardLoadingEl.style.display = 'none';
403
+ }
404
+
405
+ function handleLivenessDetectionDone(result) {
406
+ const { frontalFaces, apiCheckPassed, steps } = result;
407
+ const apiCheck = selectApiCheckEl.value === "true";
408
+ resultLivenessDetectionEl.innerHTML = "";
409
+
410
+ if (apiCheck === false) {
411
+ livenessLoadingEl.style.display = "none";
412
+ startLivenessBtn.disabled = false;
413
+ resultLivenessDetectionEl.appendChild(
414
+ document.createTextNode("Random frontal faces detected: ")
415
+ );
416
+ frontalFaces.forEach((blob) => {
361
417
  const imgEl = document.createElement("img");
362
418
  imgEl.width = "200";
363
- imgEl.src = URL.createObjectURL(image);
364
- resultExtractIdInfoEl.appendChild(imgEl);
365
- resultExtractIdInfoEl.appendChild(document.createElement("br"));
366
- resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
367
-
368
- if (apiCheck) {
369
- resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
370
- resultExtractIdInfoEl.appendChild(
371
- document.createTextNode(`${JSON.stringify(apiResult, null, 2)}`)
372
- );
373
- if (cardSide === TVWebSDK.Constants.IDCardSide.FRONT) {
374
- const frontCardId = apiResult.cardInfo.image1.id;
375
- inputFrontIdEl.value = frontCardId;
376
- }
377
- }
378
-
379
- tv.destroyView();
380
- readIdCardLoadingEl.style.display = 'none';
381
- }
382
-
383
- function handleLivenessDetectionDone(result) {
384
- const { frontalFaces, apiCheckPassed, steps } = result;
385
- const apiCheck = selectApiCheckEl.value === "true";
386
- resultLivenessDetectionEl.innerHTML = "";
387
-
388
- if (apiCheck === false) {
389
- livenessLoadingEl.style.display = "none";
390
- startLivenessBtn.disabled = false;
391
- resultLivenessDetectionEl.appendChild(
392
- document.createTextNode("Random frontal faces detected: ")
393
- );
394
- frontalFaces.forEach((blob) => {
395
- const imgEl = document.createElement("img");
396
- imgEl.width = "200";
397
- imgEl.style.marginRight = "5px";
398
- imgEl.src = URL.createObjectURL(blob);
399
- resultLivenessDetectionEl.appendChild(imgEl);
400
- });
401
- resultLivenessDetectionEl.appendChild(document.createElement("br"));
402
- resultLivenessDetectionEl.appendChild(document.createElement("br"));
403
- resultLivenessDetectionEl.appendChild(
404
- document.createTextNode("Directional faces:")
405
- );
406
- steps.forEach((s) => {
407
- const imgEl = document.createElement("img");
408
- imgEl.width = "200";
409
- imgEl.style.marginRight = "5px";
410
- imgEl.src = URL.createObjectURL(s.image.blob);
411
- resultLivenessDetectionEl.appendChild(imgEl);
412
- });
413
- resultLivenessDetectionEl.appendChild(document.createElement("br"));
414
- resultLivenessDetectionEl.appendChild(document.createElement("br"));
415
- resultLivenessDetectionEl.appendChild(
416
- document.createTextNode("Video:")
417
- );
418
- } else {
419
- livenessLoadingEl.style.display = "none";
420
- startLivenessBtn.disabled = false;
421
- resultLivenessDetectionEl.appendChild(
422
- document.createTextNode(`apiCheckPassed: ${apiCheckPassed}`)
423
- );
424
- }
425
- }
426
- </script>
427
- </body>
419
+ imgEl.style.marginRight = "5px";
420
+ imgEl.src = createObjectURL(blob);
421
+ resultLivenessDetectionEl.appendChild(imgEl);
422
+ });
423
+ resultLivenessDetectionEl.appendChild(document.createElement("br"));
424
+ resultLivenessDetectionEl.appendChild(document.createElement("br"));
425
+ resultLivenessDetectionEl.appendChild(
426
+ document.createTextNode("Directional faces:")
427
+ );
428
+ steps.forEach((s) => {
429
+ const imgEl = document.createElement("img");
430
+ imgEl.width = "200";
431
+ imgEl.style.marginRight = "5px";
432
+ imgEl.src = createObjectURL(s.image.blob);
433
+ resultLivenessDetectionEl.appendChild(imgEl);
434
+ });
435
+ resultLivenessDetectionEl.appendChild(document.createElement("br"));
436
+ resultLivenessDetectionEl.appendChild(document.createElement("br"));
437
+ resultLivenessDetectionEl.appendChild(
438
+ document.createTextNode("Video:")
439
+ );
440
+ } else {
441
+ livenessLoadingEl.style.display = "none";
442
+ startLivenessBtn.disabled = false;
443
+ resultLivenessDetectionEl.appendChild(
444
+ document.createTextNode(`apiCheckPassed: ${apiCheckPassed}`)
445
+ );
446
+ }
447
+ }
448
+ </script>
449
+ </body>
428
450
  </html>