accurafaceplugin 1.0.0 → 1.0.4

package/build/accuramain.js

@@ -1 +1 @@
-export default class FacePlugin{constructor(e,t){this.haarcascadeUrl=e,this.faceDetectionCount=0,this.onResultReceived=t,this.FPS=30,this.ZOOM_FACTOR=1.5,this.lastFaceDetectionTime=Date.now(),this.opencvLoaded=!1,this.createUI(),this.addStyles(),this.video=document.getElementById("videoInput"),this.canvas=document.getElementById("canvasOutput"),this.instructionText=document.getElementById("instructionText"),this.loader=document.getElementById("loader");const n=document.createElement("script");n.src="https://cdn.jsdelivr.net/npm/piexifjs@1.0.6/piexif.min.js",document.head.appendChild(n),this.checkOpenCV()}createUI(){const e=document.createElement("div");e.className="container";const t=document.createElement("div");t.className="camera-input",t.style.position="relative";const video=document.createElement("video");video.id="videoInput",video.width=640,video.height=480,video.autoplay=!0,video.muted=!0;const canvas=document.createElement("canvas");canvas.id="canvasOutput",canvas.style.display="none";const n=document.createElement("div");n.id="loader",n.className="loader",n.style.display="none";const i=document.createElement("p");i.id="instructionText",t.appendChild(video),t.appendChild(canvas),t.appendChild(n),e.appendChild(t),e.appendChild(i),document.body.appendChild(e)}checkOpenCV(){const e=()=>{window.cv?(this.opencvLoaded=!0,this.openCvReady()):setTimeout(e,100)};e()}openCvReady(){navigator.mediaDevices.getUserMedia({video:!0,audio:!1}).then((e=>{this.video.srcObject=e,this.video.play(),this.isCanvasVisible=!1,this.video.addEventListener("loadedmetadata",(()=>{if(this.video.videoWidth&&this.video.videoHeight){this.canvas.width=640,this.canvas.height=480;const e=new window.cv.Mat(this.video.videoHeight,this.video.videoWidth,window.cv.CV_8UC4),t=new window.cv.Mat(this.video.videoHeight,this.video.videoWidth,window.cv.CV_8UC4),n=new window.cv.VideoCapture(this.video),i=new window.cv.CascadeClassifier,o=new window.Utils("errorMessage"),s=this.haarcascadeUrl;o.createFileFromUrl(s,s,(()=>{i.load(s),this.facepluginopencv(n,e,t,i)}))}}))})).catch((e=>{console.error("An error occurred while accessing media devices: ",e)}))}isFaceInsideOval(e,canvas){const t=canvas.width/2,n=canvas.height/2,i=canvas.width/2,o=canvas.height/2;return(e.x+e.width/2-t)**2/i**2+(e.y+e.height/2-n)**2/o**2<=1}facepluginopencv(e,t,n,i){const o=Date.now();e.read(t);const s=new window.cv.Rect(t.cols/2-t.cols/(2*this.ZOOM_FACTOR),t.rows/2-t.rows/(2*this.ZOOM_FACTOR),t.cols/this.ZOOM_FACTOR,t.rows/this.ZOOM_FACTOR);let a=t.roi(s);window.cv.resize(a,n,new window.cv.Size(t.cols,t.rows),0,0,window.cv.INTER_LINEAR),this.instructionText.textContent="Keep Your Face In The Frame";let c=new window.cv.RectVector;try{if(i.detectMultiScale(t,c,1.5,3,0),1===c.size()){const e=c.get(0),n=(new window.cv.Rect(e.x,e.y,e.width,e.height),.14);let i=Math.max(0,e.x-e.width*n),o=Math.max(0,e.y-e.height*n),s=Math.min(t.cols-i,e.width*(1+2*n)),a=Math.min(t.rows-o,e.height*(1+2*n));const d=new window.cv.Rect(i,o,s,a);window.cv.rectangle(t,new window.cv.Point(d.x,d.y),new window.cv.Point(d.x+d.width,d.y+d.height),[5,255,0,255],2);const h=e.width*e.height,r=h/(Math.PI*(this.canvas.width/2)*(this.canvas.height/2))*100;if(this.isFaceInsideOval(e,this.canvas)){if(r<30)this.instructionText.textContent="Stay closer to the window";else if(r>=30&&r<=100&&(this.instructionText.textContent="Processing....",this.faceDetectionCount++,2===this.faceDetectionCount)){this.convertToBase64WithMetadata(d);const e=this.video.srcObject;if(e){e.getTracks().forEach((e=>e.stop()))}return}}else this.instructionText.textContent="Move inside the oval window";this.lastFaceDetectionTime=Date.now()}}catch(e){console.error("Error processing video:",e)}finally{c.delete()}this.isCanvasVisible&&(window.cv.flip(t,t,1),window.cv.imshow(this.canvas.id,t));const d=1e3/this.FPS-(Date.now()-o);setTimeout((()=>this.facepluginopencv(e,t,n,i)),d)}convertToBase64WithMetadata(e){const t=document.createElement("canvas");t.width=this.video.videoWidth,t.height=this.video.videoHeight;const n=t.getContext("2d");n.drawImage(this.video,0,0,t.width,t.height);const i=document.createElement("canvas");i.width=e.width,i.height=e.height;const o=i.getContext("2d"),s=n.getImageData(e.x,e.y,e.width,e.height);o.putImageData(s,0,0);const a={"0th":{[piexif.ImageIFD.Make]:"AccuraFace",[piexif.ImageIFD.Model]:"FaceDetectionCamera"}},c=piexif.dump(a),d=piexif.insert(c,i.toDataURL("image/jpeg",.92));this.onResultReceived&&this.onResultReceived({base64:d,metadata:a})}addStyles(){const e=document.createElement("style");e.type="text/css",e.innerText="\n        body {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          height: 100vh;\n          margin: 0;\n          background-color: rgb(255, 255, 255);\n          font-family: Arial, sans-serif;\n          flex-direction: column;\n        }\n        \n        .container {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          padding: 20px;\n          background-color: transparent;\n          border-radius: 10px;\n        }\n        \n        #instructionText {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: 10px;\n          background-color: #fff;\n          color: rgb(10, 18, 131);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n          border-radius: 5px;\n          margin-bottom: 20px;\n          font-size: 30px;\n          font-weight: bold;\n        }\n        \n        .camera-input {\n          width: 250px;\n          height: 370px;\n          position: relative;\n          overflow: hidden;\n          border-radius: 50%;\n          transform: scale(1.0);    \n        }\n        \n        #videoInput {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n          transition: transform 0.3s ease-in-out;\n          transform: scaleX(-1) scale(1.5);         \n        }\n        \n        #canvasOutput {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          transform: scale(1.5);\n        }\n        \n        #response-text {\n          font-size: 18px;\n          color: #333;\n          margin-top: 10px;\n        }\n        ",document.head.appendChild(e)}}
+export default class FacePlugin{constructor(e,t){this.haarcascadeUrl=e,this.faceDetectionCount=0,this.onResultReceived=t,this.FPS=30,this.ZOOM_FACTOR=1.5,this.lastFaceDetectionTime=Date.now(),this.opencvLoaded=!1,this.createUI(),this.addStyles(),this.video=document.getElementById("videoInput"),this.canvas=document.getElementById("canvasOutput"),this.instructionText=document.getElementById("instructionText"),this.loader=document.getElementById("loader");const n=document.createElement("script");n.src="https://cdn.jsdelivr.net/npm/piexifjs@1.0.6/piexif.min.js",document.head.appendChild(n),this.checkOpenCV()}createUI(){const e=document.createElement("div");e.className="container";const t=document.createElement("div");t.className="camera-input",t.style.position="relative";const video=document.createElement("video");video.id="videoInput",video.width=640,video.height=480,video.autoplay=!0,video.muted=!0;const canvas=document.createElement("canvas");canvas.id="canvasOutput",canvas.style.display="none";const n=document.createElement("div");n.id="loader",n.className="loader",n.style.display="none";const i=document.createElement("p");i.id="instructionText",t.appendChild(video),t.appendChild(canvas),t.appendChild(n),e.appendChild(t),e.appendChild(i),document.body.appendChild(e)}checkOpenCV(){const e=()=>{window.cv?(this.opencvLoaded=!0,this.openCvReady()):setTimeout(e,100)};e()}openCvReady(){navigator.mediaDevices.getUserMedia({video:!0,audio:!1}).then((e=>{this.video.srcObject=e,this.video.play(),this.isCanvasVisible=!1,this.video.addEventListener("loadedmetadata",(()=>{if(this.video.videoWidth&&this.video.videoHeight){this.video.width=this.video.videoWidth,this.video.height=this.video.videoHeight,this.canvas.width=this.video.videoWidth,this.canvas.height=this.video.videoHeight;const e=new window.cv.Mat(this.video.videoHeight,this.video.videoWidth,window.cv.CV_8UC4),t=new window.cv.Mat(this.video.videoHeight,this.video.videoWidth,window.cv.CV_8UC4),n=new window.cv.VideoCapture(this.video),i=new window.cv.CascadeClassifier,o=new window.Utils("errorMessage"),s=this.haarcascadeUrl;o.createFileFromUrl(s,s,(()=>{i.load(s),this.facepluginopencv(n,e,t,i)}))}}))})).catch((e=>{console.error("An error occurred while accessing media devices: ",e)}))}isFaceInsideOval(e,canvas){const t=canvas.width/2,n=canvas.height/2,i=canvas.width/2,o=canvas.height/2;return(e.x+e.width/2-t)**2/i**2+(e.y+e.height/2-n)**2/o**2<=1}facepluginopencv(e,t,n,i){const o=Date.now();e.read(t);const s=new window.cv.Rect(t.cols/2-t.cols/(2*this.ZOOM_FACTOR),t.rows/2-t.rows/(2*this.ZOOM_FACTOR),t.cols/this.ZOOM_FACTOR,t.rows/this.ZOOM_FACTOR);let a=t.roi(s);window.cv.resize(a,n,new window.cv.Size(t.cols,t.rows),0,0,window.cv.INTER_LINEAR),this.instructionText.textContent="Keep Your Face In The Frame";let d=new window.cv.RectVector;try{if(i.detectMultiScale(t,d,1.5,3,0),1===d.size()){const e=d.get(0),n=(new window.cv.Rect(e.x,e.y,e.width,e.height),.14);let i=Math.max(0,e.x-e.width*n),o=Math.max(0,e.y-e.height*n),s=Math.min(t.cols-i,e.width*(1+2*n)),a=Math.min(t.rows-o,e.height*(1+2*n));const c=new window.cv.Rect(i,o,s,a);window.cv.rectangle(t,new window.cv.Point(c.x,c.y),new window.cv.Point(c.x+c.width,c.y+c.height),[5,255,0,255],2);const h=e.width*e.height,r=h/(Math.PI*(this.canvas.width/2)*(this.canvas.height/2))*100;if(this.isFaceInsideOval(e,this.canvas)){if(r<30)this.instructionText.textContent="Stay closer to the window";else if(r>=30&&r<=100&&(this.instructionText.textContent="Processing....",this.faceDetectionCount++,2===this.faceDetectionCount)){this.convertToBase64WithMetadata(c);const e=this.video.srcObject;if(e){e.getTracks().forEach((e=>e.stop()))}return}}else this.instructionText.textContent="Move inside the oval window";this.lastFaceDetectionTime=Date.now()}}catch(e){console.error("Error processing video:",e)}finally{d.delete()}this.isCanvasVisible&&(window.cv.flip(t,t,1),window.cv.imshow(this.canvas.id,t));const c=1e3/this.FPS-(Date.now()-o);setTimeout((()=>this.facepluginopencv(e,t,n,i)),c)}convertToBase64WithMetadata(e){const t=document.createElement("canvas");t.width=this.video.videoWidth,t.height=this.video.videoHeight;const n=t.getContext("2d");n.drawImage(this.video,0,0,t.width,t.height);const i=document.createElement("canvas");i.width=e.width,i.height=e.height;const o=i.getContext("2d"),s=n.getImageData(e.x,e.y,e.width,e.height);o.putImageData(s,0,0);const a={"0th":{[piexif.ImageIFD.Make]:"AccuraFace",[piexif.ImageIFD.Model]:"FaceDetectionCamera"}},d=piexif.dump(a),c=piexif.insert(d,i.toDataURL("image/jpeg",.92));this.onResultReceived&&(this.onResultReceived({base64:c,metadata:a}),document.querySelector("container").style.display="none")}addStyles(){const e=document.createElement("style");e.type="text/css",e.innerText="\n        body {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          height: 100vh;\n          margin: 0;\n          background-color: rgb(255, 255, 255);\n          font-family: Arial, sans-serif;\n          flex-direction: column;\n        }\n        \n        .container {\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          padding: 20px;\n          background-color: transparent;\n          border-radius: 10px;\n        }\n        \n        #instructionText {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          padding: 10px;\n          background-color: #fff;\n          color: rgb(10, 18, 131);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n          border-radius: 5px;\n          margin-bottom: 20px;\n          font-size: 30px;\n          font-weight: bold;\n        }\n        \n        .camera-input {\n          width: 250px;\n          height: 370px;\n          position: relative;\n          overflow: hidden;\n          border-radius: 50%;\n          transform: scale(1.0);    \n        }\n        \n        #videoInput {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n          transition: transform 0.3s ease-in-out;\n          transform: scaleX(-1) scale(1.5);         \n        }\n        \n        #canvasOutput {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          border-radius: 50%;\n          transform: scale(1.5);\n        }\n        \n        #response-text {\n          font-size: 18px;\n          color: #333;\n          margin-top: 10px;\n        }\n\n        /* Desktop (default) */\n\n        /* Laptop */\n        @media (max-width: 1200px) {\n            #instructionText {\n            font-size: 26px;\n            }\n        }\n\n        /* iPad / Tablet */\n        @media (max-width: 992px) {\n            #instructionText {\n            font-size: 23px;\n            }\n        }\n\n        /* Mobile */\n        @media (max-width: 768px) {\n            #instructionText {\n            font-size: 15px;\n            }\n        }\n\n        /* Small Mobile (Extra Small Devices) */\n        @media (max-width: 480px) {\n            #instructionText {\n            font-size: 12px;\n            }\n        }\n    }\n        ",document.head.appendChild(e)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "accurafaceplugin",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "",
   "main": "./src/accura.js",
   "scripts": {
@@ -8,9 +8,10 @@
   },
   "files": [
     "build/accuramain.js",
-    "accuraface1.js",
-    "accuraface2.js",
-    "accura.xml"
+    "./accuraface1.js",
+    "./accuraface2.js",
+    "./public",
+    "./accura.xml"
   ],
   "keywords": [],
   "author": "",
@@ -26,6 +27,6 @@
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-   
+  
   }
 }

package/public/fontawesome-free/LICENSE.txt

@@ -0,0 +1,165 @@
+Fonticons, Inc. (https://fontawesome.com)
+
+--------------------------------------------------------------------------------
+
+Font Awesome Free License
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+--------------------------------------------------------------------------------
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+
+The Font Awesome Free download is licensed under a Creative Commons
+Attribution 4.0 International License and applies to all icons packaged
+as SVG and JS file types.
+
+--------------------------------------------------------------------------------
+
+# Fonts: SIL OFL 1.1 License
+
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+Copyright (c) 2025 Fonticons, Inc. (https://fontawesome.com)
+with Reserved Font Name: "Font Awesome".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE
+Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting — in part or in whole — any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+Copyright 2025 Fonticons, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Attribution
+
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+--------------------------------------------------------------------------------
+
+# Brand Icons
+
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**

package/public/fontawesome-free/README.md

@@ -0,0 +1,38 @@
+# @fortawesome/fontawesome-free - The Official Font Awesome 7 NPM package
+
+> "I came here to chew bubblegum and install Font Awesome 7 - and I'm all out of bubblegum"
+
+[![npm](https://img.shields.io/npm/v/@fortawesome/fontawesome-free.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/fontawesome-free)
+
+## Installation
+
+```
+$ npm i --save @fortawesome/fontawesome-free
+```
+
+Or
+
+```
+$ yarn add @fortawesome/fontawesome-free
+```
+
+## What's included?
+
+**This package includes all the same files available through our Free and Pro CDN.**
+
+* /js - All JavaScript files associated with Font Awesome 7 SVG with JS
+* /css - All CSS using the classic Web Fonts with CSS implementation
+* /sprites - SVG icons packaged in a convenient sprite
+* /scss - CSS Pre-processor files for Web Fonts with CSS
+* /webfonts - Accompanying files for Web Fonts with CSS
+* /svg - Individual icon files in SVG format
+
+## Documentation
+
+Get started [here](https://docs.fontawesome.com/web/setup/get-started). Continue your journey [here](https://docs.fontawesome.com/web/setup/packages).
+
+Or go straight to the [API documentation](https://docs.fontawesome.com/apis/javascript/get-started).
+
+## Issues and support
+
+Start with [GitHub issues](https://github.com/FortAwesome/Font-Awesome/issues) and ping us on [Twitter](https://twitter.com/fontawesome) if you need to.