@tsocial/tvweb-sdk 4.3.3 → 5.1.1
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/qr_capture_cursor.png +0 -0
- package/assets/qr_code_banner.png +0 -0
- package/build/tvweb-sdk.cjs.min.js +7 -7106
- package/build/tvweb-sdk.standalone.min.js +7 -7104
- package/examples/.DS_Store +0 -0
- package/examples/extract-id-info-and-liveness-detection/index.html +99 -84
- package/examples/index.html +18 -22
- package/examples/native-camera/index.html +36 -0
- package/package.json +9 -10
- package/examples/continuous-photo-capture/index.html +0 -71
|
Binary file
|
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=
|
|
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
|
+
|
|
7
8
|
<link rel="stylesheet" href="./style.css" />
|
|
8
9
|
</head>
|
|
9
10
|
<body>
|
|
@@ -16,8 +17,9 @@
|
|
|
16
17
|
Keys:
|
|
17
18
|
<select id="select-api-key" onchange="onSelectKey()">
|
|
18
19
|
<option value="0" selected>Web face tracking (..a31)</option>
|
|
19
|
-
<option value="1">
|
|
20
|
-
<option value="2">Labeller test
|
|
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>
|
|
21
23
|
</select>
|
|
22
24
|
</label>
|
|
23
25
|
</div>
|
|
@@ -49,23 +51,19 @@
|
|
|
49
51
|
|
|
50
52
|
<hr />
|
|
51
53
|
<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>
|
|
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>
|
|
62
56
|
<textarea cols="55" rows="15" id="id-card-settings"></textarea>
|
|
63
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>
|
|
64
62
|
<div style="margin-bottom: 10px">
|
|
65
63
|
<button onclick="runWarmUpReadIDCard()">Warm up</button>
|
|
66
64
|
<span id="status-warmup-read-id-card"></span>
|
|
67
65
|
</div>
|
|
68
|
-
<button onclick="startExtractIDInfo()">Start
|
|
66
|
+
<button onclick="startExtractIDInfo()">Start</button>
|
|
69
67
|
<pre id="result-extract-id-info"></pre>
|
|
70
68
|
<div id="read-id-card-loading" style="margin-top: 10px; display: none;">
|
|
71
69
|
Api checking
|
|
@@ -98,6 +96,8 @@
|
|
|
98
96
|
<div class="dot-windmill"></div>
|
|
99
97
|
</div>
|
|
100
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
101
|
<script src="../../build/tvweb-sdk.standalone.min.js"></script>
|
|
102
102
|
<script>
|
|
103
103
|
const keys = [
|
|
@@ -105,6 +105,10 @@
|
|
|
105
105
|
accessKey: "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31",
|
|
106
106
|
secretKey: "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw",
|
|
107
107
|
},
|
|
108
|
+
{
|
|
109
|
+
accessKey: "b96f7a1a-a7f1-46e8-9d7f-5f43d2d51217",
|
|
110
|
+
secretKey: "SYsUyQ792pLm7rnDRQFfIL6cgAecZCOp",
|
|
111
|
+
},
|
|
108
112
|
{
|
|
109
113
|
accessKey: "db3d055f-ba7b-4177-b7e8-110068bda3b2",
|
|
110
114
|
secretKey: "R1zjKNbTH3RkT2xgO2CarxAsFbcLCdsf",
|
|
@@ -125,7 +129,8 @@
|
|
|
125
129
|
const tv = new TVWebSDK.SDK({
|
|
126
130
|
container: document.getElementById("container"),
|
|
127
131
|
lang: "vi",
|
|
128
|
-
assetRoot: "https://unpkg.com
|
|
132
|
+
assetRoot: "https://unpkg.com/tv-model-prod@1.0.7/assets",
|
|
133
|
+
enableAntiDebug: false,
|
|
129
134
|
});
|
|
130
135
|
window.tv = tv;
|
|
131
136
|
const resultExtractIdInfoEl = document.getElementById(
|
|
@@ -136,17 +141,16 @@
|
|
|
136
141
|
);
|
|
137
142
|
const selectModeEl = document.getElementById("select-mode");
|
|
138
143
|
const selectApiCheckEl = document.getElementById("select-api-check");
|
|
139
|
-
const selectCardSideEl = document.getElementById("select-card-side");
|
|
140
144
|
const inputAccessKey = document.getElementById("access-key");
|
|
141
145
|
const inputSecretKey = document.getElementById("secret-key");
|
|
142
146
|
const inputApiUrl = document.getElementById("api-url");
|
|
143
|
-
const inputFrontIdEl = document.getElementById("input-cardInfo-front-card-id");
|
|
144
147
|
const readIdCardLoadingEl = document.getElementById("read-id-card-loading");
|
|
145
148
|
const customStepTimeConstraintsEl = document.getElementById("custom-step-time-constraints");
|
|
146
149
|
const statusWarmupReadIDCardEl = document.getElementById("status-warmup-read-id-card");
|
|
147
150
|
const livenessLoadingEl = document.getElementById("liveness-loading");
|
|
148
151
|
const startLivenessBtn = document.getElementById("btn-start-liveness");
|
|
149
152
|
const idCardSettingsEl = document.getElementById("id-card-settings");
|
|
153
|
+
const idCardStepsEl = document.getElementById("id-card-steps");
|
|
150
154
|
inputAccessKey.value = "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31";
|
|
151
155
|
inputSecretKey.value = "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw";
|
|
152
156
|
inputApiUrl.value = "https://tv-testing.trustingsocial.com/api";
|
|
@@ -158,58 +162,16 @@
|
|
|
158
162
|
selectModeEl.appendChild(option);
|
|
159
163
|
});
|
|
160
164
|
|
|
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
165
|
const customStepTimeConstraintsData = {
|
|
169
166
|
[TVWebSDK.Constants.FaceDirection.UP]: { delayTime: 1000 },
|
|
170
167
|
[TVWebSDK.Constants.FaceDirection.LEFT]: { delayTime: 1000 },
|
|
171
168
|
[TVWebSDK.Constants.FaceDirection.RIGHT]: { delayTime: 1000 },
|
|
172
169
|
[TVWebSDK.Constants.FaceDirection.FRONTAL]: { delayTime: 2000 },
|
|
173
170
|
};
|
|
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
|
-
};
|
|
171
|
+
|
|
211
172
|
customStepTimeConstraintsEl.value = JSON.stringify(customStepTimeConstraintsData, null, 2);
|
|
212
|
-
idCardSettingsEl.value = JSON.stringify(
|
|
173
|
+
idCardSettingsEl.value = JSON.stringify(TVWebSDK.defaultClientSettings, null, 2);
|
|
174
|
+
idCardStepsEl.value = JSON.stringify(TVWebSDK.defaultReadIDCardSteps, null, 2);
|
|
213
175
|
|
|
214
176
|
function runWarmUpReadIDCard() {
|
|
215
177
|
statusWarmupReadIDCardEl.innerHTML = "..."
|
|
@@ -218,37 +180,91 @@
|
|
|
218
180
|
})
|
|
219
181
|
}
|
|
220
182
|
|
|
183
|
+
function handleStepDoneIDCard ({ stepNumber, image, qrScannedResult, recordedVideos, apiResult }) {
|
|
184
|
+
const steps = JSON.parse(idCardStepsEl.value)
|
|
185
|
+
|
|
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
|
+
}
|
|
220
|
+
|
|
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
|
+
}
|
|
237
|
+
|
|
221
238
|
function startExtractIDInfo() {
|
|
222
|
-
const cardSide = selectCardSideEl.value;
|
|
223
239
|
const apiCheck = selectApiCheckEl.value === "true";
|
|
224
240
|
resultExtractIdInfoEl.innerHTML = "";
|
|
225
241
|
|
|
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,
|
|
242
|
+
const commonProps = {
|
|
244
243
|
onError: (e) => {
|
|
245
244
|
resultExtractIdInfoEl.appendChild(
|
|
246
|
-
document.createTextNode(
|
|
245
|
+
document.createTextNode(`Error:\n${JSON.stringify(e, null, 2)}`)
|
|
247
246
|
);
|
|
248
247
|
tv.destroyView();
|
|
249
248
|
readIdCardLoadingEl.style.display = 'none';
|
|
250
249
|
},
|
|
251
|
-
|
|
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
|
+
}
|
|
252
268
|
}
|
|
253
269
|
|
|
254
270
|
function startLivenessDetection() {
|
|
@@ -301,7 +317,6 @@
|
|
|
301
317
|
resultExtractIdInfoEl.appendChild(
|
|
302
318
|
document.createTextNode(`${JSON.stringify(apiResult, null, 2)}`)
|
|
303
319
|
);
|
|
304
|
-
const cardSide = selectCardSideEl.value;
|
|
305
320
|
if (cardSide === TVWebSDK.Constants.IDCardSide.FRONT) {
|
|
306
321
|
const frontCardId = apiResult.cardInfo.image1.id;
|
|
307
322
|
inputFrontIdEl.value = frontCardId;
|
package/examples/index.html
CHANGED
|
@@ -1,25 +1,21 @@
|
|
|
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
|
-
</li>
|
|
23
|
-
</ul>
|
|
24
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8"/>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
|
6
|
+
<meta name="description" content="Vanilla JS demo"/>
|
|
7
|
+
<title>TrustVision SDK Examples</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
11
|
+
<h2>TrustVision SDK Examples</h2>
|
|
12
|
+
<ul>
|
|
13
|
+
<li>
|
|
14
|
+
<a href="extract-id-info-and-liveness-detection/index.html">Extract ID info & Liveness detection</a>
|
|
15
|
+
</li>
|
|
16
|
+
<li>
|
|
17
|
+
<a href="native-camera/index.html">Native camera</a>
|
|
18
|
+
</li>
|
|
19
|
+
</ul>
|
|
20
|
+
</body>
|
|
25
21
|
</html>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8"/>
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
|
6
|
+
<meta name="description" content="Vanilla JS demo"/>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
10
|
+
<h2>Native Camera</h2>
|
|
11
|
+
<button id="btn-open-camera">Open camera</button>
|
|
12
|
+
<div id="container"></div>
|
|
13
|
+
<img id="img-result" width="300" />
|
|
14
|
+
<script src="../../build/tvweb-sdk.standalone.min.js"></script>
|
|
15
|
+
<script type="text/javascript">
|
|
16
|
+
const tv = new TVWebSDK.SDK({
|
|
17
|
+
container: document.getElementById('container'),
|
|
18
|
+
lang: 'vi',
|
|
19
|
+
assetRoot: 'https://unpkg.com/@tsocial/tvweb-sdk@latest/assets',
|
|
20
|
+
})
|
|
21
|
+
const buttonOpenCamera = document.getElementById('btn-open-camera')
|
|
22
|
+
const imgResultEl = document.getElementById('img-result')
|
|
23
|
+
|
|
24
|
+
function handleCaptureDone ({ file }) {
|
|
25
|
+
imgResultEl.src = URL.createObjectURL(file)
|
|
26
|
+
imgResultEl.onload = function () {
|
|
27
|
+
URL.revokeObjectURL(this.src)
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const { openCamera } = tv.initNativeCamera({ frontCamera: false, onCaptureDone: handleCaptureDone })
|
|
32
|
+
|
|
33
|
+
buttonOpenCamera.onclick = openCamera
|
|
34
|
+
</script>
|
|
35
|
+
</body>
|
|
36
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsocial/tvweb-sdk",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"description": "TV Web SDK - The Standalone SDK",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Nha Hoang <nha.hoang@trustingsocial.com>",
|
|
@@ -14,20 +14,18 @@
|
|
|
14
14
|
"files": [
|
|
15
15
|
"build/tvweb-sdk.standalone.min.js",
|
|
16
16
|
"examples",
|
|
17
|
-
"assets"
|
|
18
|
-
"libs"
|
|
17
|
+
"assets"
|
|
19
18
|
],
|
|
20
19
|
"scripts": {
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"pack": "tvweb-builder --type standalone --libName TVWebSDK --defaultAssetRoot ./assets --defaultLibRoot ./libs",
|
|
20
|
+
"build": "yarn run tvweb-builder --type standalone --libName TVWebSDK",
|
|
21
|
+
"pack": "tvweb-builder --type standalone --libName TVWebSDK --defaultAssetRoot ./assets",
|
|
24
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.1",
|
|
28
|
+
"@tsocial/tvweb-ui": "^5.1.1",
|
|
31
29
|
"http-server": "0.12.3",
|
|
32
30
|
"invariant": "^2.2.4",
|
|
33
31
|
"react": "^16.14.0",
|
|
@@ -36,6 +34,7 @@
|
|
|
36
34
|
"styled-components": "^5.2.1"
|
|
37
35
|
},
|
|
38
36
|
"devDependencies": {
|
|
39
|
-
"@tsocial/tvweb-builder": "^
|
|
40
|
-
}
|
|
37
|
+
"@tsocial/tvweb-builder": "^5.1.1"
|
|
38
|
+
},
|
|
39
|
+
"gitHead": "d8358928a0cd61d11a34f7b26338a44727986e59"
|
|
41
40
|
}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, user-scalable=no" />
|
|
6
|
-
<meta name="description" content="Vanilla JS demo" />
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
10
|
-
<h2>Continuous Photo Capture</h2>
|
|
11
|
-
<div id="container"></div>
|
|
12
|
-
<button onclick="startCaptureIDFront()">Start</button>
|
|
13
|
-
<div id="result"></div>
|
|
14
|
-
<script src="../../build/tvweb-sdk.standalone.min.js"></script>
|
|
15
|
-
<script type="text/javascript">
|
|
16
|
-
const tv = new TVWebSDK.SDK({
|
|
17
|
-
container: document.getElementById("container"),
|
|
18
|
-
lang: "vi",
|
|
19
|
-
assetRoot: "https://unpkg.com/@tsocial/tvweb-sdk@latest/assets",
|
|
20
|
-
});
|
|
21
|
-
const resultEl = document.getElementById("result");
|
|
22
|
-
|
|
23
|
-
function startCaptureIDFront() {
|
|
24
|
-
resultEl.innerHTML = "";
|
|
25
|
-
|
|
26
|
-
tv.readIDCard({
|
|
27
|
-
frontCamera: false,
|
|
28
|
-
title: "Mặt trước CMND/CCCD",
|
|
29
|
-
titleIcon: "id_card_front.svg",
|
|
30
|
-
description: "Vui lòng đặt CMND mặt trước vào trong khung",
|
|
31
|
-
onSuccess: handleIDFrontTaken,
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function handleIDFrontTaken({ image }) {
|
|
36
|
-
const imgEl = document.createElement("img");
|
|
37
|
-
imgEl.width = "200";
|
|
38
|
-
imgEl.src = URL.createObjectURL(image);
|
|
39
|
-
resultEl.appendChild(imgEl);
|
|
40
|
-
tv.readIDCard({
|
|
41
|
-
frontCamera: false,
|
|
42
|
-
title: "CMND mặt sau",
|
|
43
|
-
titleIcon: "id_card_back.svg",
|
|
44
|
-
description: "Vui lòng đặt CMND mặt sau vào trong khung",
|
|
45
|
-
onSuccess: handleIDBackTaken,
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
function handleIDBackTaken({ image }) {
|
|
50
|
-
const imgEl = document.createElement("img");
|
|
51
|
-
imgEl.width = "200";
|
|
52
|
-
imgEl.src = URL.createObjectURL(image);
|
|
53
|
-
resultEl.appendChild(imgEl);
|
|
54
|
-
tv.readIDCard({
|
|
55
|
-
frontCamera: true,
|
|
56
|
-
usePortraitMask: true,
|
|
57
|
-
title: "Ảnh Selfie",
|
|
58
|
-
onSuccess: handleSelfieTaken,
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function handleSelfieTaken({ image }) {
|
|
63
|
-
const imgEl = document.createElement("img");
|
|
64
|
-
imgEl.width = "200";
|
|
65
|
-
imgEl.src = URL.createObjectURL(image);
|
|
66
|
-
resultEl.appendChild(imgEl);
|
|
67
|
-
tv.destroyView();
|
|
68
|
-
}
|
|
69
|
-
</script>
|
|
70
|
-
</body>
|
|
71
|
-
</html>
|