@tsocial/tvweb-sdk.msb 5.11.3 → 5.12.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.
Binary file
@@ -3,123 +3,123 @@
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
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:">
6
7
  <meta name="description" content="Vanilla JS demo" />
7
- <link rel="stylesheet" href="./style.css" />
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" />
8
12
  </head>
9
13
  <body>
10
14
  <noscript>You need to enable JavaScript to run this app.</noscript>
11
15
  <h2>Extract ID Info & Liveness detection</h2>
12
16
  <div id="container"></div>
13
17
 
14
- <div style="margin-bottom: 10px">
15
- Language
16
- <select id="select-lang" onchange="onSelectLang()">
17
- <option value="vi" selected>vi</option>
18
- <option value="en">en</option>
19
- </select>
20
- </div>
21
- <div style="margin-bottom: 10px">
22
- <label>
23
- Keys:
24
- <select id="select-api-key" onchange="onSelectKey()">
25
- <option value="0" selected>Web face tracking (..a31)</option>
26
- <option value="1">QA (..217)</option>
27
- <option value="2">Labeller test real data (..3b2)</option>
28
- <option value="3">Labeller test fake data (..ac4)</option>
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>
29
24
  </select>
30
- </label>
31
- </div>
32
- <div style="margin-bottom: 10px">
33
- <label>
34
- Access key
35
- <input id="access-key" style="width: 500px" />
36
- </label>
37
- </div>
38
- <div style="margin-bottom: 10px">
39
- <label>
40
- Secret key
41
- <input id="secret-key" style="width: 500px" />
42
- </label>
43
- </div>
44
- <div style="margin-bottom: 10px">
45
- <label>
46
- API URL
47
- <input id="api-url" style="width: 500px" />
48
- </label>
49
- </div>
50
- <div>
51
- Api check
52
- <select id="select-api-check">
53
- <option value="false">false</option>
54
- <option value="true" selected>true</option>
55
- </select>
56
- </div>
57
-
58
- <div style="margin-top: 10px;">
59
- <label>
60
- Cached User ID
61
- <input id="user-id" readonly style="width: 300px" />
62
- </label>
63
- <button onclick="clearUserId()">Clear user id (x-request-id)</button>
64
- </div>
65
-
66
- <div style="display: inline-block; margin-top: 10px;">
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>
34
+ </select>
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>
67
55
  <div>
68
- Tracking config
69
- <select id="select-tracking-config-template" onchange="onSelectTrackingConfigTemplate()">
70
- <option value="0" selected>default</option>
71
- <option value="1">Engineering test (...9fe5)</option>
56
+ Api check
57
+ <select id="select-api-check">
58
+ <option value="false">false</option>
59
+ <option value="true" selected>true</option>
72
60
  </select>
73
61
  </div>
74
- <textarea cols="55" rows="8" id="tracking-config"></textarea>
75
- </div>
76
-
77
- <hr />
78
- <h4>Extract ID Info</h4>
79
- <div style="display: inline-block; margin-right: 20px;">
80
- <div>Settings (notice that if <strong>Api check: true</strong>, settings from api will overwrite these settings)</div>
81
- <textarea cols="55" rows="15" id="id-card-settings"></textarea>
82
- </div>
83
- <div style="display: inline-block">
84
- <div>Steps</div>
85
- <textarea cols="55" rows="15" id="id-card-steps"></textarea>
86
- </div>
87
- <div style="margin-bottom: 10px">
88
- <button onclick="runPreloadEKYCResources()">Preload Resources</button>
89
- </div>
90
- <div style="margin-bottom: 10px">
91
- <button onclick="runWarmUpReadIDCard()">Warm up</button>
92
- <span id="status-warmup-read-id-card"></span>
93
- </div>
94
- <button onclick="startExtractIDInfo()">Start</button>
95
- <pre id="result-extract-id-info"></pre>
96
- <div id="read-id-card-loading" style="margin-top: 10px; display: none;">
97
- Api checking
98
- <div class="dot-windmill"></div>
99
- </div>
100
-
101
- <hr />
102
-
103
- <h4>Liveness detection</h4>
104
- <div>
105
- Mode:
106
- <select id="select-mode"></select>
107
- </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;">
72
+ <div>
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>
77
+ </select>
78
+ </div>
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>
108
102
  <div>
109
- Camera:
110
- <select id="select-camera">
111
- <option value="true">Front</option>
112
- <option value="false">Back</option>
113
- </select>
114
- </div>
115
- <button onclick="startLivenessDetection()" id="btn-start-liveness">
116
- Liveness detection
117
- </button>
118
- <div id="liveness-loading" style="padding-top: 10px; display: none;">
119
- Api checking
120
- <div class="dot-windmill"></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
121
  </div>
122
- <div id="result-liveness-detection"></div>
122
+
123
123
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
124
124
  <script src="https://unpkg.com/@tsocial/trustvision-sdk@2.10.1/dist/trustvision-sdk.umd.js"></script>
125
125
  <script src="../../build/tvweb-sdk.msb.standalone.min.js"></script>
@@ -142,6 +142,7 @@
142
142
  secretKey: "CkoyKslrfBGv4m53LIlH0Q8yJYf4O56e",
143
143
  },
144
144
  ];
145
+ let listObjUrls = [];
145
146
  function onSelectKey() {
146
147
  const selectedKey = document.getElementById("select-api-key").value;
147
148
  const { accessKey, secretKey } = keys[selectedKey];
@@ -153,6 +154,16 @@
153
154
  localStorage.setItem('lang', langEle?.value);
154
155
  location.reload();
155
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
+ }
156
167
  </script>
157
168
  <script type="text/javascript">
158
169
  const lang = localStorage.getItem('lang');
@@ -163,10 +174,11 @@
163
174
  const tv = new TVWebSDK.SDK({
164
175
  container: document.getElementById("container"),
165
176
  lang: lang || "vi",
166
- assetRoot: "https://unpkg.com/tv-model-prod@1.0.7/assets",
177
+ assetRoot: "https://unpkg.com/@tsocial/tvweb-sdk.msb@latest/assets",
167
178
  enableAntiDebug: false,
168
179
  });
169
180
  window.tv = tv;
181
+ tv.runPreloadEKYCResources();
170
182
  const resultExtractIdInfoEl = document.getElementById(
171
183
  "result-extract-id-info"
172
184
  );
@@ -222,17 +234,6 @@
222
234
  userIdEl.value = JSON.parse(localStorage.getItem("user-id"));
223
235
  }
224
236
 
225
- function runWarmUpReadIDCard() {
226
- statusWarmupReadIDCardEl.innerHTML = "..."
227
- tv.runWarmUpReadIDCard().then(function() {
228
- statusWarmupReadIDCardEl.innerHTML = "...done"
229
- })
230
- }
231
-
232
- function runPreloadEKYCResources() {
233
- tv.runPreloadEKYCResources();
234
- }
235
-
236
237
  function handleStepDoneIDCard ({ stepNumber, image, qrScannedResult, recordedVideos, apiResult }) {
237
238
  const steps = JSON.parse(idCardStepsEl.value)
238
239
  console.log('image', image)
@@ -243,7 +244,7 @@
243
244
 
244
245
  const imgEl = document.createElement("img");
245
246
  imgEl.width = "300";
246
- imgEl.src = URL.createObjectURL(image.blob);
247
+ imgEl.src = createObjectURL(image.blob);
247
248
  resultExtractIdInfoEl.appendChild(imgEl);
248
249
  resultExtractIdInfoEl.appendChild(document.createElement("br"));
249
250
  resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
@@ -251,10 +252,12 @@
251
252
  if (qrScannedResult) {
252
253
  const { result, image } = qrScannedResult
253
254
 
254
- const qrImgEl = document.createElement("img");
255
- qrImgEl.width = "200";
256
- qrImgEl.src = URL.createObjectURL(image.blob);
257
- resultExtractIdInfoEl.appendChild(qrImgEl);
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);
260
+ }
258
261
  resultExtractIdInfoEl.appendChild(document.createTextNode(`\n${result}\n`));
259
262
  }
260
263
 
@@ -292,8 +295,10 @@
292
295
  }
293
296
 
294
297
  function startExtractIDInfo() {
298
+ revokeObjectURL();
295
299
  const apiCheck = selectApiCheckEl.value === "true";
296
300
  resultExtractIdInfoEl.innerHTML = "";
301
+ document.body.style.height = 0;
297
302
 
298
303
  const commonProps = {
299
304
  onError: (e) => {
@@ -301,14 +306,18 @@
301
306
  document.createTextNode(`Error:\n${JSON.stringify(e, null, 2)}`)
302
307
  );
303
308
  tv.destroyView();
309
+ document.body.style.height = 'auto';
304
310
  readIdCardLoadingEl.style.display = 'none';
305
311
  },
312
+ onClose: () => {
313
+ document.body.style.height = 'auto';
314
+ tv.destroyView();
315
+ },
306
316
  clientSettings: JSON.parse(idCardSettingsEl.value),
307
317
  detectIdCard: handleDetectIdCard,
308
318
  onStepDone: handleStepDoneIDCard,
309
319
  steps: JSON.parse(idCardStepsEl.value),
310
320
  tracking: JSON.parse(trackingConfigEl.value),
311
- outputEncryptionSettings: { key: 'abc123' },
312
321
  }
313
322
 
314
323
  if (apiCheck) {
@@ -328,9 +337,11 @@
328
337
  }
329
338
 
330
339
  function startLivenessDetection() {
340
+ revokeObjectURL();
331
341
  const livenessDetectionMode = selectModeEl.value;
332
342
  const apiCheck = selectApiCheckEl.value === "true";
333
343
  const cameraSelected = document.getElementById("select-camera");
344
+ document.body.style.height = 0;
334
345
 
335
346
  tv.livenessDetection({
336
347
  apiCheck: apiCheck,
@@ -359,11 +370,12 @@
359
370
  startLivenessBtn.disabled = true;
360
371
 
361
372
  resultLivenessDetectionEl.innerHTML = "";
362
-
373
+ document.body.style.height = 'auto';
363
374
  setTimeout(() => {
364
375
  tv.destroyView();
365
376
  }, 250);
366
377
  },
378
+ onClose: () => { document.body.style.height = 'auto'; tv.destroyView(); },
367
379
  });
368
380
  }
369
381
 
@@ -372,7 +384,7 @@
372
384
 
373
385
  const imgEl = document.createElement("img");
374
386
  imgEl.width = "200";
375
- imgEl.src = URL.createObjectURL(image);
387
+ imgEl.src = createObjectURL(image);
376
388
  resultExtractIdInfoEl.appendChild(imgEl);
377
389
  resultExtractIdInfoEl.appendChild(document.createElement("br"));
378
390
  resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
@@ -407,7 +419,7 @@
407
419
  const imgEl = document.createElement("img");
408
420
  imgEl.width = "200";
409
421
  imgEl.style.marginRight = "5px";
410
- imgEl.src = URL.createObjectURL(blob);
422
+ imgEl.src = createObjectURL(blob);
411
423
  resultLivenessDetectionEl.appendChild(imgEl);
412
424
  });
413
425
  resultLivenessDetectionEl.appendChild(document.createElement("br"));
@@ -419,7 +431,7 @@
419
431
  const imgEl = document.createElement("img");
420
432
  imgEl.width = "200";
421
433
  imgEl.style.marginRight = "5px";
422
- imgEl.src = URL.createObjectURL(s.image.blob);
434
+ imgEl.src = createObjectURL(s.image.blob);
423
435
  resultLivenessDetectionEl.appendChild(imgEl);
424
436
  });
425
437
  resultLivenessDetectionEl.appendChild(document.createElement("br"));
@@ -1,3 +1,15 @@
1
+ html {
2
+ font-family: 'Inter', sans-serif;
3
+ }
4
+
5
+ #result-extract-id-info {
6
+ max-width: 100%;
7
+ white-space: break-spaces;
8
+ }
9
+ .key-input {
10
+ max-width: 500px;
11
+ width: calc(100% - 8px);
12
+ }
1
13
  .dot-windmill {
2
14
  position: relative;
3
15
  top: -10px;
@@ -48,7 +60,6 @@
48
60
  }
49
61
  }
50
62
 
51
- #btn-start-liveness {
52
- margin-top: 20px;
53
- }
54
-
63
+ #result-biz-ocr {
64
+ white-space: pre;
65
+ }
@@ -1,20 +1,21 @@
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" />
6
- <meta name="description" content="Vanilla JS demo" />
7
- <title>TrustVision SDK Examples</title>
8
- </head>
9
- <body>
10
- <noscript>You need to enable JavaScript to run this app.</noscript>
11
- <h2>TrustVision SDK Examples</h2>
12
- <ul>
13
- <li>
14
- <a href="extract-id-info-and-liveness-detection/index.html"
15
- >Extract ID info & Liveness detection</a
16
- >
17
- </li>
18
- </ul>
19
- </body>
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
+ <title>TrustVision SDK Examples</title>
8
+ </head>
9
+ <body>
10
+ <noscript>You need to enable JavaScript to run this app.</noscript>
11
+ <h2>TrustVision SDK Examples</h2>
12
+ <ul>
13
+ <li>
14
+ <a href="extract-id-info-and-liveness-detection/index.html">Extract ID info & Liveness detection</a>
15
+ </li>
16
+ <li>
17
+ <a href="native-camera/index.html">Native camera</a>
18
+ </li>
19
+ </ul>
20
+ </body>
20
21
  </html>
@@ -0,0 +1,44 @@
1
+ <!DOCTYPE html>
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
+ </head>
8
+ <body>
9
+ <noscript>You need to enable JavaScript to run this app.</noscript>
10
+ <h2>Native Camera</h2>
11
+ <button id="btn-open-camera">Open camera</button>
12
+ <div id="container"></div>
13
+ <img id="img-result" width="300"/>
14
+ <script src="../../build/tvweb-sdk.msb.standalone.min.js"></script>
15
+ <script type="text/javascript">
16
+ const tv = new TVWebSDK.SDK({
17
+ container: document.getElementById('container'),
18
+ lang: 'vi',
19
+ assetRoot: 'https://unpkg.com/@tsocial/tvweb-sdk.msb@latest/assets',
20
+ })
21
+ const buttonOpenCamera = document.getElementById('btn-open-camera')
22
+ const imgResultEl = document.getElementById('img-result')
23
+
24
+ function handleCaptureDone ({ file, encrypted }) {
25
+ imgResultEl.src = URL.createObjectURL(file)
26
+ imgResultEl.onload = function () {
27
+ URL.revokeObjectURL(this.src)
28
+ }
29
+ if (encrypted) {
30
+ alert(JSON.stringify(encrypted))
31
+ }
32
+ }
33
+
34
+ const { openCamera } = tv.initNativeCamera({
35
+ frontCamera: false,
36
+ onCaptureDone: handleCaptureDone,
37
+ useFileBrowse: true,
38
+ outputEncryptionSettings: { key: 'abc123' }
39
+ })
40
+
41
+ buttonOpenCamera.onclick = openCamera
42
+ </script>
43
+ </body>
44
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsocial/tvweb-sdk.msb",
3
- "version": "5.11.3",
3
+ "version": "5.12.0",
4
4
  "description": "TV Web SDK - The Standalone MSB SDK",
5
5
  "keywords": [],
6
6
  "author": "Nha Hoang <nha.hoang@trustingsocial.com>, Son T. Ng <son.nguyen.thai@trustingsocial.com>",
@@ -24,8 +24,8 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@tsocial/trustvision-sdk": "2.10.1",
27
- "@tsocial/tvweb-core": "^5.11.3",
28
- "@tsocial/tvweb-ui": "^5.11.3",
27
+ "@tsocial/tvweb-core": "^5.12.0",
28
+ "@tsocial/tvweb-ui": "^5.12.0",
29
29
  "invariant": "^2.2.4",
30
30
  "react": "^16.14.0",
31
31
  "react-app-polyfill": "^2.0.0",
@@ -33,7 +33,7 @@
33
33
  "styled-components": "^5.2.1"
34
34
  },
35
35
  "devDependencies": {
36
- "@tsocial/tvweb-builder": "^5.11.3"
36
+ "@tsocial/tvweb-builder": "^5.12.0"
37
37
  },
38
- "gitHead": "2aee6027a255aed2cd82d12409b8073a91bb3782"
38
+ "gitHead": "9ca20d4a4b41967541d96c1834740dae6ac162ff"
39
39
  }