{"_id":"@ahmed_hani/dot-auto-capture-ui","_rev":"5-d0b9d3713dc18ff87c79d37332853537","name":"@ahmed_hani/dot-auto-capture-ui","dist-tags":{"latest":"8.0.1"},"versions":{"7.4.0":{"name":"@ahmed_hani/dot-auto-capture-ui","version":"7.4.0","keywords":["document","face","capture","ui","document capture","auto","automatic","identity","verification","detection","camera","video","selfie","scan","scanning","sdk","api"],"license":"sofa proprietary license","_id":"@ahmed_hani/dot-auto-capture-ui@7.4.0","maintainers":[{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"}],"homepage":"https://github.com/Eng-AhmedHani/dot-js-kit#readme","bugs":{"url":"https://github.com/Eng-AhmedHani/dot-js-kit/issues"},"dist":{"shasum":"ce5d3a34c423ac1d615a5f6fb2505a5a14f4976c","tarball":"https://registry.npmjs.org/@ahmed_hani/dot-auto-capture-ui/-/dot-auto-capture-ui-7.4.0.tgz","fileCount":40,"integrity":"sha512-5co3aU3/qN2H1g9CEmnCAhR8xG2phHUrsKL3slkSZqp18VF1wChSSGhplPqQGsLEExvRPWOf3y7TcvZV4SC3CQ==","signatures":[{"sig":"MEYCIQDx5NL7U5mQIqtOyfGYnnCi7mBC2twttmiXf3VPr5PgawIhAOkknfaTSTxxT1up6PsTqfuuV5Ae6oSISSTHFhDtFxsY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1185907},"exports":{"./face":{"types":"./ui/src/types/face.d.ts","import":"./face.mjs","require":"./face.umd.js"},"./palm":{"types":"./ui/src/types/palm.d.ts","import":"./palm.mjs","require":"./palm.umd.js"},"./document":{"types":"./ui/src/types/document.d.ts","import":"./document.mjs","require":"./document.umd.js"},"./smile-liveness":{"types":"./ui/src/types/smile.d.ts","import":"./smile-liveness.mjs","require":"./smile-liveness.umd.js"},"./magnifeye-liveness":{"types":"./ui/src/types/magnifeye.d.ts","import":"./magnifeye-liveness.mjs","require":"./magnifeye-liveness.umd.js"}},"private":false,"scripts":{"tsc":"tsc","lint":"eslint \"src/**/*.{ts,tsx}\" --max-warnings 0","test":"vitest run --coverage --passWithNoTests","build":"tsc -p tsconfig.production.json && pnpm build:ui && pnpm build:types","build:ui":"pnpm run build:document && pnpm run build:face && pnpm run build:magnifeye && pnpm run build:smile && pnpm run build:palm","build:face":"LIB=face vite build","build:pack":"pnpm build && cd dist && pnpm pack --pack-destination ../","build:palm":"LIB=palm vite build","build:smile":"LIB=smile vite build","build:types":"tsc --project tsconfig.production.json && tsc-alias -p tsc-alias.json","build:watch":"pnpm build:document --watch & pnpm build:face --watch & pnpm build:magnifeye --watch & pnpm build:smile --watch","bump:version":"npm pkg set version=$VERSION","build:document":"LIB=document vite build","build:eye-gaze":"LIB=eye-gaze vite build","build:magnifeye":"LIB=magnifeye vite build"},"_npmUser":{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"},"repository":{"url":"git+https://github.com/Eng-AhmedHani/dot-js-kit.git","type":"git"},"_npmVersion":"10.8.2","description":"Digital onboarding UI","directories":{},"_nodeVersion":"20.15.0","dependencies":{"preact":"^10.26.6","styled-components":"^6.1.18","preact-custom-element":"^4.3.0"},"typesVersions":{"*":{"face":["ui/src/types/face.d.ts"],"palm":["ui/src/types/palm.d.ts"],"document":["ui/src/types/document.d.ts"],"smile-liveness":["ui/src/types/smile.d.ts"],"magnifeye-liveness":["ui/src/types/magnifeye.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"tsc-alias":"^1.8.16","typescript":"^5.9.2"},"_npmOperationalInternal":{"tmp":"tmp/dot-auto-capture-ui_7.4.0_1755455219594_0.9265066542507379","host":"s3://npm-registry-packages-npm-production"}},"7.6.1":{"name":"@ahmed_hani/dot-auto-capture-ui","version":"7.6.1","keywords":["document","face","palm","capture","ui","document capture","auto","automatic","identity","verification","hand","contactless","detection","camera","video","selfie","scan","scanning","sdk","api"],"license":"Innovatrics proprietary license","_id":"@ahmed_hani/dot-auto-capture-ui@7.6.1","maintainers":[{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"}],"homepage":"https://github.com/innovatrics/dot-js-kit#readme","bugs":{"url":"https://github.com/innovatrics/dot-js-kit/issues"},"dist":{"shasum":"d81f00ab29d436cffc6e7b7a82139c020f20c4ac","tarball":"https://registry.npmjs.org/@ahmed_hani/dot-auto-capture-ui/-/dot-auto-capture-ui-7.6.1.tgz","fileCount":44,"integrity":"sha512-z+vB2Q0YcUsWTsm2uaD4kfahZnsfF75N+mdWBXCSNO76v5jAbAxPEZG3eu597gNoIBNboP+oZHxsXTIJno09ng==","signatures":[{"sig":"MEUCIQD2ibfbsQ0pQwK+bjpaxlMIV7VVkYf10jisvX/DBPA3wAIgDUj4K/GDWKYqMp1/mGEd4Fmpm0s4gr4wgDHb95W+gw4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1413504},"exports":{"./face":{"types":"./ui/src/types/face.d.ts","import":"./face.mjs","require":"./face.umd.js"},"./palm":{"types":"./ui/src/types/palm.d.ts","import":"./palm.mjs","require":"./palm.umd.js"},"./document":{"types":"./ui/src/types/document.d.ts","import":"./document.mjs","require":"./document.umd.js"},"./smile-liveness":{"types":"./ui/src/types/smile.d.ts","import":"./smile-liveness.mjs","require":"./smile-liveness.umd.js"},"./magnifeye-liveness":{"types":"./ui/src/types/magnifeye.d.ts","import":"./magnifeye-liveness.mjs","require":"./magnifeye-liveness.umd.js"},"./multi-range-liveness":{"types":"./ui/src/types/multi-range.d.ts","import":"./multi-range-liveness.mjs","require":"./multi-range-liveness.umd.js"}},"private":false,"scripts":{"tsc":"tsc","lint":"eslint \"src/**/*.{ts,tsx}\" --max-warnings 0","test":"vitest run --coverage --passWithNoTests","build":"tsc && pnpm build:ui && pnpm build:types","build:ui":"pnpm run build:document && pnpm run build:face && pnpm run build:magnifeye && pnpm run build:smile && pnpm run build:palm && pnpm run build:multi-range","build:face":"LIB=face vite build","build:pack":"pnpm build && cd dist && pnpm pack --pack-destination ../","build:palm":"LIB=palm vite build","build:smile":"LIB=smile vite build","build:types":"tsc --project tsconfig.production.json && tsc-alias -p tsc-alias.json","build:watch":"pnpm build:document --watch & pnpm build:face --watch & pnpm build:magnifeye --watch & pnpm build:smile --watch","bump:version":"npm pkg set version=$VERSION","build:document":"LIB=document vite build","build:eye-gaze":"LIB=eye-gaze vite build","build:magnifeye":"LIB=magnifeye vite build","build:multi-range":"LIB=multi-range vite build"},"_npmUser":{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"},"repository":{"url":"git+https://github.com/innovatrics/dot-js-kit.git","type":"git"},"_npmVersion":"10.8.2","description":"Digital onboarding UI","directories":{},"_nodeVersion":"20.15.0","dependencies":{"preact":"^10.26.6","styled-components":"^6.1.18","preact-custom-element":"^4.3.0"},"typesVersions":{"*":{"face":["ui/src/types/face.d.ts"],"palm":["ui/src/types/palm.d.ts"],"document":["ui/src/types/document.d.ts"],"smile-liveness":["ui/src/types/smile.d.ts"],"magnifeye-liveness":["ui/src/types/magnifeye.d.ts"]}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/dot-auto-capture-ui_7.6.1_1762066882928_0.7809663464601124","host":"s3://npm-registry-packages-npm-production"}},"7.7.0":{"name":"@ahmed_hani/dot-auto-capture-ui","version":"7.7.0","keywords":["document","face","palm","capture","ui","document capture","auto","automatic","identity","verification","hand","contactless","detection","camera","video","selfie","scan","scanning","sdk","api"],"license":"ahmed_hani proprietary license","_id":"@ahmed_hani/dot-auto-capture-ui@7.7.0","maintainers":[{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"}],"homepage":"https://github.com/innovatrics/dot-js-kit#readme","bugs":{"url":"https://github.com/innovatrics/dot-js-kit/issues"},"dist":{"shasum":"7478c9578dbacfa274f6672c9349657cf27d9d83","tarball":"https://registry.npmjs.org/@ahmed_hani/dot-auto-capture-ui/-/dot-auto-capture-ui-7.7.0.tgz","fileCount":44,"integrity":"sha512-f8UeLSNdMOlWvYvuQYHpOE7DASsPOep2duBfX5MkCZG387Uvwmm8Y2VDZ76WReZcja+nIPpNp19Mfrfq8qpCNg==","signatures":[{"sig":"MEUCIQCZrZo1uyxPZvZuV/XRVfHc+S7q12f8l4m+BsPB2iJ3UQIgWlRT/LY+Xx3qda9lpOoaM+I7pK0gJgVG8um6NtANKMM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1413558},"exports":{"./face":{"types":"./ui/src/types/face.d.ts","import":"./face.mjs","require":"./face.umd.js"},"./palm":{"types":"./ui/src/types/palm.d.ts","import":"./palm.mjs","require":"./palm.umd.js"},"./document":{"types":"./ui/src/types/document.d.ts","import":"./document.mjs","require":"./document.umd.js"},"./smile-liveness":{"types":"./ui/src/types/smile.d.ts","import":"./smile-liveness.mjs","require":"./smile-liveness.umd.js"},"./magnifeye-liveness":{"types":"./ui/src/types/magnifeye.d.ts","import":"./magnifeye-liveness.mjs","require":"./magnifeye-liveness.umd.js"},"./multi-range-liveness":{"types":"./ui/src/types/multi-range.d.ts","import":"./multi-range-liveness.mjs","require":"./multi-range-liveness.umd.js"}},"private":false,"scripts":{"tsc":"tsc","lint":"eslint \"src/**/*.{ts,tsx}\" --max-warnings 0","test":"vitest run --coverage --passWithNoTests","build":"tsc && pnpm build:ui && pnpm build:types","build:ui":"pnpm run build:document && pnpm run build:face && pnpm run build:magnifeye && pnpm run build:smile && pnpm run build:palm && pnpm run build:multi-range","build:face":"LIB=face vite build","build:pack":"pnpm build && cd dist && pnpm pack --pack-destination ../","build:palm":"LIB=palm vite build","build:smile":"LIB=smile vite build","build:types":"tsc --project tsconfig.production.json && tsc-alias -p tsc-alias.json","build:watch":"pnpm build:document --watch & pnpm build:face --watch & pnpm build:magnifeye --watch & pnpm build:smile --watch","bump:version":"npm pkg set version=$VERSION","build:document":"LIB=document vite build","build:eye-gaze":"LIB=eye-gaze vite build","build:magnifeye":"LIB=magnifeye vite build","build:multi-range":"LIB=multi-range vite build"},"_npmUser":{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"},"repository":{"url":"git+https://github.com/innovatrics/dot-js-kit.git","type":"git"},"_npmVersion":"10.8.2","description":"Digital onboarding UI","directories":{},"_nodeVersion":"24.11.1","dependencies":{"preact":"^10.26.6","styled-components":"^6.1.18","preact-custom-element":"^4.3.0"},"typesVersions":{"*":{"face":["ui/src/types/face.d.ts"],"palm":["ui/src/types/palm.d.ts"],"document":["ui/src/types/document.d.ts"],"smile-liveness":["ui/src/types/smile.d.ts"],"magnifeye-liveness":["ui/src/types/magnifeye.d.ts"]}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/dot-auto-capture-ui_7.7.0_1764141820724_0.5689398447279714","host":"s3://npm-registry-packages-npm-production"}},"8.0.0":{"name":"@ahmed_hani/dot-auto-capture-ui","version":"8.0.0","keywords":["document","face","palm","capture","ui","document capture","auto","automatic","identity","verification","hand","contactless","detection","camera","video","selfie","scan","scanning","sdk","api"],"license":"ahmed_hani proprietary license","_id":"@ahmed_hani/dot-auto-capture-ui@8.0.0","maintainers":[{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"}],"homepage":"https://github.com/innovatrics/dot-js-kit#readme","bugs":{"url":"https://github.com/innovatrics/dot-js-kit/issues"},"dist":{"shasum":"b294aafb2ffac268baf3f797c0ec8cc905a1e87b","tarball":"https://registry.npmjs.org/@ahmed_hani/dot-auto-capture-ui/-/dot-auto-capture-ui-8.0.0.tgz","fileCount":49,"integrity":"sha512-VrYSraL5fhP/DC1TM0NSMgLriCI7/AOv5F+omvvkiIlRebohx4LB0uRxAZFQWEDXa6/tZ1dFqIXzBfkNM3MNmg==","signatures":[{"sig":"MEUCIQD42LA9MFmMhPBOLf8vIO+hYRVem1HNV9vUjQuCngvm8QIgV8tMakSX4699xrz+MWEYYreImQe/z3qNCrXddianpUY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1373192},"exports":{"./face":{"types":"./ui/src/types/face.d.ts","import":"./face.mjs","require":"./face.umd.js"},"./palm":{"types":"./ui/src/types/palm.d.ts","import":"./palm.mjs","require":"./palm.umd.js"},"./document":{"types":"./ui/src/types/document.d.ts","import":"./document.mjs","require":"./document.umd.js"},"./smile-liveness":{"types":"./ui/src/types/smile.d.ts","import":"./smile-liveness.mjs","require":"./smile-liveness.umd.js"},"./magnifeye-liveness":{"types":"./ui/src/types/magnifeye.d.ts","import":"./magnifeye-liveness.mjs","require":"./magnifeye-liveness.umd.js"},"./multi-range-liveness":{"types":"./ui/src/types/multi-range.d.ts","import":"./multi-range-liveness.mjs","require":"./multi-range-liveness.umd.js"}},"private":false,"scripts":{"tsc":"tsc","lint":"eslint \"src/**/*.{ts,tsx}\" --max-warnings 0","test":"vitest run --coverage --passWithNoTests","build":"tsc && pnpm build:ui && pnpm build:types","build:ui":"pnpm run build:document && pnpm run build:face && pnpm run build:magnifeye && pnpm run build:smile && pnpm run build:palm && pnpm run build:multi-range","build:face":"LIB=face vite build","build:pack":"pnpm build && cd dist && pnpm pack --pack-destination ../","build:palm":"LIB=palm vite build","build:smile":"LIB=smile vite build","build:types":"tsc --project tsconfig.production.json && tsc-alias -p tsc-alias.json","build:watch":"pnpm build:document --watch & pnpm build:face --watch & pnpm build:magnifeye --watch & pnpm build:smile --watch","bump:version":"npm pkg set version=$VERSION","build:document":"LIB=document vite build","build:eye-gaze":"LIB=eye-gaze vite build","build:magnifeye":"LIB=magnifeye vite build","build:multi-range":"LIB=multi-range vite build"},"_npmUser":{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"},"repository":{"url":"git+https://github.com/innovatrics/dot-js-kit.git","type":"git"},"_npmVersion":"10.8.2","description":"Digital onboarding UI","directories":{},"_nodeVersion":"24.11.1","dependencies":{"preact":"^10.26.6","styled-components":"^6.1.18","preact-custom-element":"^4.3.0"},"typesVersions":{"*":{"face":["ui/src/types/face.d.ts"],"palm":["ui/src/types/palm.d.ts"],"document":["ui/src/types/document.d.ts"],"smile-liveness":["ui/src/types/smile.d.ts"],"magnifeye-liveness":["ui/src/types/magnifeye.d.ts"],"multi-range-liveness":["ui/src/types/multi-range.d.ts"]}},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/dot-auto-capture-ui_8.0.0_1766941895902_0.717274168259546","host":"s3://npm-registry-packages-npm-production"}},"8.0.1":{"name":"@ahmed_hani/dot-auto-capture-ui","private":false,"version":"8.0.1","license":"ahmed_hani proprietary license","description":"Digital onboarding UI","keywords":["document","face","palm","capture","ui","document capture","auto","automatic","identity","verification","hand","contactless","detection","camera","video","selfie","scan","scanning","sdk","api"],"repository":{"type":"git","url":"git+https://github.com/ahmed_hani/dot-js-kit.git"},"dependencies":{"preact":"^10.26.6","preact-custom-element":"^4.3.0","styled-components":"^6.1.18"},"typesVersions":{"*":{"document":["ui/src/types/document.d.ts"],"face":["ui/src/types/face.d.ts"],"magnifeye-liveness":["ui/src/types/magnifeye.d.ts"],"smile-liveness":["ui/src/types/smile.d.ts"],"palm":["ui/src/types/palm.d.ts"],"multi-range-liveness":["ui/src/types/multi-range.d.ts"]}},"exports":{"./document":{"types":"./ui/src/types/document.d.ts","import":"./document.mjs","require":"./document.umd.js"},"./face":{"types":"./ui/src/types/face.d.ts","import":"./face.mjs","require":"./face.umd.js"},"./magnifeye-liveness":{"types":"./ui/src/types/magnifeye.d.ts","import":"./magnifeye-liveness.mjs","require":"./magnifeye-liveness.umd.js"},"./smile-liveness":{"types":"./ui/src/types/smile.d.ts","import":"./smile-liveness.mjs","require":"./smile-liveness.umd.js"},"./palm":{"types":"./ui/src/types/palm.d.ts","import":"./palm.mjs","require":"./palm.umd.js"},"./multi-range-liveness":{"types":"./ui/src/types/multi-range.d.ts","import":"./multi-range-liveness.mjs","require":"./multi-range-liveness.umd.js"}},"scripts":{"lint":"eslint \"src/**/*.{ts,tsx}\" --max-warnings 0","test":"vitest run --coverage --passWithNoTests","tsc":"tsc","build:types":"tsc --project tsconfig.production.json && tsc-alias -p tsc-alias.json","build:document":"LIB=document vite build","build:face":"LIB=face vite build","build:magnifeye":"LIB=magnifeye vite build","build:smile":"LIB=smile vite build","build:eye-gaze":"LIB=eye-gaze vite build","build:palm":"LIB=palm vite build","build:watch":"pnpm build:document --watch & pnpm build:face --watch & pnpm build:magnifeye --watch & pnpm build:smile --watch","build:ui":"pnpm run build:document && pnpm run build:face && pnpm run build:magnifeye && pnpm run build:smile && pnpm run build:palm && pnpm run build:multi-range","build:multi-range":"LIB=multi-range vite build","build":"tsc && pnpm build:ui && pnpm build:types","build:pack":"pnpm build && cd dist && pnpm pack --pack-destination ../","bump:version":"npm pkg set version=$VERSION"},"_id":"@ahmed_hani/dot-auto-capture-ui@8.0.1","bugs":{"url":"https://github.com/ahmed_hani/dot-js-kit/issues"},"homepage":"https://github.com/ahmed_hani/dot-js-kit#readme","_nodeVersion":"24.11.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-N2BCO61JMCa5QyaOzxNuMQhZ8mwADKl1R38BGfNx58Kr8NN/vkXlFwLXh5HJoqEwo7gR29y04kso3Lli7gwelw==","shasum":"691383feb4f5a2f8adfbfaab387e47e632076912","tarball":"https://registry.npmjs.org/@ahmed_hani/dot-auto-capture-ui/-/dot-auto-capture-ui-8.0.1.tgz","fileCount":49,"unpackedSize":1373186,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHDVC1aCN51b0KI4w7zRLL1DzOO8OFRFzjioib2EgowJAiBtXQ2CZsVOTU7V6AYHRuu1EQ+7XZsj+F04msQgshimpw=="}]},"_npmUser":{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"},"directories":{},"maintainers":[{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dot-auto-capture-ui_8.0.1_1767013485912_0.5110215754503955"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-17T18:26:59.506Z","modified":"2025-12-29T13:04:46.331Z","7.4.0":"2025-08-17T18:26:59.832Z","7.6.1":"2025-11-02T07:01:23.170Z","7.7.0":"2025-11-26T07:23:40.991Z","8.0.0":"2025-12-28T17:11:36.132Z","8.0.1":"2025-12-29T13:04:46.135Z"},"bugs":{"url":"https://github.com/ahmed_hani/dot-js-kit/issues"},"license":"ahmed_hani proprietary license","homepage":"https://github.com/ahmed_hani/dot-js-kit#readme","keywords":["document","face","palm","capture","ui","document capture","auto","automatic","identity","verification","hand","contactless","detection","camera","video","selfie","scan","scanning","sdk","api"],"repository":{"type":"git","url":"git+https://github.com/ahmed_hani/dot-js-kit.git"},"description":"Digital onboarding UI","maintainers":[{"name":"ahmed_hani","email":"ahmedalmashreai@gmail.com"}],"readme":"# Auto Capture Ui Component\n\n## Overview\nInnovatrics Auto Capture UI Component. Does not work as a standalone component. Recommended to be used with:\n- [Face Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-face-auto-capture)\n- [Document Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-document-auto-capture)\n- [Multi-Range Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-multi-range-liveness)\n- [MagnifEye Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-magnifeye-liveness)\n- [Smile Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-smile-liveness)\n- [Palm Capture Component](https://www.npmjs.com/package/@innovatrics/dot-palm-capture)\n\nInnovatrics Auto Capture UI Component is a web component that renders an overlay over the video stream. The overlay includes a placeholder, camera control buttons and instructions to guide the user to position their face, their palm or their ID document correctly.\n\n<p align=\"center\">\n  <img alt=\"Face Auto Capture\" src=\"https://www.innovatrics.com/wp-content/uploads/2024/03/Passive-Liveness-preview-400px.gif\" width=\"200\" height=\"400\">\n  <img alt=\"Document Auto Capture\" src=\"https://www.innovatrics.com/wp-content/uploads/2024/03/Onboarding-document-scanning-400px.gif\" width=\"200\" height=\"400\">\n  <img alt=\"MagnifEye Liveness\" src=\"https://www.innovatrics.com/wp-content/uploads/2024/03/MagnifEye_liveness-preview-400px.gif\" width=\"200\" height=\"400\">\n  <img alt=\"Smile Liveness\" src=\"https://www.innovatrics.com/wp-content/uploads/2024/03/Smile-liveness-preview-400px.gif\" width=\"200\" height=\"400\">\n  <img alt=\"Palm Auto Capture\" src=\"https://www.innovatrics.com/wp-content/uploads/2025/03/palm.gif\" width=\"200\" height=\"400\">\n</p>\n\nThe Auto Capture UI Component can be used alongside other components to develop remote identity verification or digital onboarding solutions, as demonstrated in this [demo application](https://dot.innovatrics.com/).\n\nYou can also check out the [integration samples](https://github.com/innovatrics/dot-web-samples) in various technologies (React, Vue, Angular, jQuery).\n\n## Pre-requisites\n\n1. **Core Components**\n\n**IMPORTANT**: For this component to work, it is highly recommended to be used along with\n[Face Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-face-auto-capture), [Document Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-document-auto-capture), [Multi-Range Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-multi-range-liveness), [MagnifEye Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-magnifeye-liveness), [Smile Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-smile-liveness) or [Palm Capture Component](https://www.npmjs.com/package/@innovatrics/dot-palm-capture) installed in your project. You can learn more about why this is important on our [developers portal](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-document/latest/documentation/#_introduction).\n\n**Integration with** [Face Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-face-auto-capture):\n\nBoth components must be wrapped in parent div with `position: relative`.\n\n``` typescript\n<div style={{position: \"relative\"}}>\n  <FaceCamera\n    onPhotoTaken={handlePhotoTaken}\n    onError={onError}\n  />\n  <FaceUi />\n</div>\n```\n\nOr you can see an example in [documentation](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-face/latest/documentation/#_example_of_using_components_together)\n\n**Integration with** [Document Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-document-auto-capture):\n\nBoth components must be wrapped in parent div with `position: relative`.\n\n``` typescript\n<div style={{position: \"relative\"}}>\n  <DocumentCamera\n    onPhotoTaken={handlePhotoTaken}\n    onError={onError}\n  />\n  <DocumentUi />\n</div>\n```\n\nOr you can see an example in [documentation](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-document/latest/documentation/#_example_of_using_components_together)\n\n**Integration with** [Multi-Range Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-multi-range-liveness):\n\nBoth components must be wrapped in parent div with `position: relative` and `overflow: hidden`.\n\n``` typescript\n<div style={{position: \"relative\", overflow: \"hidden\"}}>\n  <MultiRangeLiveness\n      onComplete={handleOnComplete}\n      onError={handleError}\n      challengeSequence={[\"ONE\", \"THREE\", \"FIVE\", \"ZERO\"]} // Challenge needs to be obtained from the API call to the Digital Identity Service\n      transactionCountingToken=\"provide-the-token-here\"\n  />\n  <MultiRangeLivenessUi showCameraButtons/>\n</div>\n```\n\nOr you can see an example in [documentation](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-multi-range-liveness/latest/documentation/#_example_of_using_components_together)\n\n**Integration with** [MagnifEye Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-magnifeye-liveness):\n\nBoth components must be wrapped in parent div with `position: relative` and `overflow: hidden`.\n\n``` typescript\n<div style={{position: \"relative\", overflow: \"hidden\"}}>\n   <MagnifEyeLiveness\n      onComplete={handleOnComplete}\n      onError={handleOnError}\n    />\n  <MagnifEyeLivenessUi showCameraButtons/>\n</div>\n```\n\nOr you can see an example in [documentation](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-magnifeye-liveness/latest/documentation/#_example_of_using_components_together)\n\n**Integration with** [Smile Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-smile-liveness):\n\nBoth components must be wrapped in parent div with `position: relative` and `overflow: hidden`.\n\n``` typescript\n<div style={{position: 'relative', overflow: 'hidden'}}>\n   <SmileLiveness\n      onComplete={handleOnComplete}\n      onError={handleOnError}\n    />\n  <SmileLivenessUi showCameraButtons/>\n</div>\n```\n\nOr you can see an example in [documentation](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-smile-liveness/latest/documentation/#_example_of_using_components_together)\n\n**Integration with** [Palm Capture Component](https://www.npmjs.com/package/@innovatrics/dot-palm-capture):\n\nBoth components must be wrapped in parent div with `position: relative`.\n\n``` typescript\n<div style={{position: 'relative'}}>\n   <PalmCapture\n      onPhotoTaken={handlePhotoTaken}\n      onError={handleOnError}\n    />\n  <PalmUi showCameraButtons/>\n</div>\n```\n\nOr you can see an example in [documentation](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-palm/latest/documentation/#_example_of_using_components_together)\n\n\n## Installation\n\nInstallation of the package is available via NPM, PNPM or Yarn:\n\nUsing NPM:\n\n```bash\n$ npm install @innovatrics/dot-auto-capture-ui\n```\n\nUsing PNPM:\n\n```bash\n$ pnpm add @innovatrics/dot-auto-capture-ui\n```\n\nUsing Yarn:\n\n```bash\n$ yarn add @innovatrics/dot-auto-capture-ui\n```\n\n## Usage\nThe Auto Capture UI Component is a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) which uses custom HTML tag. Properties need to be passed into the component after the tag was rendered.\n\n\nHead to our [developers portal](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-document/latest/documentation/#ui-component) to learn more about:\n\n- Initial setup\n- Usage with TypeScript\n- Properties\n- Custom events - communication between the Auto Capture UI Component and the [Face Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-face-auto-capture) or the [Document Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-document-auto-capture)\n- Examples of using the Auto Capture UI Component and the [Face Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-face-auto-capture), the [Document Auto Capture Component](https://www.npmjs.com/package/@innovatrics/dot-document-auto-capture), the [Multi-Range Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-multi-range-liveness), the [MagnifEye Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-magnifeye-liveness), the [Smile Liveness Component](https://www.npmjs.com/package/@innovatrics/dot-smile-liveness) or the [Palm Capture Component](https://www.npmjs.com/package/@innovatrics/dot-palm-capture) together\n\n## Changelog\nFace Auto Capture Component changelog [here](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-face/latest/documentation/#_changelog).\n\nDocument Auto Capture Component changelog [here](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-document/latest/documentation/#_changelog).\n\nMulti-Range Liveness Component changelog [here](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-multi-range-liveness/latest/documentation/#_changelog).\n\nMagnifEye Liveness Component changelog [here](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-magnifeye-liveness/latest/documentation/#_changelog).\n\nSmile Liveness Component changelog [here](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-smile-liveness/latest/documentation/#_changelog).\n\nPalm Capture Component changelog [here](https://developers.innovatrics.com/digital-onboarding/technical/remote/dot-web-palm/latest/documentation/#_changelog).\n\n## License\nThe Auto Capture UI Component is available under Innovatrics proprietary license.\n\nThe component can be used in a freemium mode without a license agreement. However, please note that the free version includes a watermark overlay in the component.\n\nTo obtain a license agreement and use the component without the overlay, please contact us at support@innovatrics.com.","readmeFilename":"README.md"}