@tsocial/tvweb-sdk.tcb 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.
- package/build/tvweb-sdk.cjs.min.js +10 -10
- package/build/tvweb-sdk.tcb.standalone.min.js +10 -10
- package/examples/.DS_Store +0 -0
- package/examples/extract-id-info-and-liveness-detection/.DS_Store +0 -0
- package/examples/extract-id-info-and-liveness-detection/index.html +436 -422
- package/examples/extract-id-info-and-liveness-detection/style.css +13 -6
- package/examples/index.html +18 -17
- package/examples/native-camera/index.html +44 -0
- package/package.json +5 -5
|
@@ -1,438 +1,452 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<
|
|
33
|
-
|
|
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
|
-
</
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
</
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<
|
|
83
|
-
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
</
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</div>
|
|
91
|
-
<div style="margin-bottom: 10px">
|
|
92
|
-
<button onclick="runWarmUpReadIDCard()">Warm up</button>
|
|
93
|
-
<span id="status-warmup-read-id-card"></span>
|
|
94
|
-
</div>
|
|
95
|
-
<button onclick="startExtractIDInfo()">Start</button>
|
|
96
|
-
<pre id="result-extract-id-info"></pre>
|
|
97
|
-
<div id="read-id-card-loading" style="margin-top: 10px; display: none;">
|
|
98
|
-
Api checking
|
|
99
|
-
<div class="dot-windmill"></div>
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
<hr />
|
|
103
|
-
|
|
104
|
-
<h4>Liveness detection</h4>
|
|
105
|
-
<div>
|
|
106
|
-
Mode:
|
|
107
|
-
<select id="select-mode"></select>
|
|
108
|
-
</div>
|
|
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;">
|
|
109
72
|
<div>
|
|
110
|
-
|
|
111
|
-
<select id="select-
|
|
112
|
-
<option value="
|
|
113
|
-
<option value="
|
|
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>
|
|
114
77
|
</select>
|
|
115
78
|
</div>
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
</
|
|
123
|
-
<
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
</div>
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
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.tcb.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.tcb@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);
|
|
204
260
|
}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
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,
|
|
229
292
|
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
resultExtractIdInfoEl.appendChild(
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
apiResultEl.cols = 55
|
|
265
|
-
apiResultEl.rows = 15
|
|
266
|
-
resultExtractIdInfoEl.appendChild(apiResultEl);
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
// all steps done
|
|
270
|
-
if (stepNumber === steps.length - 1) {
|
|
271
|
-
tv.destroyView();
|
|
272
|
-
readIdCardLoadingEl.style.display = 'none';
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
async function handleDetectIdCard (props) {
|
|
277
|
-
const { cardType, image, cardSide } = props
|
|
278
|
-
const apiClient = new trustvisionSdk.default(inputAccessKey.value, inputSecretKey.value, inputApiUrl.value);
|
|
279
|
-
const resultUpload = await apiClient.uploadImage({
|
|
280
|
-
file: image.blob,
|
|
281
|
-
label: `id_card.${cardType}.${cardSide}`,
|
|
282
|
-
});
|
|
283
|
-
const imageId = resultUpload.data.image_id
|
|
284
|
-
const resultDetect = await apiClient.httpClient.post('/v1/detect_id_cards_sync', {
|
|
285
|
-
card_type: cardType,
|
|
286
|
-
image: {
|
|
287
|
-
id: imageId,
|
|
288
|
-
}
|
|
289
|
-
});
|
|
290
|
-
return _.get(resultDetect, 'data.image.cards.0')
|
|
291
|
-
}
|
|
292
|
-
|
|
293
|
-
function startExtractIDInfo() {
|
|
294
|
-
const apiCheck = selectApiCheckEl.value === "true";
|
|
295
|
-
resultExtractIdInfoEl.innerHTML = "";
|
|
296
|
-
|
|
297
|
-
const commonProps = {
|
|
298
|
-
onError: (e) => {
|
|
299
|
-
resultExtractIdInfoEl.appendChild(
|
|
300
|
-
document.createTextNode(`Error:\n${JSON.stringify(e, null, 2)}`)
|
|
301
|
-
);
|
|
302
|
-
tv.destroyView();
|
|
303
|
-
readIdCardLoadingEl.style.display = 'none';
|
|
304
|
-
},
|
|
305
|
-
clientSettings: JSON.parse(idCardSettingsEl.value),
|
|
306
|
-
detectIdCard: handleDetectIdCard,
|
|
307
|
-
onStepDone: handleStepDoneIDCard,
|
|
308
|
-
steps: JSON.parse(idCardStepsEl.value),
|
|
309
|
-
tracking: JSON.parse(trackingConfigEl.value),
|
|
310
|
-
outputEncryptionSettings: JSON.parse(encryptionConfigEl.value),
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
if (apiCheck) {
|
|
314
|
-
console.log('With api call')
|
|
315
|
-
tv.readIDCardWithApiCall({
|
|
316
|
-
apiCredentials: {
|
|
317
|
-
accessKey: inputAccessKey.value,
|
|
318
|
-
secretKey: inputSecretKey.value,
|
|
319
|
-
apiUrl: inputApiUrl.value,
|
|
320
|
-
},
|
|
321
|
-
...commonProps,
|
|
322
|
-
})
|
|
323
|
-
} else {
|
|
324
|
-
console.log('UI only')
|
|
325
|
-
tv.readIDCardUIOnly(commonProps)
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
function startLivenessDetection() {
|
|
330
|
-
const livenessDetectionMode = selectModeEl.value;
|
|
331
|
-
const apiCheck = selectApiCheckEl.value === "true";
|
|
332
|
-
const cameraSelected = document.getElementById("select-camera");
|
|
333
|
-
|
|
334
|
-
tv.livenessDetection({
|
|
335
|
-
apiCheck: apiCheck,
|
|
336
|
-
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
|
+
clientSettings: JSON.parse(idCardSettingsEl.value),
|
|
317
|
+
detectIdCard: handleDetectIdCard,
|
|
318
|
+
onStepDone: handleStepDoneIDCard,
|
|
319
|
+
steps: JSON.parse(idCardStepsEl.value),
|
|
320
|
+
tracking: JSON.parse(trackingConfigEl.value),
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
if (apiCheck) {
|
|
324
|
+
console.log('With api call')
|
|
325
|
+
tv.readIDCardWithApiCall({
|
|
326
|
+
apiCredentials: {
|
|
337
327
|
accessKey: inputAccessKey.value,
|
|
338
328
|
secretKey: inputSecretKey.value,
|
|
339
329
|
apiUrl: inputApiUrl.value,
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
330
|
+
},
|
|
331
|
+
...commonProps,
|
|
332
|
+
})
|
|
333
|
+
} else {
|
|
334
|
+
console.log('UI only')
|
|
335
|
+
tv.readIDCardUIOnly(commonProps)
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
function startLivenessDetection() {
|
|
340
|
+
revokeObjectURL();
|
|
341
|
+
const livenessDetectionMode = selectModeEl.value;
|
|
342
|
+
const apiCheck = selectApiCheckEl.value === "true";
|
|
343
|
+
const cameraSelected = document.getElementById("select-camera");
|
|
344
|
+
document.body.style.height = 0;
|
|
345
|
+
|
|
346
|
+
tv.livenessDetection({
|
|
347
|
+
apiCheck: apiCheck,
|
|
348
|
+
mode: livenessDetectionMode,
|
|
349
|
+
apiCredentials: {
|
|
350
|
+
accessKey: inputAccessKey.value,
|
|
351
|
+
secretKey: inputSecretKey.value,
|
|
352
|
+
apiUrl: inputApiUrl.value,
|
|
353
|
+
},
|
|
354
|
+
onLivenessDetectionDone: handleLivenessDetectionDone,
|
|
355
|
+
captureFrameSettings: {
|
|
356
|
+
enable: true,
|
|
357
|
+
framesIntervalTime: 180,
|
|
358
|
+
framesBatchLength: 15,
|
|
359
|
+
},
|
|
360
|
+
onError: (e) => {
|
|
361
|
+
livenessLoadingEl.style.display = "none";
|
|
362
|
+
startLivenessBtn.disabled = false;
|
|
363
|
+
resultLivenessDetectionEl.appendChild(
|
|
364
|
+
document.createTextNode(`${JSON.stringify(e, null, 2)}`)
|
|
365
|
+
);
|
|
366
|
+
},
|
|
367
|
+
frontCamera: cameraSelected.value === "true",
|
|
368
|
+
onProcessing: () => {
|
|
369
|
+
livenessLoadingEl.style.display = "block";
|
|
370
|
+
startLivenessBtn.disabled = true;
|
|
360
371
|
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
});
|
|
372
|
+
resultLivenessDetectionEl.innerHTML = "";
|
|
373
|
+
document.body.style.height = 'auto';
|
|
374
|
+
setTimeout(() => {
|
|
375
|
+
tv.destroyView();
|
|
376
|
+
}, 250);
|
|
377
|
+
},
|
|
378
|
+
onClose: () => { document.body.style.height = 'auto'; tv.destroyView(); },
|
|
379
|
+
});
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
function handleReadIDCardResult({ image, recordedVideos, apiResult }) {
|
|
383
|
+
const apiCheck = selectApiCheckEl.value === "true";
|
|
384
|
+
|
|
385
|
+
const imgEl = document.createElement("img");
|
|
386
|
+
imgEl.width = "200";
|
|
387
|
+
imgEl.src = createObjectURL(image);
|
|
388
|
+
resultExtractIdInfoEl.appendChild(imgEl);
|
|
389
|
+
resultExtractIdInfoEl.appendChild(document.createElement("br"));
|
|
390
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
|
|
391
|
+
|
|
392
|
+
if (apiCheck) {
|
|
393
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
|
|
394
|
+
resultExtractIdInfoEl.appendChild(
|
|
395
|
+
document.createTextNode(`${JSON.stringify(apiResult, null, 2)}`)
|
|
396
|
+
);
|
|
397
|
+
if (cardSide === TVWebSDK.Constants.IDCardSide.FRONT) {
|
|
398
|
+
const frontCardId = apiResult.cardInfo.image1.id;
|
|
399
|
+
inputFrontIdEl.value = frontCardId;
|
|
366
400
|
}
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
tv.destroyView();
|
|
404
|
+
readIdCardLoadingEl.style.display = 'none';
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
function handleLivenessDetectionDone(result) {
|
|
408
|
+
const { frontalFaces, apiCheckPassed, steps } = result;
|
|
409
|
+
const apiCheck = selectApiCheckEl.value === "true";
|
|
410
|
+
resultLivenessDetectionEl.innerHTML = "";
|
|
411
|
+
|
|
412
|
+
if (apiCheck === false) {
|
|
413
|
+
livenessLoadingEl.style.display = "none";
|
|
414
|
+
startLivenessBtn.disabled = false;
|
|
415
|
+
resultLivenessDetectionEl.appendChild(
|
|
416
|
+
document.createTextNode("Random frontal faces detected: ")
|
|
417
|
+
);
|
|
418
|
+
frontalFaces.forEach((blob) => {
|
|
371
419
|
const imgEl = document.createElement("img");
|
|
372
420
|
imgEl.width = "200";
|
|
373
|
-
imgEl.
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
frontalFaces.forEach((blob) => {
|
|
405
|
-
const imgEl = document.createElement("img");
|
|
406
|
-
imgEl.width = "200";
|
|
407
|
-
imgEl.style.marginRight = "5px";
|
|
408
|
-
imgEl.src = URL.createObjectURL(blob);
|
|
409
|
-
resultLivenessDetectionEl.appendChild(imgEl);
|
|
410
|
-
});
|
|
411
|
-
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
412
|
-
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
413
|
-
resultLivenessDetectionEl.appendChild(
|
|
414
|
-
document.createTextNode("Directional faces:")
|
|
415
|
-
);
|
|
416
|
-
steps.forEach((s) => {
|
|
417
|
-
const imgEl = document.createElement("img");
|
|
418
|
-
imgEl.width = "200";
|
|
419
|
-
imgEl.style.marginRight = "5px";
|
|
420
|
-
imgEl.src = URL.createObjectURL(s.image.blob);
|
|
421
|
-
resultLivenessDetectionEl.appendChild(imgEl);
|
|
422
|
-
});
|
|
423
|
-
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
424
|
-
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
425
|
-
resultLivenessDetectionEl.appendChild(
|
|
426
|
-
document.createTextNode("Video:")
|
|
427
|
-
);
|
|
428
|
-
} else {
|
|
429
|
-
livenessLoadingEl.style.display = "none";
|
|
430
|
-
startLivenessBtn.disabled = false;
|
|
431
|
-
resultLivenessDetectionEl.appendChild(
|
|
432
|
-
document.createTextNode(`apiCheckPassed: ${apiCheckPassed}`)
|
|
433
|
-
);
|
|
434
|
-
}
|
|
435
|
-
}
|
|
436
|
-
</script>
|
|
437
|
-
</body>
|
|
421
|
+
imgEl.style.marginRight = "5px";
|
|
422
|
+
imgEl.src = createObjectURL(blob);
|
|
423
|
+
resultLivenessDetectionEl.appendChild(imgEl);
|
|
424
|
+
});
|
|
425
|
+
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
426
|
+
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
427
|
+
resultLivenessDetectionEl.appendChild(
|
|
428
|
+
document.createTextNode("Directional faces:")
|
|
429
|
+
);
|
|
430
|
+
steps.forEach((s) => {
|
|
431
|
+
const imgEl = document.createElement("img");
|
|
432
|
+
imgEl.width = "200";
|
|
433
|
+
imgEl.style.marginRight = "5px";
|
|
434
|
+
imgEl.src = createObjectURL(s.image.blob);
|
|
435
|
+
resultLivenessDetectionEl.appendChild(imgEl);
|
|
436
|
+
});
|
|
437
|
+
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
438
|
+
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
439
|
+
resultLivenessDetectionEl.appendChild(
|
|
440
|
+
document.createTextNode("Video:")
|
|
441
|
+
);
|
|
442
|
+
} else {
|
|
443
|
+
livenessLoadingEl.style.display = "none";
|
|
444
|
+
startLivenessBtn.disabled = false;
|
|
445
|
+
resultLivenessDetectionEl.appendChild(
|
|
446
|
+
document.createTextNode(`apiCheckPassed: ${apiCheckPassed}`)
|
|
447
|
+
);
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
</script>
|
|
451
|
+
</body>
|
|
438
452
|
</html>
|