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