@tsocial/tvweb-sdk.vib 4.4.0 → 5.1.2
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/assets/ic_close_black.png +0 -0
- package/assets/ic_loading.png +0 -0
- package/assets/qr_capture_cursor.png +0 -0
- package/build/tvweb-sdk.cjs.min.js +14 -7113
- package/build/tvweb-sdk.vib.standalone.min.js +14 -7111
- package/examples/extract-id-info-and-liveness-detection/index.html +101 -83
- package/examples/extract-id-info-and-liveness-detection/style.css +4 -0
- package/package.json +9 -11
- package/assets/.DS_Store +0 -0
- package/assets/id_card_bg_land.png +0 -0
- package/assets/id_card_mask_landscape.png +0 -0
- package/assets/id_card_mask_landscape.svg +0 -23
- package/assets/id_card_mask_portrait.png +0 -0
- package/examples/.DS_Store +0 -0
- package/examples/extract-id-info-and-liveness-detection/.DS_Store +0 -0
|
@@ -2,8 +2,12 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
6
6
|
<meta name="description" content="Vanilla JS demo" />
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
|
10
|
+
|
|
7
11
|
<link rel="stylesheet" href="./style.css" />
|
|
8
12
|
</head>
|
|
9
13
|
<body>
|
|
@@ -16,8 +20,9 @@
|
|
|
16
20
|
Keys:
|
|
17
21
|
<select id="select-api-key" onchange="onSelectKey()">
|
|
18
22
|
<option value="0" selected>Web face tracking (..a31)</option>
|
|
19
|
-
<option value="1">
|
|
20
|
-
<option value="2">Labeller test
|
|
23
|
+
<option value="1">QA (..217)</option>
|
|
24
|
+
<option value="2">Labeller test real data (..3b2)</option>
|
|
25
|
+
<option value="3">Labeller test fake data (..ac4)</option>
|
|
21
26
|
</select>
|
|
22
27
|
</label>
|
|
23
28
|
</div>
|
|
@@ -49,23 +54,19 @@
|
|
|
49
54
|
|
|
50
55
|
<hr />
|
|
51
56
|
<h4>Extract ID Info</h4>
|
|
52
|
-
<div style="margin-
|
|
53
|
-
|
|
54
|
-
<select id="select-card-side"></select>
|
|
55
|
-
</div>
|
|
56
|
-
<div style="margin-bottom: 10px">
|
|
57
|
-
Front card Id:
|
|
58
|
-
<input id="input-cardInfo-front-card-id" style="width: 500px" />
|
|
59
|
-
</div>
|
|
60
|
-
<div>
|
|
61
|
-
<div>Settings (notice that if <strong>Api check: true</strong>, settings from api will overwrite these settings):</div>
|
|
57
|
+
<div style="display: inline-block; margin-right: 20px;">
|
|
58
|
+
<div>Settings (notice that if <strong>Api check: true</strong>, settings from api will overwrite these settings)</div>
|
|
62
59
|
<textarea cols="55" rows="15" id="id-card-settings"></textarea>
|
|
63
60
|
</div>
|
|
61
|
+
<div style="display: inline-block">
|
|
62
|
+
<div>Steps</div>
|
|
63
|
+
<textarea cols="55" rows="15" id="id-card-steps"></textarea>
|
|
64
|
+
</div>
|
|
64
65
|
<div style="margin-bottom: 10px">
|
|
65
66
|
<button onclick="runWarmUpReadIDCard()">Warm up</button>
|
|
66
67
|
<span id="status-warmup-read-id-card"></span>
|
|
67
68
|
</div>
|
|
68
|
-
<button onclick="startExtractIDInfo()">Start
|
|
69
|
+
<button onclick="startExtractIDInfo()">Start</button>
|
|
69
70
|
<pre id="result-extract-id-info"></pre>
|
|
70
71
|
<div id="read-id-card-loading" style="margin-top: 10px; display: none;">
|
|
71
72
|
Api checking
|
|
@@ -98,6 +99,8 @@
|
|
|
98
99
|
<div class="dot-windmill"></div>
|
|
99
100
|
</div>
|
|
100
101
|
<div id="result-liveness-detection"></div>
|
|
102
|
+
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
|
|
103
|
+
<script src="https://unpkg.com/@tsocial/trustvision-sdk@2.10.1/dist/trustvision-sdk.umd.js"></script>
|
|
101
104
|
<script src="../../build/tvweb-sdk.vib.standalone.min.js"></script>
|
|
102
105
|
<script>
|
|
103
106
|
const keys = [
|
|
@@ -105,6 +108,10 @@
|
|
|
105
108
|
accessKey: "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31",
|
|
106
109
|
secretKey: "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw",
|
|
107
110
|
},
|
|
111
|
+
{
|
|
112
|
+
accessKey: "b96f7a1a-a7f1-46e8-9d7f-5f43d2d51217",
|
|
113
|
+
secretKey: "SYsUyQ792pLm7rnDRQFfIL6cgAecZCOp",
|
|
114
|
+
},
|
|
108
115
|
{
|
|
109
116
|
accessKey: "db3d055f-ba7b-4177-b7e8-110068bda3b2",
|
|
110
117
|
secretKey: "R1zjKNbTH3RkT2xgO2CarxAsFbcLCdsf",
|
|
@@ -126,6 +133,7 @@
|
|
|
126
133
|
container: document.getElementById("container"),
|
|
127
134
|
lang: "vi",
|
|
128
135
|
assetRoot: "https://unpkg.com/@tsocial/tvweb-sdk.vib@latest/assets",
|
|
136
|
+
enableAntiDebug: false,
|
|
129
137
|
});
|
|
130
138
|
window.tv = tv;
|
|
131
139
|
const resultExtractIdInfoEl = document.getElementById(
|
|
@@ -136,17 +144,16 @@
|
|
|
136
144
|
);
|
|
137
145
|
const selectModeEl = document.getElementById("select-mode");
|
|
138
146
|
const selectApiCheckEl = document.getElementById("select-api-check");
|
|
139
|
-
const selectCardSideEl = document.getElementById("select-card-side");
|
|
140
147
|
const inputAccessKey = document.getElementById("access-key");
|
|
141
148
|
const inputSecretKey = document.getElementById("secret-key");
|
|
142
149
|
const inputApiUrl = document.getElementById("api-url");
|
|
143
|
-
const inputFrontIdEl = document.getElementById("input-cardInfo-front-card-id");
|
|
144
150
|
const readIdCardLoadingEl = document.getElementById("read-id-card-loading");
|
|
145
151
|
const customStepTimeConstraintsEl = document.getElementById("custom-step-time-constraints");
|
|
146
152
|
const statusWarmupReadIDCardEl = document.getElementById("status-warmup-read-id-card");
|
|
147
153
|
const livenessLoadingEl = document.getElementById("liveness-loading");
|
|
148
154
|
const startLivenessBtn = document.getElementById("btn-start-liveness");
|
|
149
155
|
const idCardSettingsEl = document.getElementById("id-card-settings");
|
|
156
|
+
const idCardStepsEl = document.getElementById("id-card-steps");
|
|
150
157
|
inputAccessKey.value = "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31";
|
|
151
158
|
inputSecretKey.value = "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw";
|
|
152
159
|
inputApiUrl.value = "https://tv-testing.trustingsocial.com/api";
|
|
@@ -158,58 +165,16 @@
|
|
|
158
165
|
selectModeEl.appendChild(option);
|
|
159
166
|
});
|
|
160
167
|
|
|
161
|
-
Object.keys(TVWebSDK.Constants.IDCardSide).forEach((k) => {
|
|
162
|
-
const option = document.createElement("option");
|
|
163
|
-
option.appendChild(document.createTextNode(k));
|
|
164
|
-
option.setAttribute("value", TVWebSDK.Constants.IDCardSide[k]);
|
|
165
|
-
selectCardSideEl.appendChild(option);
|
|
166
|
-
});
|
|
167
|
-
|
|
168
168
|
const customStepTimeConstraintsData = {
|
|
169
169
|
[TVWebSDK.Constants.FaceDirection.UP]: { delayTime: 1000 },
|
|
170
170
|
[TVWebSDK.Constants.FaceDirection.LEFT]: { delayTime: 1000 },
|
|
171
171
|
[TVWebSDK.Constants.FaceDirection.RIGHT]: { delayTime: 1000 },
|
|
172
172
|
[TVWebSDK.Constants.FaceDirection.FRONTAL]: { delayTime: 2000 },
|
|
173
173
|
};
|
|
174
|
-
|
|
175
|
-
data: {
|
|
176
|
-
settings: {
|
|
177
|
-
sdk_settings: {
|
|
178
|
-
id_detection_settings: {
|
|
179
|
-
auto_capture: {
|
|
180
|
-
enable: true,
|
|
181
|
-
show_capture_button: true,
|
|
182
|
-
wait_for_best_image_time_ms: 3000,
|
|
183
|
-
},
|
|
184
|
-
blur_check: {
|
|
185
|
-
enable: true,
|
|
186
|
-
threshold: 0.82,
|
|
187
|
-
},
|
|
188
|
-
disable_capture_button_if_alert: true,
|
|
189
|
-
id_detection: {
|
|
190
|
-
enable: true,
|
|
191
|
-
},
|
|
192
|
-
limit_time_settings: {
|
|
193
|
-
enable: true,
|
|
194
|
-
limit_time_second: 30,
|
|
195
|
-
video_partial_length_seconds: 15,
|
|
196
|
-
},
|
|
197
|
-
save_frame_settings: {
|
|
198
|
-
enable: false,
|
|
199
|
-
frames_interval_ms: 190,
|
|
200
|
-
quality_web: 80,
|
|
201
|
-
},
|
|
202
|
-
scan_qr_settings: {
|
|
203
|
-
enable: true,
|
|
204
|
-
limit_time_second: 20,
|
|
205
|
-
},
|
|
206
|
-
},
|
|
207
|
-
},
|
|
208
|
-
},
|
|
209
|
-
},
|
|
210
|
-
};
|
|
174
|
+
|
|
211
175
|
customStepTimeConstraintsEl.value = JSON.stringify(customStepTimeConstraintsData, null, 2);
|
|
212
|
-
idCardSettingsEl.value = JSON.stringify(
|
|
176
|
+
idCardSettingsEl.value = JSON.stringify(TVWebSDK.defaultClientSettings, null, 2);
|
|
177
|
+
idCardStepsEl.value = JSON.stringify(TVWebSDK.defaultReadIDCardSteps, null, 2);
|
|
213
178
|
|
|
214
179
|
function runWarmUpReadIDCard() {
|
|
215
180
|
statusWarmupReadIDCardEl.innerHTML = "..."
|
|
@@ -218,37 +183,91 @@
|
|
|
218
183
|
})
|
|
219
184
|
}
|
|
220
185
|
|
|
186
|
+
function handleStepDoneIDCard ({ stepNumber, image, qrScannedResult, recordedVideos, apiResult }) {
|
|
187
|
+
const steps = JSON.parse(idCardStepsEl.value)
|
|
188
|
+
|
|
189
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode(`\n-----------------------------------------\n`))
|
|
190
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode(`\nSTEP NUMBER ${stepNumber}:\n`));
|
|
191
|
+
const imgEl = document.createElement("img");
|
|
192
|
+
imgEl.width = "300";
|
|
193
|
+
imgEl.src = URL.createObjectURL(image.blob);
|
|
194
|
+
resultExtractIdInfoEl.appendChild(imgEl);
|
|
195
|
+
resultExtractIdInfoEl.appendChild(document.createElement("br"));
|
|
196
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
|
|
197
|
+
|
|
198
|
+
if (qrScannedResult) {
|
|
199
|
+
const { result, imageBlob } = qrScannedResult
|
|
200
|
+
|
|
201
|
+
const qrImgEl = document.createElement("img");
|
|
202
|
+
qrImgEl.width = "200";
|
|
203
|
+
qrImgEl.src = URL.createObjectURL(imageBlob);
|
|
204
|
+
resultExtractIdInfoEl.appendChild(qrImgEl);
|
|
205
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode(`\n${result}\n`));
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
if (apiResult) {
|
|
209
|
+
resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
|
|
210
|
+
const apiResultEl = document.createElement('textarea');
|
|
211
|
+
apiResultEl.value = JSON.stringify(apiResult, null, 2);
|
|
212
|
+
apiResultEl.cols = 55
|
|
213
|
+
apiResultEl.rows = 15
|
|
214
|
+
resultExtractIdInfoEl.appendChild(apiResultEl);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// all steps done
|
|
218
|
+
if (stepNumber === steps.length - 1) {
|
|
219
|
+
tv.destroyView();
|
|
220
|
+
readIdCardLoadingEl.style.display = 'none';
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
async function handleDetectIdCard (props) {
|
|
225
|
+
const { cardType, imageBlob, cardSide } = props
|
|
226
|
+
const apiClient = new trustvisionSdk.default(inputAccessKey.value, inputSecretKey.value, inputApiUrl.value);
|
|
227
|
+
const resultUpload = await apiClient.uploadImage({
|
|
228
|
+
file: imageBlob,
|
|
229
|
+
label: `id_card.${cardType}.${cardSide}`,
|
|
230
|
+
});
|
|
231
|
+
const imageId = resultUpload.data.image_id
|
|
232
|
+
const resultDetect = await apiClient.httpClient.post('/v1/detect_id_cards_sync', {
|
|
233
|
+
card_type: cardType,
|
|
234
|
+
image: {
|
|
235
|
+
id: imageId,
|
|
236
|
+
}
|
|
237
|
+
});
|
|
238
|
+
return _.get(resultDetect, 'data.image.cards.0')
|
|
239
|
+
}
|
|
240
|
+
|
|
221
241
|
function startExtractIDInfo() {
|
|
222
|
-
const cardSide = selectCardSideEl.value;
|
|
223
242
|
const apiCheck = selectApiCheckEl.value === "true";
|
|
224
243
|
resultExtractIdInfoEl.innerHTML = "";
|
|
225
244
|
|
|
226
|
-
|
|
227
|
-
apiCheck: apiCheck,
|
|
228
|
-
accessKey: inputAccessKey.value,
|
|
229
|
-
secretKey: inputSecretKey.value,
|
|
230
|
-
apiUrl: inputApiUrl.value,
|
|
231
|
-
frontCamera: false,
|
|
232
|
-
cardSide: cardSide,
|
|
233
|
-
frontCardId: inputFrontIdEl.value,
|
|
234
|
-
clientSettings: JSON.parse(idCardSettingsEl.value),
|
|
235
|
-
title:
|
|
236
|
-
cardSide === TVWebSDK.Constants.IDCardSide.FRONT
|
|
237
|
-
? "Mặt trước CMND/CCCD"
|
|
238
|
-
: "Mặt sau CMND/CCCD",
|
|
239
|
-
description:
|
|
240
|
-
cardSide === TVWebSDK.Constants.IDCardSide.FRONT
|
|
241
|
-
? "Căn mặt trước CMND/CCCD vào khung"
|
|
242
|
-
: "Căn mặt sau CMND/CCCD vào khung",
|
|
243
|
-
onSuccess: handleReadIDCardResult,
|
|
245
|
+
const commonProps = {
|
|
244
246
|
onError: (e) => {
|
|
245
247
|
resultExtractIdInfoEl.appendChild(
|
|
246
|
-
document.createTextNode(
|
|
248
|
+
document.createTextNode(`Error:\n${JSON.stringify(e, null, 2)}`)
|
|
247
249
|
);
|
|
248
250
|
tv.destroyView();
|
|
249
251
|
readIdCardLoadingEl.style.display = 'none';
|
|
250
252
|
},
|
|
251
|
-
|
|
253
|
+
clientSettings: JSON.parse(idCardSettingsEl.value),
|
|
254
|
+
detectIdCard: handleDetectIdCard,
|
|
255
|
+
onStepDone: handleStepDoneIDCard,
|
|
256
|
+
steps: JSON.parse(idCardStepsEl.value),
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
if (apiCheck) {
|
|
260
|
+
console.log('With api call')
|
|
261
|
+
tv.readIDCardWithApiCall({
|
|
262
|
+
accessKey: inputAccessKey.value,
|
|
263
|
+
secretKey: inputSecretKey.value,
|
|
264
|
+
apiUrl: inputApiUrl.value,
|
|
265
|
+
...commonProps,
|
|
266
|
+
})
|
|
267
|
+
} else {
|
|
268
|
+
console.log('UI only')
|
|
269
|
+
tv.readIDCardUIOnly(commonProps)
|
|
270
|
+
}
|
|
252
271
|
}
|
|
253
272
|
|
|
254
273
|
function startLivenessDetection() {
|
|
@@ -301,7 +320,6 @@
|
|
|
301
320
|
resultExtractIdInfoEl.appendChild(
|
|
302
321
|
document.createTextNode(`${JSON.stringify(apiResult, null, 2)}`)
|
|
303
322
|
);
|
|
304
|
-
const cardSide = selectCardSideEl.value;
|
|
305
323
|
if (cardSide === TVWebSDK.Constants.IDCardSide.FRONT) {
|
|
306
324
|
const frontCardId = apiResult.cardInfo.image1.id;
|
|
307
325
|
inputFrontIdEl.value = frontCardId;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsocial/tvweb-sdk.vib",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.1.2",
|
|
4
4
|
"description": "TV Web SDK - The Standalone VIB SDK",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Nha Hoang <nha.hoang@trustingsocial.com>, Son T. Ng <son.nguyen.thai@trustingsocial.com>",
|
|
@@ -14,20 +14,18 @@
|
|
|
14
14
|
"files": [
|
|
15
15
|
"build/tvweb-sdk.vib.standalone.min.js",
|
|
16
16
|
"examples",
|
|
17
|
-
"assets"
|
|
18
|
-
"libs"
|
|
17
|
+
"assets"
|
|
19
18
|
],
|
|
20
19
|
"scripts": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"run-example": "tvweb-builder --type standalone --libName TVWebSDK --serve --serveContent examples build ./assets",
|
|
20
|
+
"build": "yarn run tvweb-builder --type standalone --libName TVWebSDK",
|
|
21
|
+
"pack": "tvweb-builder --type standalone --libName TVWebSDK --defaultAssetRoot ./assets",
|
|
22
|
+
"run-example": "tvweb-builder --type standalone --libName TVWebSDK && http-server ./ -c-1",
|
|
25
23
|
"test": "echo \"Error: run tests from root\" && exit 1"
|
|
26
24
|
},
|
|
27
25
|
"dependencies": {
|
|
28
26
|
"@tsocial/trustvision-sdk": "2.10.0",
|
|
29
|
-
"@tsocial/tvweb-core": "^
|
|
30
|
-
"@tsocial/tvweb-ui": "^
|
|
27
|
+
"@tsocial/tvweb-core": "^5.1.2",
|
|
28
|
+
"@tsocial/tvweb-ui": "^5.1.2",
|
|
31
29
|
"invariant": "^2.2.4",
|
|
32
30
|
"react": "^16.14.0",
|
|
33
31
|
"react-app-polyfill": "^2.0.0",
|
|
@@ -35,7 +33,7 @@
|
|
|
35
33
|
"styled-components": "^5.2.1"
|
|
36
34
|
},
|
|
37
35
|
"devDependencies": {
|
|
38
|
-
"@tsocial/tvweb-builder": "^
|
|
36
|
+
"@tsocial/tvweb-builder": "^5.1.2"
|
|
39
37
|
},
|
|
40
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "58c28723a6c167ab1808c8c97ca734d6dd5abdda"
|
|
41
39
|
}
|
package/assets/.DS_Store
DELETED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
-
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
-
viewBox="0 0 456 306" style="enable-background:new 0 0 456 306;" xml:space="preserve">
|
|
5
|
-
<style type="text/css">
|
|
6
|
-
.st0{clip-path:url(#SVGID_2_);}
|
|
7
|
-
.st1{opacity:0.6;stroke:#F4F4F4;stroke-dasharray:7,4;enable-background:new ;}
|
|
8
|
-
</style>
|
|
9
|
-
<g>
|
|
10
|
-
<g>
|
|
11
|
-
<defs>
|
|
12
|
-
<rect id="SVGID_1_" x="-1" y="-1" width="458" height="307"/>
|
|
13
|
-
</defs>
|
|
14
|
-
<clipPath id="SVGID_2_">
|
|
15
|
-
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
|
|
16
|
-
</clipPath>
|
|
17
|
-
<g class="st0">
|
|
18
|
-
<path class="st1" d="M-11-11v327h478V-11H-11z M444,288.5c0,2.8-2.2,5-5,5H17c-2.8,0-5-2.2-5-5v-272c0-2.8,2.2-5,5-5h422
|
|
19
|
-
c2.8,0,5,2.2,5,5V288.5z"/>
|
|
20
|
-
</g>
|
|
21
|
-
</g>
|
|
22
|
-
</g>
|
|
23
|
-
</svg>
|
|
Binary file
|
package/examples/.DS_Store
DELETED
|
Binary file
|
|
Binary file
|