@tsocial/tvweb-sdk 5.0.0 → 5.2.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.
|
@@ -1,382 +1,427 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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 Extract ID Info</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
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
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
|
-
|
|
184
|
-
|
|
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
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
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
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
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 />
|
|
92
|
+
|
|
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
|
+
}
|
|
237
262
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
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
|
-
}
|
|
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
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
const cameraSelected = document.getElementById("select-camera");
|
|
280
|
+
function startExtractIDInfo() {
|
|
281
|
+
const apiCheck = selectApiCheckEl.value === "true";
|
|
282
|
+
resultExtractIdInfoEl.innerHTML = "";
|
|
274
283
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
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
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
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
|
-
}
|
|
306
|
+
},
|
|
307
|
+
...commonProps,
|
|
308
|
+
})
|
|
309
|
+
} else {
|
|
310
|
+
console.log('UI only')
|
|
311
|
+
tv.readIDCardUIOnly(commonProps)
|
|
312
|
+
}
|
|
313
|
+
}
|
|
304
314
|
|
|
305
|
-
|
|
306
|
-
|
|
315
|
+
function startLivenessDetection() {
|
|
316
|
+
const livenessDetectionMode = selectModeEl.value;
|
|
317
|
+
const apiCheck = selectApiCheckEl.value === "true";
|
|
318
|
+
const cameraSelected = document.getElementById("select-camera");
|
|
307
319
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
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
|
+
captureFrameData: true,
|
|
329
|
+
onError: (e) => {
|
|
330
|
+
livenessLoadingEl.style.display = "none";
|
|
331
|
+
startLivenessBtn.disabled = false;
|
|
332
|
+
resultLivenessDetectionEl.appendChild(
|
|
333
|
+
document.createTextNode(`${JSON.stringify(e, null, 2)}`)
|
|
334
|
+
);
|
|
335
|
+
},
|
|
336
|
+
frontCamera: cameraSelected.value === "true",
|
|
337
|
+
onProcessing: () => {
|
|
338
|
+
livenessLoadingEl.style.display = "block";
|
|
339
|
+
startLivenessBtn.disabled = true;
|
|
325
340
|
|
|
326
|
-
|
|
327
|
-
|
|
341
|
+
resultLivenessDetectionEl.innerHTML = "";
|
|
342
|
+
|
|
343
|
+
setTimeout(() => {
|
|
344
|
+
tv.destroyView();
|
|
345
|
+
}, 250);
|
|
346
|
+
},
|
|
347
|
+
});
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
function handleReadIDCardResult({ image, recordedVideos, apiResult }) {
|
|
351
|
+
const apiCheck = selectApiCheckEl.value === "true";
|
|
352
|
+
|
|
353
|
+
const imgEl = document.createElement("img");
|
|
354
|
+
imgEl.width = "200";
|
|
355
|
+
imgEl.src = URL.createObjectURL(image);
|
|
356
|
+
resultExtractIdInfoEl.appendChild(imgEl);
|
|
357
|
+
resultExtractIdInfoEl.appendChild(document.createElement("br"));
|
|
358
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
|
|
359
|
+
|
|
360
|
+
if (apiCheck) {
|
|
361
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
|
|
362
|
+
resultExtractIdInfoEl.appendChild(
|
|
363
|
+
document.createTextNode(`${JSON.stringify(apiResult, null, 2)}`)
|
|
364
|
+
);
|
|
365
|
+
if (cardSide === TVWebSDK.Constants.IDCardSide.FRONT) {
|
|
366
|
+
const frontCardId = apiResult.cardInfo.image1.id;
|
|
367
|
+
inputFrontIdEl.value = frontCardId;
|
|
328
368
|
}
|
|
369
|
+
}
|
|
329
370
|
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
371
|
+
tv.destroyView();
|
|
372
|
+
readIdCardLoadingEl.style.display = 'none';
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
function handleLivenessDetectionDone(result) {
|
|
376
|
+
const { frontalFaces, apiCheckPassed, steps, videoRecord } = result;
|
|
377
|
+
const apiCheck = selectApiCheckEl.value === "true";
|
|
378
|
+
resultLivenessDetectionEl.innerHTML = "";
|
|
334
379
|
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
}
|
|
372
|
-
} else {
|
|
373
|
-
livenessLoadingEl.style.display = "none";
|
|
374
|
-
startLivenessBtn.disabled = false;
|
|
375
|
-
resultLivenessDetectionEl.appendChild(
|
|
376
|
-
document.createTextNode(`apiCheckPassed: ${apiCheckPassed}`)
|
|
377
|
-
);
|
|
378
|
-
}
|
|
380
|
+
if (apiCheck === false) {
|
|
381
|
+
livenessLoadingEl.style.display = "none";
|
|
382
|
+
startLivenessBtn.disabled = false;
|
|
383
|
+
resultLivenessDetectionEl.appendChild(
|
|
384
|
+
document.createTextNode("Random frontal faces detected: ")
|
|
385
|
+
);
|
|
386
|
+
frontalFaces.forEach((blob) => {
|
|
387
|
+
const imgEl = document.createElement("img");
|
|
388
|
+
imgEl.width = "200";
|
|
389
|
+
imgEl.style.marginRight = "5px";
|
|
390
|
+
imgEl.src = URL.createObjectURL(blob);
|
|
391
|
+
resultLivenessDetectionEl.appendChild(imgEl);
|
|
392
|
+
});
|
|
393
|
+
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
394
|
+
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
395
|
+
resultLivenessDetectionEl.appendChild(
|
|
396
|
+
document.createTextNode("Directional faces:")
|
|
397
|
+
);
|
|
398
|
+
steps.forEach((s) => {
|
|
399
|
+
const imgEl = document.createElement("img");
|
|
400
|
+
imgEl.width = "200";
|
|
401
|
+
imgEl.style.marginRight = "5px";
|
|
402
|
+
imgEl.src = URL.createObjectURL(s.image.blob);
|
|
403
|
+
resultLivenessDetectionEl.appendChild(imgEl);
|
|
404
|
+
});
|
|
405
|
+
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
406
|
+
resultLivenessDetectionEl.appendChild(document.createElement("br"));
|
|
407
|
+
resultLivenessDetectionEl.appendChild(
|
|
408
|
+
document.createTextNode("Video:")
|
|
409
|
+
);
|
|
410
|
+
if (videoRecord.length) {
|
|
411
|
+
const videoEl = document.createElement("video");
|
|
412
|
+
videoEl.width = "200";
|
|
413
|
+
videoEl.controls = "controls";
|
|
414
|
+
videoEl.src = URL.createObjectURL(videoRecord[0]);
|
|
415
|
+
resultLivenessDetectionEl.appendChild(videoEl);
|
|
379
416
|
}
|
|
380
|
-
|
|
381
|
-
|
|
417
|
+
} else {
|
|
418
|
+
livenessLoadingEl.style.display = "none";
|
|
419
|
+
startLivenessBtn.disabled = false;
|
|
420
|
+
resultLivenessDetectionEl.appendChild(
|
|
421
|
+
document.createTextNode(`apiCheckPassed: ${apiCheckPassed}`)
|
|
422
|
+
);
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
</script>
|
|
426
|
+
</body>
|
|
382
427
|
</html>
|