@idscan/idvc2
Version:
component for the capturing documents
325 lines (318 loc) • 21.5 kB
HTML
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta charset="utf-8"><title>Demo Pages</title><style>body {
/*background: #eff3fc;*/
background: #ffe4c4;
margin: 0;
}
.container * {
box-sizing: border-box;
font-family: Inter, sans-serif;
}
#control-buttons-container {
margin-top: 25px;
height: 100px;
}
#control-buttons-container button {
padding: 8px;
font-size: 14px;
}</style></head><body><div><div id="videoCapturingEl" class="container"></div></div><div id="control-buttons-container"><button id="btn">Show Spinner</button> <button id="btn-loader">Show Loader</button> <button id="btn-reload">Reload component</button> <button id="btn-remount">Remount component</button> <button id="btn-resetAllSteps">Reset All Steps</button> <button id="btn-reconfig">Change config</button> <button id="btn-reconfig1">Change config 1</button> <button id="btn-redocs">Change docTypes</button> <button id="btn-unmount">Unmount IDVC</button> <button id="btn-change-en">En</button> <button id="btn-change-es">Es</button></div><script src="idvc.js"></script><script src="langs.js"></script><script type="module">import IDVC, { prepareRequestDataForDiveApi } from './idvc.js'
const keys = {
'10.105.74.121': 'eyJwZGY0MTdrZXkiOiJXYkZZY2RrdTJOMWdlVXJIb1hZL2RhQW1QUERKZ2NGRTRDODJqazhzYkczaWJoekM0dXV3SnJ4dWZtOE5YcFNBWDJoREhYRXQvMVl4SVhPRGNhOUVHQ0w1cUFPdllQemp2T2hhTzZzcXAvc1lHWGxBTytnZ0NVSkthRm04MTFnQThpajE0RXhrY013NzNLMEwzcEhwMTlvYjdsUUpFSE9xbG83dTNvTjRNczQ9IiwiaW1hZ2VQcm9jZXNzaW5nS2V5Ijoiam1EWWVVMkhqOFhVVWJEdFlPcHRkLzZobnFEcEFQaldhVlpWOG9qOGU3WUVoQ3Q1L3ovNlVlWnRkMDhDWjduaXhrQ1d3SlVpUUllbC9rRHI4RGFxeXpLVnRtZzNRbnROcHZBZnFjQ2ZmeGpBTk1SeVkvbjJWQjloSE02MzlWcG03dktsNWxRQWRJQlFMZFUydGdBcHhYVy9WK3JFa1pIVDVKT1FMdzA0WXBnPSIsInRyYWNrU3RyaW5nUGFyc2VyS2V5IjoiSGlBaUt4UER6amRtUjFSRUZJR0oxUEpmR0tleFl2Z2ZFS3dtVXMwcDVxdWswL1pzbGNiazRXaGt0amFxc0FiYnRyYllZeVB5b21mRm1neFVkLzdHVnJtdFJPTiszZEZZcFk5NHlNMEtSY2dpd3Nrdm5PaGlZZjJubnZ1U0REMGhUWkZKWlh1NDNJNDQxR0U5OHh0d3JJdGN2aVQ1SWJ6bXJOTS9OYlRKK2Z3PSIsImNvbW1vbkxpY2Vuc2VLZXkiOiJkaTdLYmN6T3gzUjA2MTNxNENUaUIrYS9iY2gvcEhuemlucmVUK0JtOXBrcERod1EvbXUyM0dJOFdnOWtkcHRPR3VJbDRmWHpCd214enRZN1hZclg5YVU0SWxoNHhRQUgzY0x6cHJnb0ZyY2EyZjllZ3RJb0NiYkJKcnRWZFVXdUVmZE15NkRMSVA4WG04ZHJjdDFFc29XYnE5dHB3OFh5Ukt4cEM4N1pIbGs9In0=',
'10.105.74.158': 'eyJwZGY0MTdrZXkiOiIxdFAxUmlYSlx1MDAyQjZxaU0yYUFMYW1CVWNQTGdGY202Y3RVXHUwMDJCeU9OeWg1RjZ4YzdhTmFoR2dUazBzQWs5RjdEZjE2ZXlreXVZcnRJM0Jxc2pnQjZuRklickZrWWl3d3dlSGg2SENObDNGWkttTC9yUmZJc0FLc0FzMUNLMHJrVk5FS1BwdEJIQTc0TmxZNVhlajl1NnpRVms5QUxHeDdxeE1adUlvUUNvVDNqYnFNPSIsImNvbW1vbkxpY2Vuc2VLZXkiOiJuelhkTnRpc0NFXHUwMDJCNTNJODR4dDh3eEZwcGV4TU5QMW54MjdqcnFxNDJvVzRqZ05jZFYwUzFscGM2OGZcdTAwMkIxdlFNVGtlTWR5SjZrNjRRbG80c0prbVpnM3VEUFx1MDAyQjFvWVZ0eVFZODNrdHlKaXZNNE5pLzkxbURBNS9sQURUMEVjY2phUnpaRXZHNGU4RGE5SU1cdTAwMkI5TktFejZlWk5KN20xd3BYaWx0Ny9CdEZzT0VoUT0iLCJpbWFnZVByb2Nlc3NpbmdLZXkiOiIyeW9JWnlpa1hRTHBjdmU2ZjN5YlF6cFo3cGJYR0FjZk9udVVvc3oxbWhUdDlmSW5RcldQaXVta0NlVTg5d2pwaUxoZDJnVWlDSHVKNng5ZnRBZzNNXHUwMDJCV09LYzVSVnhIdm56enl3WGpDb2V2cEQwS05mZ0tCRjQyalRJNXlOQmVFTkpzOVV0MVhPRzdFa1FpdUJWeGtBSEo3TVhuNU1ESmg1S0J1QkVRbWIwMD0iLCJ0cmFja1N0cmluZ1BhcnNlcktleSI6IjFQVmpjeUE3eC9Ia1V5QW55dHdHZEZjZWZNMG5XV0RaYnVSb0VlTXNhOU01L2xqeVBjdHlVNmd5c0NhV0IwWVBQSDFRbm5RQ0xiYktIRER3VGE3TGxmVHNJOUY3emJsOW5ZVGVwbzM1ZE81aWhcdTAwMkJcdTAwMkI4VUhwZWFsaDFQUGJWMzBwL1Rwd1MyQTJqZjVvWnVpS2V4U2haYlx1MDAyQlZcdTAwMkJ1MUdtTk50cTV6YzNJNnNFVWp3PSIsImlPU01SWkRldGVjdG9yS2V5IjoibHZKNkVMM0Q0ZWdNMVpLTWh5VEJhdXlBeDNkNmViL2JWYWt1L1h2a1lFdFc1b3N4MVYxWlJMZUhtcW5TV3JtUUF2Smp1N3dnTnNNN1dWNFBKNEtvT3NHeU5QbjdxdTZhWDZFemI0ejIzMGVuUVpDWFBRVjBaTEVpcEtGUkZqZEc4bS9qU1dObmlFSW1Pd2ZPbko0VXBIXHUwMDJCRzNvOTVnbHQ0MjdDT2tDRUpsTVU9IiwiaU9TUERGRGV0ZWN0b3JLZXkiOiIxQjBLLkIxUDBNNU8uRzdJNEQuRTFFNUg4T3pCZU9qTiJ9',
'10.105.74.159': 'ew0KICAicGRmNDE3a2V5IjogIjIwdCtiMUY4UFRYNmh5Qy9NbUNGSEV3TGVsZEFkU3k3SEhQZFhKenpUSlFsWkE2cjV2OVZTcXJiMGFRNmNIeEJHUEs0S2xEV2UwbHVYalArK2ZkRXkxUFRwcjNmbnNCMExybkFnUWsrUUR4R0RNdjJpUE9HS2trNTVBWmpZOWVNQ2tsWklyTDRldGl2VEpPaFBSc2FqWFdyZCs1eUtoVExhNUttdGlTSU5TVT0iLA0KICAiaW1hZ2VQcm9jZXNzaW5nS2V5IjogIlBKNk44dWNKRW5kcWN6Z095dnoxd1pGUnNmTExVUmZyN3F6NnRSMnJSalMvNUtUQ3A5RnI2SURaamQzeU1GbzJOanV1NFJ0S1hpTzgveGN0eEJmZVBWN1RiQ3NsNUhhWXhZYk4zRGRhaU1Kd21vdGEraytpZURIdXhPbTNROXhUdklkdkd6QUF3SnM0YmlWSnZra1BVNEF0d3pqL2UrT2w1UGFEM2QzRWhhRT0iLA0KICAidHJhY2tTdHJpbmdQYXJzZXJLZXkiOiAiQWxTOXlwdkN2M0luZk90dmN5dHNlTU56UkRRd01FYnE2VWY1T1BMR2s1cmMwZ3B2bm1WTm5MelROOTliejZuQlE2MDZhOURkeEJiTmlYWDJzV2FqV0FXelhiVHlpTmd3cjd4c1AvcXlyc0ZTcDExcFJtWkFOMnhmVTB3MDlIQVFxeFRDWU1xbWdwZ1RoZHZlZ2Q0UVJ4TlJRZm9rUzBISXZEa2c2S3gwSXVzPSIsDQogICJjb21tb25MaWNlbnNlS2V5IjogIkFnS2tQcHNZK29LZkFESzkvNm9lNnV2bkRpNGJlUWJRc2VsTE5nVU9uZythTnRMaWJnNk52SGJzVXpsTU1CYmdwVGFwMTYxaUNJS2hSMStuYVdpVXdxeW5zQWNPZ1hVSXVMbEFvczVnMDdDTGZxSFk3ci9YQXNQTHNHRUY4V0c5MEpUK3VUYlNYODVCT0tPdllKemVvVWRGK1ZwRGorU1pObXVkdkJwYndIZz0iLA0KICAiaU9TTVJaRGV0ZWN0b3JLZXkiOiAiU0NsM05IQ3hUalVsM0xhbnNFVGdJSDRCODdMcU1melFDVURXTFpHOVBNZTBhMFp3amhYWjFnaHI3RFJjcXBiVlFNWEVZdE80T09BU2NlS3RoaFBjeTVURmRnK1poT2FGa3JwUlY4Q2liblpPckhQU1ZxMVg0L2oreGthQXRXb0ZpMVZHSlZ4dGU3RFB3RWlFNEJjVDh0bWZGZThSYTNsKzlrZVZreUprSWxrPSIsDQogICJpT1NQREZEZXRlY3RvcktleSI6ICIxQjBLLkIxUDBNNU8uRzdJNE4uRTFMNUc5TG5JY0tpTyINCn0=',
}
let config = {
el: 'videoCapturingEl',
licenseKey: keys[window.location.hostname],
autoContinue: false,
allowCameraSelection: false,
fixFrontOrientAfterUpload: true,
realFaceMode: 'all', // none, auto, all
useCDN: false,
useHeic: true,
resizeUploadedImage: 2000,
isShowDocumentTypeSelect: true,
autoStart: false,
allowSubmitWithWarnings: false,
isShowGuidelinesButton: true,
showSubmitBtn: true,
playPreviewAnimations: true,
language: 'en',
networkUrl: '', // Всегда должно быть таким значением для режима разработки
// из-за того, что чанки должны лежать в той же директории, что и idvc.js файл
captureTimeout: 22,
modalPosition: 'center',
autocaptureConfidence: 0.8,
documentTypes: [
{
type: 'DL',
steps: [
{ type: 'front', name: 'Document\'s Front Image', mode: { uploader: true, video: true }, enableDesktopNotification: true, autocaptureDelay: 2000, messageAfterDelay: { text: 'Please position your document correctly', delay: 3000 } },
{ type: 'pdf', name: 'Document\'s Back Image', enableFourCornerCapture: true, enableDesktopNotification: true, mode: { uploader: true, video: true }, autocaptureDelay: 0, messageAfterDelay: { text: 'PDF TEXT', delay: 3000 } },
{ type: 'face', name: 'User\ Selfie', mode: { uploader: true, video: true } },
],
},
{
type: 'IC',
steps: [
{ type: 'front', name: 'Document\'s Front Image', mode: { uploader: true, video: true }, enableDesktopNotification: true, autocaptureDelay: 2000, messageAfterDelay: { text: 'Please position your document correctly', delay: 0 } },
{ type: 'pdf', name: 'Document\'s Back Image', enableFourCornerCapture: true, enableDesktopNotification: true, mode: { uploader: true, video: true }, autocaptureDelay: 0 },
{ type: 'face', name: 'User\ Selfie', mode: { uploader: true, video: true } },
],
},
{
type: 'EmploymentAuthorization',
steps: [
{ type: 'front', name: 'Document\'s Front Image', mode: { uploader: true, video: true }, enableDesktopNotification: true, autocaptureDelay: 2000, messageAfterDelay: { text: 'Please position your document correctly', delay: 3000 } },
{ type: 'back', name: 'Document\'s Back Image', enableFourCornerCapture: true, enableDesktopNotification: true, mode: { uploader: true, video: true }, autocaptureDelay: 0 },
{ type: 'face', name: 'User\ Selfie', mode: { uploader: true, video: true } },
],
},
// {
// type: 'VIN',
// steps:[
// { type: 'photo', name: 'VIN' },
// ],
// },
{
type: 'Barcode',
steps:[
{ type: 'barcode', name: 'Barcode detection', mode: { uploader: false, video: true } },
],
},
{
type: 'Passport',
steps:[
// { type: 'front', name: 'Passport Front' },
{ type: 'mrz', name: 'Passport MRZ', enableFourCornerCapture: true, mode: { uploader: true, video: true } },
{ type: 'face', name: 'Face', mode: { uploader: true, video: true } }
],
},
{
type: 'PassportCard',
steps:[
{ type: 'front', name: 'Document Card Front' },
{ type: 'mrz', name: 'Passport Card Back', enableFourCornerCapture: true, mode: { uploader: false, video: true } },
{ type: 'face', name: 'User Selfie', mode: { uploader: true, video: true } }
],
},
{
type: 'GreenCard',
steps:[
{ type: 'front', name: 'Document Front' },
{ type: 'mrz', name: 'Passport Back', mode: { uploader: true, video: true } },
{ type: 'face', name: 'Face', mode: { uploader: true, video: true } }
],
},
{
type: 'InternationalId',
steps: [
{ type: 'front', name: 'Document Front', mode: { uploader: true, video: true }, enableDesktopNotification: true, autocaptureDelay: 3000, messageAfterDelay: { text: 'Please position your document correctly', delay: 4000 } },
{ type: 'back', name: 'International Back', enableFourCornerCapture: true, mode: { uploader: true, video: true } },
{ type: 'face', name: 'Face', mode: { uploader: true, video: true } }
]
},
],
onChange (data) {
console.log('change')
console.log(data)
},
onReset (data) {
console.log('reset')
console.log(data)
},
onCameraError (data) {
console.log('CAMERA_ERR', JSON.stringify(data))
},
async submit(data) {
console.log('submit data', data);
const preparedData = await prepareRequestDataForDiveApi({ data })
console.log('preparedData', preparedData);
const { steps } = data;
const videoBlobs = steps.filter(_ => Boolean(_.multiImagesBlob) && Boolean(_.multiImagesBlob.size > 0))
.map(_ => _.multiImagesBlob);
const container = document.querySelector('.steps-list-container');
if (!container) {
throw new Error('Container .steps-list-container not found');
}
videoBlobs.forEach(_ => {
const video = document.createElement('video');
video.src = URL.createObjectURL(_);
video.controls = true;
video.autoplay = false;
video.muted = true;
video.playsInline = true;
video.style.maxWidth = '100%';
container.appendChild(video);
});
},
onRetakeHook(data) {
console.log('retake');
console.log(data);
},
onMounted() {
console.log('onMounted');
},
onReloaded() {
console.log('onReloaded');
},
onCaptureTimeout(data) {
console.log(data);
}
};
// let newConfig = {
// licenseKey: 'eyJwZGY0MTdrZXkiOiJXYkZZY2RrdTJOMWdlVXJIb1hZL2RhQW1QUERKZ2NGRTRDODJqazhzYkczaWJoekM0dXV3SnJ4dWZtOE5YcFNBWDJoREhYRXQvMVl4SVhPRGNhOUVHQ0w1cUFPdllQemp2T2hhTzZzcXAvc1lHWGxBTytnZ0NVSkthRm04MTFnQThpajE0RXhrY013NzNLMEwzcEhwMTlvYjdsUUpFSE9xbG83dTNvTjRNczQ9IiwiaW1hZ2VQcm9jZXNzaW5nS2V5Ijoiam1EWWVVMkhqOFhVVWJEdFlPcHRkLzZobnFEcEFQaldhVlpWOG9qOGU3WUVoQ3Q1L3ovNlVlWnRkMDhDWjduaXhrQ1d3SlVpUUllbC9rRHI4RGFxeXpLVnRtZzNRbnROcHZBZnFjQ2ZmeGpBTk1SeVkvbjJWQjloSE02MzlWcG03dktsNWxRQWRJQlFMZFUydGdBcHhYVy9WK3JFa1pIVDVKT1FMdzA0WXBnPSIsInRyYWNrU3RyaW5nUGFyc2VyS2V5IjoiSGlBaUt4UER6amRtUjFSRUZJR0oxUEpmR0tleFl2Z2ZFS3dtVXMwcDVxdWswL1pzbGNiazRXaGt0amFxc0FiYnRyYllZeVB5b21mRm1neFVkLzdHVnJtdFJPTiszZEZZcFk5NHlNMEtSY2dpd3Nrdm5PaGlZZjJubnZ1U0REMGhUWkZKWlh1NDNJNDQxR0U5OHh0d3JJdGN2aVQ1SWJ6bXJOTS9OYlRKK2Z3PSIsImNvbW1vbkxpY2Vuc2VLZXkiOiJkaTdLYmN6T3gzUjA2MTNxNENUaUIrYS9iY2gvcEhuemlucmVUK0JtOXBrcERod1EvbXUyM0dJOFdnOWtkcHRPR3VJbDRmWHpCd214enRZN1hZclg5YVU0SWxoNHhRQUgzY0x6cHJnb0ZyY2EyZjllZ3RJb0NiYkJKcnRWZFVXdUVmZE15NkRMSVA4WG04ZHJjdDFFc29XYnE5dHB3OFh5Ukt4cEM4N1pIbGs9In0=',
// showSubmitBtn: true,
// documentTypes: [
// // {
// // type: 'ID',
// // steps: [
// // { type: 'front', name: 'Document Front', mode: { uploader: false, video: true } },
// // { type: 'pdf', name: 'Document PDF417 Barcode', mode: { uploader: false, video: true } },
// // { type: 'face', name: 'Face', mode: { uploader: false, video: true } },
// // ],
// // },
// {
// type: 'PassportCard',
// steps:[
// { type: 'front', name: 'Document Card Front' },
// { type: 'mrz', name: 'Passport Card Back', mode: { uploader: true, video: true } },
// { type: 'face', name: 'User Selfie', mode: { uploader: true, video: true } }
// ],
// },
// // {
// // type: 'FaceAuthorization',
// // steps: [
// // { type: 'face', name: 'Face', mode: { uploader: true, video: true } },
// // ],
// // },
// ],
// onChange (data) {
// console.log('change')
// console.log(data)
// },
// onReset (data) {
// console.log('reset')
// console.log(data)
// },
// onCameraError (data) {
// console.log('CAMERA_ERR', JSON.stringify(data))
// },
// submit (data) {
// console.log('submit', data);
// },
// onRetakeHook(data) {
// console.log('retake');
// console.log(data);
// },
// onMounted() {
// console.log('onMounted');
// },
// onReloaded() {
// console.log('onReloaded');
// },
// };
let newConfig = {
licenseKey: 'eyJwZGY0MTdrZXkiOiJXYkZZY2RrdTJOMWdlVXJIb1hZL2RhQW1QUERKZ2NGRTRDODJqazhzYkczaWJoekM0dXV3SnJ4dWZtOE5YcFNBWDJoREhYRXQvMVl4SVhPRGNhOUVHQ0w1cUFPdllQemp2T2hhTzZzcXAvc1lHWGxBTytnZ0NVSkthRm04MTFnQThpajE0RXhrY013NzNLMEwzcEhwMTlvYjdsUUpFSE9xbG83dTNvTjRNczQ9IiwiaW1hZ2VQcm9jZXNzaW5nS2V5Ijoiam1EWWVVMkhqOFhVVWJEdFlPcHRkLzZobnFEcEFQaldhVlpWOG9qOGU3WUVoQ3Q1L3ovNlVlWnRkMDhDWjduaXhrQ1d3SlVpUUllbC9rRHI4RGFxeXpLVnRtZzNRbnROcHZBZnFjQ2ZmeGpBTk1SeVkvbjJWQjloSE02MzlWcG03dktsNWxRQWRJQlFMZFUydGdBcHhYVy9WK3JFa1pIVDVKT1FMdzA0WXBnPSIsInRyYWNrU3RyaW5nUGFyc2VyS2V5IjoiSGlBaUt4UER6amRtUjFSRUZJR0oxUEpmR0tleFl2Z2ZFS3dtVXMwcDVxdWswL1pzbGNiazRXaGt0amFxc0FiYnRyYllZeVB5b21mRm1neFVkLzdHVnJtdFJPTiszZEZZcFk5NHlNMEtSY2dpd3Nrdm5PaGlZZjJubnZ1U0REMGhUWkZKWlh1NDNJNDQxR0U5OHh0d3JJdGN2aVQ1SWJ6bXJOTS9OYlRKK2Z3PSIsImNvbW1vbkxpY2Vuc2VLZXkiOiJkaTdLYmN6T3gzUjA2MTNxNENUaUIrYS9iY2gvcEhuemlucmVUK0JtOXBrcERod1EvbXUyM0dJOFdnOWtkcHRPR3VJbDRmWHpCd214enRZN1hZclg5YVU0SWxoNHhRQUgzY0x6cHJnb0ZyY2EyZjllZ3RJb0NiYkJKcnRWZFVXdUVmZE15NkRMSVA4WG04ZHJjdDFFc29XYnE5dHB3OFh5Ukt4cEM4N1pIbGs9In0=',
chunkPublicPath: '',
networkUrl: 'networks/',
language: 'es',
isShowDocumentTypeSelect: true,
documentTypes: [
{
type: 'GreenCard',
steps:[
{ type: 'front', name: 'Document Front' },
{ type: 'mrz', name: 'Passport Back', mode: { uploader: true, video: true } },
{ type: 'face', name: 'Face', mode: { uploader: true, video: true } }
],
},
{
type: 'InternationalId',
steps: [
{ type: 'front', name: 'Document Front', mode: { uploader: true, video: true }, enableDesktopNotification: true, autocaptureDelay: 3000, messageAfterDelay: { text: 'Please position your document correctly', delay: 4000 } },
{ type: 'back', name: 'International Back', mode: { uploader: true, video: true } },
{ type: 'face', name: 'Face', mode: { uploader: true, video: true } }
]
},
// {
// type: 'PassportCard',
// steps:[
// { type: 'front', name: 'Document Card Front' },
// { type: 'mrz', name: 'Passport Card Back', mode: { uploader: true, video: true } },
// { type: 'face', name: 'User Selfie', mode: { uploader: true, video: true } }
// ],
// },
]
};
let newConfig1 = {
licenseKey: 'eyJwZGY0MTdrZXkiOiJXYkZZY2RrdTJOMWdlVXJIb1hZL2RhQW1QUERKZ2NGRTRDODJqazhzYkczaWJoekM0dXV3SnJ4dWZtOE5YcFNBWDJoREhYRXQvMVl4SVhPRGNhOUVHQ0w1cUFPdllQemp2T2hhTzZzcXAvc1lHWGxBTytnZ0NVSkthRm04MTFnQThpajE0RXhrY013NzNLMEwzcEhwMTlvYjdsUUpFSE9xbG83dTNvTjRNczQ9IiwiaW1hZ2VQcm9jZXNzaW5nS2V5Ijoiam1EWWVVMkhqOFhVVWJEdFlPcHRkLzZobnFEcEFQaldhVlpWOG9qOGU3WUVoQ3Q1L3ovNlVlWnRkMDhDWjduaXhrQ1d3SlVpUUllbC9rRHI4RGFxeXpLVnRtZzNRbnROcHZBZnFjQ2ZmeGpBTk1SeVkvbjJWQjloSE02MzlWcG03dktsNWxRQWRJQlFMZFUydGdBcHhYVy9WK3JFa1pIVDVKT1FMdzA0WXBnPSIsInRyYWNrU3RyaW5nUGFyc2VyS2V5IjoiSGlBaUt4UER6amRtUjFSRUZJR0oxUEpmR0tleFl2Z2ZFS3dtVXMwcDVxdWswL1pzbGNiazRXaGt0amFxc0FiYnRyYllZeVB5b21mRm1neFVkLzdHVnJtdFJPTiszZEZZcFk5NHlNMEtSY2dpd3Nrdm5PaGlZZjJubnZ1U0REMGhUWkZKWlh1NDNJNDQxR0U5OHh0d3JJdGN2aVQ1SWJ6bXJOTS9OYlRKK2Z3PSIsImNvbW1vbkxpY2Vuc2VLZXkiOiJkaTdLYmN6T3gzUjA2MTNxNENUaUIrYS9iY2gvcEhuemlucmVUK0JtOXBrcERod1EvbXUyM0dJOFdnOWtkcHRPR3VJbDRmWHpCd214enRZN1hZclg5YVU0SWxoNHhRQUgzY0x6cHJnb0ZyY2EyZjllZ3RJb0NiYkJKcnRWZFVXdUVmZE15NkRMSVA4WG04ZHJjdDFFc29XYnE5dHB3OFh5Ukt4cEM4N1pIbGs9In0=',
chunkPublicPath: '',
networkUrl: 'networks/',
isShowDocumentTypeSelect: true,
documentTypes: [
{
type: 'PassportCard',
steps:[
{ type: 'front', name: 'Document Card Front' },
{ type: 'mrz', name: 'Passport Card Back', mode: { uploader: true, video: true } },
{ type: 'face', name: 'User Selfie', mode: { uploader: true, video: true } }
],
},
{
type: 'Barcode',
steps:[
{ type: 'barcode', name: 'Barcode detection' },
],
},
]
};
let videoCapturingComponent = new IDVC(config);
let k = false
let c = false
document.getElementById('btn').addEventListener('click', () => {
k = !k
videoCapturingComponent.showSpinner(k)
})
document.getElementById('btn-reconfig').addEventListener('click', () => {
videoCapturingComponent.reloadComponent(newConfig)
})
document.getElementById('btn-reconfig1').addEventListener('click', () => {
videoCapturingComponent.reloadComponent(newConfig1)
})
document.getElementById('btn-loader').addEventListener('click', () => {
c = !c
videoCapturingComponent.showLoader(c, '<div>lupa <br> pupa</div>', 'peepo pepe')
})
document.getElementById('btn-reload').addEventListener('click', () => {
videoCapturingComponent.reloadComponent(config);
})
document.getElementById('btn-resetAllSteps').addEventListener('click', () => {
videoCapturingComponent.resetAllSteps();
})
document.getElementById('btn-remount').addEventListener('click', () => {
const el = document.getElementById(config.el);
el.innerHTML = '';
videoCapturingComponent = new IDVC(config)
})
document.getElementById('btn-redocs').addEventListener('click', () => {
videoCapturingComponent.updateDocumentTypes([
{
type: 'PassportCard',
steps:[
{ type: 'front', name: 'Document Card Front' },
{ type: 'mrz', name: 'Passport Card Back', mode: { uploader: true, video: true } },
{ type: 'face', name: 'User Selfie', mode: { uploader: true, video: true } }
],
},
]);
})
document.getElementById('btn-change-en').addEventListener('click', () => {
videoCapturingComponent.changeLanguage('en');
})
document.getElementById('btn-change-es').addEventListener('click', () => {
videoCapturingComponent.changeLanguage('es');
})
document.getElementById('btn-unmount').addEventListener('click', () => {
const el = document.getElementById(config.el);
el.remove();
})</script></body></html>