accuraidscanplugin 1.0.13 → 1.0.15
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/build/accuramain.js +1 -1
- package/package.json +1 -1
package/build/accuramain.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default class IDCardPlugin{constructor(t,e,i){this.callback=t,this.country_code=e,this.card_code=i,this.countriesData=[],this.frontStream=null,this.backStream=null,this.uaParserLoaded="undefined"!=typeof UAParser,this.frontCapture=null,this.backCapture=null,this.result={front:null,back:null};const a=document.createElement("script");a.src="./node_modules/accuraidscanplugin/public/libs/piexif.js",document.head.appendChild(a),this.selectedCard=null,this.init()}async init(){try{const t=await fetch("./node_modules/accuraidscanplugin/js.json");if(!t.ok)throw new Error("Failed to load data");this.countriesData=await t.json(),this.loadStyles(),await this.setSelectedCard(),this.startCamera()}catch(t){console.error("Error loading countries data:",t)}}async setSelectedCard(){const t=this.countriesData.find((t=>t.country_code===this.country_code));if(!t)return void console.error(`Country with code ${this.country_code} not found`);let e=null,i=null,a=null;for(const n of t.cards||[])if(n.allcard&&Array.isArray(n.allcard)&&(e=n.allcard.find((t=>t.card_code===this.card_code)),e)){a=n,i=2===n.allcard.length?n.allcard.find((t=>t.card_code!==this.card_code)):null;break}e?this.selectedCard={country_code:t.country_code,card_code:e.card_code,country:t,frontCard:e,backCard:i,requiresBack:!!i}:console.error(`Card with code ${this.card_code} not found for country ${this.country_code}`)}loadStyles(){if(!document.querySelector('link[href*="all.min.css"]')){const t=document.createElement("link");t.rel="stylesheet",t.href="./node_modules/accuraidscanplugin/public/fontawesome-free/css/all.min.css",document.head.appendChild(t)}}startCamera(){if(this.selectedCard)if(this.createCameraUI(),"undefined"!=typeof cv&&cv.getBuildInformation)this.startCameraProcessing();else{const t=document.createElement("script");t.src="./node_modules/accuraidscanplugin/accuraface1.js",t.onload=()=>{cv.onRuntimeInitialized=()=>this.startCameraProcessing()},document.body.appendChild(t)}else console.error("No card selected. Cannot start camera.")}createCameraUI(){this.cameraContainer=document.createElement("div"),this.cameraContainer.className="camera-container",this.cameraContainer.style.position="fixed",this.cameraContainer.style.top="0",this.cameraContainer.style.left="0",this.cameraContainer.style.width="100%",this.cameraContainer.style.height="100%",this.cameraContainer.style.display="flex",this.cameraContainer.style.justifyContent="center",this.cameraContainer.style.alignItems="center",this.cameraContainer.style.background="rgba(0,0,0,0.8)",this.cameraContainer.style.zIndex="2000",document.body.appendChild(this.cameraContainer),this.video=document.createElement("video"),this.video.id="video",this.video.autoplay=!0,this.video.playsInline=!0,this.video.style.width="auto",this.video.style.height="100%",this.video.style.objectFit="cover",this.video.style.position="absolute",this.video.style.top="0",this.video.style.left="50%",this.video.style.transform="translateX(-50%)",this.cameraContainer.appendChild(this.video),this.canvas=document.createElement("canvas"),this.canvas.id="canvas",this.canvas.style.display="none",this.canvas.style.transform="scaleX(-1)",this.cameraContainer.appendChild(this.canvas),this.scanFrame=document.createElement("div"),this.scanFrame.className="scan-frame",this.scanFrame.style.position="absolute",this.scanFrame.style.top="50%",this.scanFrame.style.left="50%",this.scanFrame.style.transform="translate(-50%, -50%)",this.scanFrame.style.border="2px solid red",this.scanFrame.style.boxSizing="border-box",this.scanFrame.style.boxShadow="0 0 0 9999px rgba(0, 0, 0, 0.6)",window.innerWidth<=767?(this.scanFrame.style.width="90vw",this.scanFrame.style.height="50vw",this.scanFrame.style.maxWidth="350px",this.scanFrame.style.maxHeight="200px"):window.innerWidth<=1024?(this.scanFrame.style.width="60vw",this.scanFrame.style.height="40vw",this.scanFrame.style.maxWidth="600px",this.scanFrame.style.maxHeight="400px"):(this.scanFrame.style.width="50vw",this.scanFrame.style.height="30vw",this.scanFrame.style.maxWidth="800px",this.scanFrame.style.maxHeight="500px"),this.cameraContainer.appendChild(this.scanFrame),this.instructionText=document.createElement("div"),this.instructionText.className="instruction-text",this.instructionText.id="instructionText",this.instructionText.textContent="Keep Document in Frame",this.instructionText.style.position="absolute",this.instructionText.style.left="50%",this.instructionText.style.transform="translateX(-50%)",this.instructionText.style.padding="8px 12px",this.instructionText.style.borderRadius="6px",this.instructionText.style.pointerEvents="none",this.instructionText.style.textAlign="center",this.instructionText.style.fontSize="0.8rem",this.instructionText.style.fontWeight="450",this.instructionText.style.width="100%",this.instructionText.style.maxWidth="100%",this.instructionText.style.zIndex="8000",this.instructionText.style.color="#fff",this.instructionText.style.bottom="10%",this.cameraContainer.appendChild(this.instructionText),this.topInstructionText=document.createElement("div"),this.topInstructionText.className="top-instruction-text",this.topInstructionText.id="topInstructionText",this.topInstructionText.style.position="absolute",this.topInstructionText.style.left="50%",this.topInstructionText.style.transform="translateX(-50%)",this.topInstructionText.style.padding="8px 12px",this.topInstructionText.style.borderRadius="6px",this.topInstructionText.style.pointerEvents="none",this.topInstructionText.style.textAlign="center",this.topInstructionText.style.fontSize="0.8rem",this.topInstructionText.style.fontWeight="450",this.topInstructionText.style.width="100%",this.topInstructionText.style.maxWidth="100%",this.topInstructionText.style.zIndex="8000",this.topInstructionText.style.color="#fff",this.topInstructionText.style.top="10%",this.cameraContainer.appendChild(this.topInstructionText),this.backButton=document.createElement("button"),this.backButton.className="camera-back-button",this.backButton.id="cameraBackBtn",this.backButton.innerHTML='<i class="fas fa-arrow-left"></i>',this.backButton.style.position="absolute",this.backButton.style.top="20px",this.backButton.style.left="20px",this.backButton.style.backgroundColor="#fff",this.backButton.style.color="red",this.backButton.style.border="none",this.backButton.style.borderRadius="4px",this.backButton.style.padding="10px 14px",this.backButton.style.fontSize="1rem",this.backButton.style.cursor="pointer",this.backButton.style.zIndex="3000",this.cameraContainer.appendChild(this.backButton),this.backButton.addEventListener("click",(()=>{this.stopAllStreams(),this.cameraContainer.remove()}))}startCameraProcessing(){const{country:t,REWARDS:e,frontCard:i,backCard:a,requiresBack:n}=this.selectedCard;let s=i.card_code,o=.12,r=.12;"CLMIDN"===s&&(o=.09,r=.1),"CLMID"===s&&(o=.1,r=.1),"COLPAF"===s&&(o=.09,r=.1),"CLMDL"===s&&(o=.11,r=.1),"COLCIF"===s&&(o=.08,r=.09),"UGNIDF"===s&&(o=.08,r=.09),"UGNIDB"===s&&(o=.08,r=.09);let c="CLMIDN"===s?`Scan Front Side of ${t.country_name} National ID Card New`:"CLMID"===s?`Scan Front Side of ${t.country_name} National ID Card`:"COLPAF"===s?`Scan Front Side of ${t.country_name}'s Passport`:"CLMDL"===s?`Scan Front Side of ${t.country_name}'s Driving License`:"COLCIF"===s?`Scan Front Side of ${t.country_name}'s Citizen Card`:"UGNIDF"===s?`Scan Front Side of ${t.country_name}'s National ID Card`:"Scanning front side...";this.topInstructionText.textContent=c,this.instructionText.textContent="Keep Document in Frame";const l=new Image;l.src="data:image/jpeg;base64,"+i.card_img;let d=!1,h=0,m=0,u=!1;l.onload=()=>{const e=cv.imread(l);let s=Math.round(.15*e.rows),c=e.roi(new cv.Rect(0,0,e.cols,s));navigator.mediaDevices.getUserMedia({video:{width:{ideal:1920},height:{ideal:1080},facingMode:{ideal:"environment"},frameRate:{ideal:60,max:60}}}).then((s=>{this.frontStream=s,this.video.srcObject=this.frontStream,this.video.addEventListener("loadedmetadata",(()=>{this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight}));const l=s=>{if(!this.frontStream||!this.frontStream.active||d)return void requestAnimationFrame(l);const p=this.video.getBoundingClientRect(),y=this.scanFrame.getBoundingClientRect();this.instructionText.style.top=y.bottom+10+"px",this.topInstructionText.style.top=y.top-35+"px";const f=this.video.videoWidth/p.width,x=this.video.videoHeight/p.height,C=(y.left-p.left)*f,v=(y.top-p.top)*x,g=y.width*f,b=y.height*x;if(g>0&&b>0){const s=document.createElement("canvas");s.width=g,s.height=b;s.getContext("2d").drawImage(this.video,C,v,g,b,0,0,g,b);const l=cv.imread(s),p=this.multiScaleTemplateMatch(l,e);if(p.maxVal>=o){const e=this.multiScaleTemplateMatch(l,c);e.maxVal>=r&&(h++,3===h&&(d=!0,this.frontStream.getTracks().forEach((t=>t.stop())),this.processCapturedFrame(s,t,i,p,e,"front").then((()=>{if(n&&a){const e=document.createElement("div");e.id="flipAnimation",e.innerHTML='<i class="fas fa-id-card"></i>',e.style.animation="flipAnimation 1s linear forwards",e.style.position="absolute",e.style.top="50%",e.style.left="50%",e.style.width="50px",e.style.height="50px",e.style.transform="translate(-50%, -50%)",e.style.fontSize="48px",e.style.color="#e53935",this.cameraContainer.appendChild(e),setTimeout((()=>{e.parentNode===this.cameraContainer&&this.cameraContainer.removeChild(e),this.startBackCameraProcessing(t,a)}),1e3)}}))))}m++,m%20!=0||u||(u=!0,this.instructionText.textContent="Keep Document Near to Camera",setTimeout((()=>{d||(this.instructionText.textContent="Keep Document in Frame"),u=!1}),1200)),l.delete()}requestAnimationFrame(l)};requestAnimationFrame(l)})).catch((t=>{console.error("Front camera error:",t)}))}}startBackCameraProcessing(t,e){let i="COLIDB"===e.card_code?`Scan Back Side of ${t.country_name} National ID Card New`:"COLMIDB"===e.card_code?`Scan Back Side of ${t.country_name} National ID Card`:"COLCIB"===e.card_code?`Scan Back Side of ${t.country_name} Citizen Card`:"UGNIDB"===e.cardCode?`Scan Back Side of ${t.country_name}'s National ID Card`:"Scanning back side...";this.topInstructionText.textContent=i,this.instructionText.textContent="Keep Document in Frame";const a=new Image;a.src="data:image/jpeg;base64,"+e.card_img;let n=!1,s=0,o=0,r=!1;a.onload=()=>{const i=cv.imread(a);let c=Math.round(.35*i.rows),l=i.roi(new cv.Rect(0,0,i.cols,c));navigator.mediaDevices.getUserMedia({video:{width:{ideal:1920},height:{ideal:1080},facingMode:{ideal:"environment"},frameRate:{ideal:60,max:60}}}).then((a=>{this.backStream=a,this.video.srcObject=this.backStream,this.video.addEventListener("loadedmetadata",(()=>{this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight}));const c=a=>{if(!this.backStream||!this.backStream.active||n)return void requestAnimationFrame(c);const d=this.video.getBoundingClientRect(),h=this.scanFrame.getBoundingClientRect();this.instructionText.style.top=h.bottom+10+"px",this.topInstructionText.style.top=h.top-35+"px";const m=this.video.videoWidth/d.width,u=this.video.videoHeight/d.height,p=(h.left-d.left)*m,y=(h.top-d.top)*u,f=h.width*m,x=h.height*u;if(f>0&&x>0){const a=document.createElement("canvas");a.width=f,a.height=x;a.getContext("2d").drawImage(this.video,p,y,f,x,0,0,f,x);const c=cv.imread(a),d=this.multiScaleTemplateMatch(c,i);if(d.maxVal>=.1){const i=this.multiScaleTemplateMatch(c,l);i.maxVal>=.11&&(s++,3===s&&(n=!0,this.backStream.getTracks().forEach((t=>t.stop())),this.processCapturedFrame(a,t,e,d,i,"back")))}o++,o%20!=0||r||(r=!0,this.instructionText.textContent="Keep Document Near to Camera",setTimeout((()=>{n||(this.instructionText.textContent="Keep Document in Frame"),r=!1}),1200)),c.delete()}requestAnimationFrame(c)};requestAnimationFrame(c)})).catch((t=>{console.error("Back camera error:",t)}))}}multiScaleTemplateMatch(t,e){let i=null,a=1,n=0;const s=new cv.Mat,o=new cv.Mat;cv.resize(e,o,new cv.Size(e.cols,e.rows));const r=new cv.Mat;cv.cvtColor(o,r,cv.COLOR_RGBA2GRAY),cv.Canny(r,r,60,255);for(let e=1;e<=2;e+=.1){const o=new cv.Mat,c=Math.round(t.cols/e),l=Math.round(t.rows/e);cv.resize(t,o,new cv.Size(c,l));let d=o.cols<r.cols||o.rows<r.rows?new cv.Mat:r;if(o.cols<r.cols||o.rows<r.rows){let t=Math.min(o.cols/r.cols,o.rows/r.rows);cv.resize(r,d,new cv.Size(Math.round(r.cols*t),Math.round(r.rows*t)))}const h=new cv.Mat;cv.cvtColor(o,h,cv.COLOR_RGBA2GRAY),cv.Canny(h,h,60,255);try{cv.matchTemplate(h,d,s,cv.TM_CCOEFF_NORMED)}catch(t){console.error("Error in matchTemplate at scale",e,t)}const m=cv.minMaxLoc(s);m.maxVal>n&&(n=m.maxVal,i=m,a=e),h.delete(),(o.cols<r.cols||o.rows<r.rows)&&d.delete(),o.delete()}return o.delete(),r.delete(),s.delete(),{bestMatch:i,bestScale:a,maxVal:n}}async processCapturedFrame(canvas,t,e,i,a,n){this.showLoadingAnimation(),this.instructionText.textContent="Processing...";try{const t=await new Promise((t=>canvas.toBlob(t,"image/jpeg",.9))),e={"0th":{[piexif.ImageIFD.Make]:"AutoID",[piexif.ImageIFD.Model]:"IDDetectionCamera"}},i=piexif.dump(e),a=piexif.insert(i,canvas.toDataURL("image/jpeg",.92));await new Promise((e=>{const i=new FileReader;i.onload=()=>e(i.result),i.readAsDataURL(t)}));"front"===n?this.result.front=a:"back"===n&&(this.result.back=a),!this.selectedCard.requiresBack||this.result.back?(this.callback(this.result),this.hideLoadingAnimation(),setTimeout((()=>{this.stopAllStreams(),this.cameraContainer.remove()}),1e3)):this.hideLoadingAnimation()}catch(t){console.error("Error processing captured frame:",t),this.hideLoadingAnimation(),this.instructionText.textContent="Error processing image. Please try again."}}showLoadingAnimation(){const t=document.createElement("div");t.className="loading-spinner",t.innerHTML='<i class="fas fa-spinner"></i>',t.style.position="absolute",t.style.top="50%",t.style.left="50%",t.style.transform="translate(-50%, -50%)",t.style.zIndex="3500";const e=t.querySelector("i");e.style.fontSize="48px",e.style.animation="spin 1s linear infinite",e.style.color="#e53935",this.cameraContainer.appendChild(t),this.loadingSpinner=t}hideLoadingAnimation(){this.loadingSpinner&&this.loadingSpinner.parentNode===this.cameraContainer&&this.cameraContainer.removeChild(this.loadingSpinner)}stopAllStreams(){this.frontStream&&(this.frontStream.getTracks().forEach((t=>t.stop())),this.frontStream=null),this.backStream&&(this.backStream.getTracks().forEach((t=>t.stop())),this.backStream=null)}}const style=document.createElement("style");style.textContent="\n@keyframes spin { \n from { transform: rotate(0deg); } \n to { transform: rotate(360deg); } \n}\n@keyframes flipAnimation { \n from { transform: translate(-50%, -50%) rotateY(0deg); } \n to { transform: translate(-50%, -50%) rotateY(360deg); } \n}\n",document.head.appendChild(style);
|
|
1
|
+
export default class IDCardPlugin{constructor(t,e,i){this.callback=t,this.country_code=e,this.card_code=i,this.countriesData=[],this.frontStream=null,this.backStream=null,this.uaParserLoaded="undefined"!=typeof UAParser,this.frontCapture=null,this.backCapture=null,this.result={front:null,back:null};const a=document.createElement("script");a.src="./node_modules/accuraidscanplugin/public/libs/piexif.js",document.head.appendChild(a),this.selectedCard=null,this.init()}async init(){try{const t=await fetch("./node_modules/accuraidscanplugin/src/js.json");if(!t.ok)throw new Error("Failed to load data");this.countriesData=await t.json(),this.loadStyles(),await this.setSelectedCard(),this.startCamera()}catch(t){console.error("Error loading countries data:",t)}}async setSelectedCard(){const t=this.countriesData.find((t=>t.country_code===this.country_code));if(!t)return void console.error(`Country with code ${this.country_code} not found`);let e=null,i=null,a=null;for(const n of t.cards||[])if(n.allcard&&Array.isArray(n.allcard)&&(e=n.allcard.find((t=>t.card_code===this.card_code)),e)){a=n,i=2===n.allcard.length?n.allcard.find((t=>t.card_code!==this.card_code)):null;break}e?this.selectedCard={country_code:t.country_code,card_code:e.card_code,country:t,frontCard:e,backCard:i,requiresBack:!!i}:console.error(`Card with code ${this.card_code} not found for country ${this.country_code}`)}loadStyles(){if(!document.querySelector('link[href*="all.min.css"]')){const t=document.createElement("link");t.rel="stylesheet",t.href="./node_modules/accuraidscanplugin/public/fontawesome-free/css/all.min.css",document.head.appendChild(t)}}startCamera(){if(this.selectedCard)if(this.createCameraUI(),"undefined"!=typeof cv&&cv.getBuildInformation)this.startCameraProcessing();else{const t=document.createElement("script");t.src="./node_modules/accuraidscanplugin/accuraface1.js",t.onload=()=>{cv.onRuntimeInitialized=()=>this.startCameraProcessing()},document.body.appendChild(t)}else console.error("No card selected. Cannot start camera.")}createCameraUI(){this.cameraContainer=document.createElement("div"),this.cameraContainer.className="camera-container",this.cameraContainer.style.position="fixed",this.cameraContainer.style.top="0",this.cameraContainer.style.left="0",this.cameraContainer.style.width="100%",this.cameraContainer.style.height="100%",this.cameraContainer.style.display="flex",this.cameraContainer.style.justifyContent="center",this.cameraContainer.style.alignItems="center",this.cameraContainer.style.background="rgba(0,0,0,0.8)",this.cameraContainer.style.zIndex="2000",document.body.appendChild(this.cameraContainer),this.video=document.createElement("video"),this.video.id="video",this.video.autoplay=!0,this.video.playsInline=!0,this.video.style.width="auto",this.video.style.height="100%",this.video.style.objectFit="cover",this.video.style.position="absolute",this.video.style.top="0",this.video.style.left="50%",this.video.style.transform="translateX(-50%)",this.cameraContainer.appendChild(this.video),this.canvas=document.createElement("canvas"),this.canvas.id="canvas",this.canvas.style.display="none",this.canvas.style.transform="scaleX(-1)",this.cameraContainer.appendChild(this.canvas),this.scanFrame=document.createElement("div"),this.scanFrame.className="scan-frame",this.scanFrame.style.position="absolute",this.scanFrame.style.top="50%",this.scanFrame.style.left="50%",this.scanFrame.style.transform="translate(-50%, -50%)",this.scanFrame.style.border="2px solid red",this.scanFrame.style.boxSizing="border-box",this.scanFrame.style.boxShadow="0 0 0 9999px rgba(0, 0, 0, 0.6)",window.innerWidth<=767?(this.scanFrame.style.width="90vw",this.scanFrame.style.height="50vw",this.scanFrame.style.maxWidth="350px",this.scanFrame.style.maxHeight="200px"):window.innerWidth<=1024?(this.scanFrame.style.width="60vw",this.scanFrame.style.height="40vw",this.scanFrame.style.maxWidth="600px",this.scanFrame.style.maxHeight="400px"):(this.scanFrame.style.width="50vw",this.scanFrame.style.height="30vw",this.scanFrame.style.maxWidth="800px",this.scanFrame.style.maxHeight="500px"),this.cameraContainer.appendChild(this.scanFrame),this.instructionText=document.createElement("div"),this.instructionText.className="instruction-text",this.instructionText.id="instructionText",this.instructionText.textContent="Keep Document in Frame",this.instructionText.style.position="absolute",this.instructionText.style.left="50%",this.instructionText.style.transform="translateX(-50%)",this.instructionText.style.padding="8px 12px",this.instructionText.style.borderRadius="6px",this.instructionText.style.pointerEvents="none",this.instructionText.style.textAlign="center",this.instructionText.style.fontSize="0.8rem",this.instructionText.style.fontWeight="450",this.instructionText.style.width="100%",this.instructionText.style.maxWidth="100%",this.instructionText.style.zIndex="8000",this.instructionText.style.color="#fff",this.instructionText.style.bottom="10%",this.cameraContainer.appendChild(this.instructionText),this.topInstructionText=document.createElement("div"),this.topInstructionText.className="top-instruction-text",this.topInstructionText.id="topInstructionText",this.topInstructionText.style.position="absolute",this.topInstructionText.style.left="50%",this.topInstructionText.style.transform="translateX(-50%)",this.topInstructionText.style.padding="8px 12px",this.topInstructionText.style.borderRadius="6px",this.topInstructionText.style.pointerEvents="none",this.topInstructionText.style.textAlign="center",this.topInstructionText.style.fontSize="0.8rem",this.topInstructionText.style.fontWeight="450",this.topInstructionText.style.width="100%",this.topInstructionText.style.maxWidth="100%",this.topInstructionText.style.zIndex="8000",this.topInstructionText.style.color="#fff",this.topInstructionText.style.top="10%",this.cameraContainer.appendChild(this.topInstructionText),this.backButton=document.createElement("button"),this.backButton.className="camera-back-button",this.backButton.id="cameraBackBtn",this.backButton.innerHTML='<i class="fas fa-arrow-left"></i>',this.backButton.style.position="absolute",this.backButton.style.top="20px",this.backButton.style.left="20px",this.backButton.style.backgroundColor="#fff",this.backButton.style.color="red",this.backButton.style.border="none",this.backButton.style.borderRadius="4px",this.backButton.style.padding="10px 14px",this.backButton.style.fontSize="1rem",this.backButton.style.cursor="pointer",this.backButton.style.zIndex="3000",this.cameraContainer.appendChild(this.backButton),this.backButton.addEventListener("click",(()=>{this.stopAllStreams(),this.cameraContainer.remove()}))}startCameraProcessing(){const{country:t,REWARDS:e,frontCard:i,backCard:a,requiresBack:n}=this.selectedCard;let s=i.card_code,o=.12,r=.12;"CLMIDN"===s&&(o=.09,r=.1),"CLMID"===s&&(o=.1,r=.1),"COLPAF"===s&&(o=.09,r=.1),"CLMDL"===s&&(o=.11,r=.1),"COLCIF"===s&&(o=.08,r=.09),"UGNIDF"===s&&(o=.08,r=.09),"UGNIDB"===s&&(o=.08,r=.09);let c="CLMIDN"===s?`Scan Front Side of ${t.country_name} National ID Card New`:"CLMID"===s?`Scan Front Side of ${t.country_name} National ID Card`:"COLPAF"===s?`Scan Front Side of ${t.country_name}'s Passport`:"CLMDL"===s?`Scan Front Side of ${t.country_name}'s Driving License`:"COLCIF"===s?`Scan Front Side of ${t.country_name}'s Citizen Card`:"UGNIDF"===s?`Scan Front Side of ${t.country_name}'s National ID Card`:"Scanning front side...";this.topInstructionText.textContent=c,this.instructionText.textContent="Keep Document in Frame";const l=new Image;l.src="data:image/jpeg;base64,"+i.card_img;let d=!1,h=0,m=0,u=!1;l.onload=()=>{const e=cv.imread(l);let s=Math.round(.15*e.rows),c=e.roi(new cv.Rect(0,0,e.cols,s));navigator.mediaDevices.getUserMedia({video:{width:{ideal:1920},height:{ideal:1080},facingMode:{ideal:"environment"},frameRate:{ideal:60,max:60}}}).then((s=>{this.frontStream=s,this.video.srcObject=this.frontStream,this.video.addEventListener("loadedmetadata",(()=>{this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight}));const l=s=>{if(!this.frontStream||!this.frontStream.active||d)return void requestAnimationFrame(l);const p=this.video.getBoundingClientRect(),y=this.scanFrame.getBoundingClientRect();this.instructionText.style.top=y.bottom+10+"px",this.topInstructionText.style.top=y.top-35+"px";const f=this.video.videoWidth/p.width,x=this.video.videoHeight/p.height,C=(y.left-p.left)*f,v=(y.top-p.top)*x,g=y.width*f,b=y.height*x;if(g>0&&b>0){const s=document.createElement("canvas");s.width=g,s.height=b;s.getContext("2d").drawImage(this.video,C,v,g,b,0,0,g,b);const l=cv.imread(s),p=this.multiScaleTemplateMatch(l,e);if(p.maxVal>=o){const e=this.multiScaleTemplateMatch(l,c);e.maxVal>=r&&(h++,3===h&&(d=!0,this.frontStream.getTracks().forEach((t=>t.stop())),this.processCapturedFrame(s,t,i,p,e,"front").then((()=>{if(n&&a){const e=document.createElement("div");e.id="flipAnimation",e.innerHTML='<i class="fas fa-id-card"></i>',e.style.animation="flipAnimation 1s linear forwards",e.style.position="absolute",e.style.top="50%",e.style.left="50%",e.style.width="50px",e.style.height="50px",e.style.transform="translate(-50%, -50%)",e.style.fontSize="48px",e.style.color="#e53935",this.cameraContainer.appendChild(e),setTimeout((()=>{e.parentNode===this.cameraContainer&&this.cameraContainer.removeChild(e),this.startBackCameraProcessing(t,a)}),1e3)}}))))}m++,m%20!=0||u||(u=!0,this.instructionText.textContent="Keep Document Near to Camera",setTimeout((()=>{d||(this.instructionText.textContent="Keep Document in Frame"),u=!1}),1200)),l.delete()}requestAnimationFrame(l)};requestAnimationFrame(l)})).catch((t=>{console.error("Front camera error:",t)}))}}startBackCameraProcessing(t,e){let i="COLIDB"===e.card_code?`Scan Back Side of ${t.country_name} National ID Card New`:"COLMIDB"===e.card_code?`Scan Back Side of ${t.country_name} National ID Card`:"COLCIB"===e.card_code?`Scan Back Side of ${t.country_name} Citizen Card`:"UGNIDB"===e.card_code?`Scan Back Side of ${t.country_name}'s National ID Card`:"Scanning back side...";this.topInstructionText.textContent=i,this.instructionText.textContent="Keep Document in Frame";const a=new Image;a.src="data:image/jpeg;base64,"+e.card_img;let n=!1,s=0,o=0,r=!1;a.onload=()=>{const i=cv.imread(a);let c=Math.round(.35*i.rows),l=i.roi(new cv.Rect(0,0,i.cols,c));navigator.mediaDevices.getUserMedia({video:{width:{ideal:1920},height:{ideal:1080},facingMode:{ideal:"environment"},frameRate:{ideal:60,max:60}}}).then((a=>{this.backStream=a,this.video.srcObject=this.backStream,this.video.addEventListener("loadedmetadata",(()=>{this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight}));const c=a=>{if(!this.backStream||!this.backStream.active||n)return void requestAnimationFrame(c);const d=this.video.getBoundingClientRect(),h=this.scanFrame.getBoundingClientRect();this.instructionText.style.top=h.bottom+10+"px",this.topInstructionText.style.top=h.top-35+"px";const m=this.video.videoWidth/d.width,u=this.video.videoHeight/d.height,p=(h.left-d.left)*m,y=(h.top-d.top)*u,f=h.width*m,x=h.height*u;if(f>0&&x>0){const a=document.createElement("canvas");a.width=f,a.height=x;a.getContext("2d").drawImage(this.video,p,y,f,x,0,0,f,x);const c=cv.imread(a),d=this.multiScaleTemplateMatch(c,i);if(d.maxVal>=.1){const i=this.multiScaleTemplateMatch(c,l);i.maxVal>=.11&&(s++,3===s&&(n=!0,this.backStream.getTracks().forEach((t=>t.stop())),this.processCapturedFrame(a,t,e,d,i,"back")))}o++,o%20!=0||r||(r=!0,this.instructionText.textContent="Keep Document Near to Camera",setTimeout((()=>{n||(this.instructionText.textContent="Keep Document in Frame"),r=!1}),1200)),c.delete()}requestAnimationFrame(c)};requestAnimationFrame(c)})).catch((t=>{console.error("Back camera error:",t)}))}}multiScaleTemplateMatch(t,e){let i=null,a=1,n=0;const s=new cv.Mat,o=new cv.Mat;cv.resize(e,o,new cv.Size(e.cols,e.rows));const r=new cv.Mat;cv.cvtColor(o,r,cv.COLOR_RGBA2GRAY),cv.Canny(r,r,60,255);for(let e=1;e<=2;e+=.1){const o=new cv.Mat,c=Math.round(t.cols/e),l=Math.round(t.rows/e);cv.resize(t,o,new cv.Size(c,l));let d=o.cols<r.cols||o.rows<r.rows?new cv.Mat:r;if(o.cols<r.cols||o.rows<r.rows){let t=Math.min(o.cols/r.cols,o.rows/r.rows);cv.resize(r,d,new cv.Size(Math.round(r.cols*t),Math.round(r.rows*t)))}const h=new cv.Mat;cv.cvtColor(o,h,cv.COLOR_RGBA2GRAY),cv.Canny(h,h,60,255);try{cv.matchTemplate(h,d,s,cv.TM_CCOEFF_NORMED)}catch(t){console.error("Error in matchTemplate at scale",e,t)}const m=cv.minMaxLoc(s);m.maxVal>n&&(n=m.maxVal,i=m,a=e),h.delete(),(o.cols<r.cols||o.rows<r.rows)&&d.delete(),o.delete()}return o.delete(),r.delete(),s.delete(),{bestMatch:i,bestScale:a,maxVal:n}}async processCapturedFrame(canvas,t,e,i,a,n){this.showLoadingAnimation(),this.instructionText.textContent="Processing...";try{const t=await new Promise((t=>canvas.toBlob(t,"image/jpeg",.9))),e={"0th":{[piexif.ImageIFD.Make]:"AutoID",[piexif.ImageIFD.Model]:"IDDetectionCamera"}},i=piexif.dump(e),a=piexif.insert(i,canvas.toDataURL("image/jpeg",.92));await new Promise((e=>{const i=new FileReader;i.onload=()=>e(i.result),i.readAsDataURL(t)}));"front"===n?this.result.front=a:"back"===n&&(this.result.back=a),!this.selectedCard.requiresBack||this.result.back?(this.callback(this.result),this.hideLoadingAnimation(),setTimeout((()=>{this.stopAllStreams(),this.cameraContainer.remove()}),1e3)):this.hideLoadingAnimation()}catch(t){console.error("Error processing captured frame:",t),this.hideLoadingAnimation(),this.instructionText.textContent="Error processing image. Please try again."}}showLoadingAnimation(){const t=document.createElement("div");t.className="loading-spinner",t.innerHTML='<i class="fas fa-spinner"></i>',t.style.position="absolute",t.style.top="50%",t.style.left="50%",t.style.transform="translate(-50%, -50%)",t.style.zIndex="3500";const e=t.querySelector("i");e.style.fontSize="48px",e.style.animation="spin 1s linear infinite",e.style.color="#e53935",this.cameraContainer.appendChild(t),this.loadingSpinner=t}hideLoadingAnimation(){this.loadingSpinner&&this.loadingSpinner.parentNode===this.cameraContainer&&this.cameraContainer.removeChild(this.loadingSpinner)}stopAllStreams(){this.frontStream&&(this.frontStream.getTracks().forEach((t=>t.stop())),this.frontStream=null),this.backStream&&(this.backStream.getTracks().forEach((t=>t.stop())),this.backStream=null)}}const style=document.createElement("style");style.textContent="\n@keyframes spin { \n from { transform: rotate(0deg); } \n to { transform: rotate(360deg); } \n}\n@keyframes flipAnimation { \n from { transform: translate(-50%, -50%) rotateY(0deg); } \n to { transform: translate(-50%, -50%) rotateY(360deg); } \n}\n",document.head.appendChild(style);
|