accurafaceplugin 1.0.0

package/accuraface2.js

@@ -0,0 +1,267 @@
+function Utils(errorOutputId) {
+  // eslint-disable-line no-unused-vars
+  let self = this;
+  this.errorOutput = document.getElementById(errorOutputId);
+  this.apiKey = "168508101488d7JV8yvF32yRGRti0hyatBHFwev0KInaUAgtGv";
+
+  const OPENCV_URL = "opencv.js";
+  this.loadOpenCv = function (onloadCallback) {
+    let script = document.createElement("script");
+    script.setAttribute("async", "");
+    script.setAttribute("type", "text/javascript");
+    script.addEventListener("load", () => {
+      if (cv.getBuildInformation) {
+        console.log(cv.getBuildInformation());
+        onloadCallback();
+      } else {
+        // WASM
+        cv["onRuntimeInitialized"] = () => {
+          console.log(cv.getBuildInformation());
+          onloadCallback();
+        };
+      }
+    });
+    script.addEventListener("error", () => {
+      self.printError("Failed to load " + OPENCV_URL);
+    });
+    script.src = OPENCV_URL;
+    let node = document.getElementsByTagName("script")[0];
+    node.parentNode.insertBefore(script, node);
+  };
+
+  this.createFileFromUrl = function (path, url, callback) {
+    let request = new XMLHttpRequest();
+    request.open("GET", url, true);
+    request.responseType = "arraybuffer";
+    request.onload = function (ev) {
+      if (request.readyState === 4) {
+        if (request.status === 200) {
+          let data = new Uint8Array(request.response);
+          cv.FS_createDataFile("/", path, data, true, false, false);
+          callback();
+        } else {
+          self.printError(
+            "Failed to load " + url + " status: " + request.status
+          );
+        }
+      }
+    };
+    request.send();
+  };
+
+  this.loadImageToCanvas = function (url, cavansId) {
+    let canvas = document.getElementById(cavansId);
+    let ctx = canvas.getContext("2d");
+    let img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = function () {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0, img.width, img.height);
+    };
+    img.src = url;
+  };
+
+  this.executeCode = function (textAreaId) {
+    try {
+      this.clearError();
+      let code = document.getElementById(textAreaId).value;
+      eval(code);
+    } catch (err) {
+      this.printError(err);
+    }
+  };
+
+  this.clearError = function () {
+    this.errorOutput.innerHTML = "";
+  };
+
+  this.printError = function (err) {
+    if (typeof err === "undefined") {
+      err = "";
+    } else if (typeof err === "number") {
+      if (!isNaN(err)) {
+        if (typeof cv !== "undefined") {
+          err = "Exception: " + cv.exceptionFromPtr(err).msg;
+        }
+      }
+    } else if (typeof err === "string") {
+      let ptr = Number(err.split(" ")[0]);
+      if (!isNaN(ptr)) {
+        if (typeof cv !== "undefined") {
+          err = "Exception: " + cv.exceptionFromPtr(ptr).msg;
+        }
+      }
+    } else if (err instanceof Error) {
+      err = err.stack.replace(/\n/g, "<br>");
+    }
+    this.errorOutput.innerHTML = err;
+  };
+
+  this.loadCode = function (scriptId, textAreaId) {
+    let scriptNode = document.getElementById(scriptId);
+    let textArea = document.getElementById(textAreaId);
+    if (scriptNode.type !== "text/code-snippet") {
+      throw Error("Unknown code snippet type");
+    }
+    textArea.value = scriptNode.text.replace(/^\n/, "");
+  };
+
+  this.addFileInputHandler = function (fileInputId, canvasId) {
+    let inputElement = document.getElementById(fileInputId);
+    inputElement.addEventListener(
+      "change",
+      (e) => {
+        let files = e.target.files;
+        if (files.length > 0) {
+          let imgUrl = URL.createObjectURL(files[0]);
+          self.loadImageToCanvas(imgUrl, canvasId);
+        }
+      },
+      false
+    );
+  };
+
+  function onVideoCanPlay() {
+    if (self.onCameraStartedCallback) {
+      self.onCameraStartedCallback(self.stream, self.video);
+    }
+  }
+
+  this.startCamera = function (resolution, callback, videoId) {
+    const constraints = {
+      qvga: { width: { exact: 320 }, height: { exact: 240 } },
+      vga: { width: { exact: 640 }, height: { exact: 480 } },
+    };
+    let video = document.getElementById(videoId);
+    if (!video) {
+      video = document.createElement("video");
+    }
+
+    let videoConstraint = constraints[resolution];
+    if (!videoConstraint) {
+      videoConstraint = true;
+    }
+
+    navigator.mediaDevices
+      .getUserMedia({ video: videoConstraint, audio: false })
+      .then(function (stream) {
+        video.srcObject = stream;
+        video.play();
+        self.video = video;
+        self.stream = stream;
+        self.onCameraStartedCallback = callback;
+        video.addEventListener("canplay", onVideoCanPlay, false);
+      })
+      .catch(function (err) {
+        self.printError("Camera Error: " + err.name + " " + err.message);
+      });
+  };
+
+  this.stopCamera = function () {
+    if (this.video) {
+      this.video.pause();
+      this.video.srcObject = null;
+      this.video.removeEventListener("canplay", onVideoCanPlay);
+    }
+    if (this.stream) {
+      this.stream.getVideoTracks()[0].stop();
+    }
+  };
+
+  this.captureImage = function (canvasId) {
+    let canvas = document.getElementById(canvasId);
+    let dataUrl = canvas.toDataURL("image/jpeg");
+    return dataUrl;
+  };
+
+  this.stringFunction = function (dynamicString) {
+    console.log("Dynamic string:", dynamicString);
+
+    document.getElementById("status-text").innerText = dynamicString;
+  };
+
+  this.captureAndSend = function () {
+    let video = document.getElementById("cam_input");
+    let canvas = document.getElementById("canvas_output");
+
+    // Hide the video and show the canvas after capturing the photo
+    video.style.display = "none";
+    canvas.style.display = "block";
+    isCanvasVisible = true;
+
+    // Create a canvas element to temporarily hold the image data
+    let tempCanvas = document.createElement("canvas");
+    tempCanvas.width = video.videoWidth;
+    tempCanvas.height = video.videoHeight;
+    let ctx = tempCanvas.getContext("2d");
+    ctx.drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
+
+    // Draw the oval shape on the temporary canvas
+    ctx.save();
+    ctx.beginPath();
+    ctx.moveTo(tempCanvas.width / 2, 0);
+    ctx.bezierCurveTo(
+      tempCanvas.width,
+      0,
+      tempCanvas.width,
+      tempCanvas.height,
+      tempCanvas.width / 2,
+      tempCanvas.height
+    );
+    ctx.bezierCurveTo(0, tempCanvas.height, 0, 0, tempCanvas.width / 2, 0);
+    ctx.clip();
+    ctx.drawImage(tempCanvas, 0, 0);
+    ctx.restore();
+
+    let imageDataUrl = tempCanvas.toDataURL("image/jpeg");
+    
+//     // Check if imageDataUrl is valid
+//     if (!imageDataUrl) {
+//       console.error("Invalid imageDataUrl");
+//       return;
+//     }
+
+//     // Send the captured image to the API
+//     fetch("https://accurascan.com/v2/api/liveness", {
+//       method: "POST",
+//       headers: {
+//         "Api-Key": self.apiKey,
+//         "Content-Type": "application/json",
+//       },
+//       body: JSON.stringify({
+//         liveness_image: imageDataUrl,
+//       }),
+//     })
+//       .then((response) => {
+//         // Check if the response is successful (status code 2xx)
+//         if (!response.ok) {
+//           throw new Error(
+//             `Network response was not ok, status: ${response.status}`
+//           );
+//         }
+//         return response.json(); // Parse response body as JSON
+//       })
+//       .then(function (data) {
+//         console.log("API response:", data);
+
+//         // Check the "status" property in the data object and display appropriate messages
+//         if (data.status === true) {
+//           self.stringFunction(
+//             "Face detected! Quality: " +
+//               data.data.quality +
+//               ", Score: " +
+//               data.data.score
+//           );
+//           //When face is detected
+//         } else {
+//           self.stringFunction("No face detected or other status");
+//           // When no face is detected or handle other status scenarios if needed
+//         }
+//       })
+//       .catch((error) => {
+//         console.error("Error sending image to API:", error);
+//         self.stringFunction("Error sending image to API");
+//       });
+  };
+}

package/build/accuramain.js

@@ -0,0 +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)}}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "accurafaceplugin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./src/accura.js",
+  "scripts": {
+    "build": "terser ./src/accura.js -o build/accuramain.js --compress --mangle reserved=['video','canvas','context'] --source-map"
+  },
+  "files": [
+    "build/accuramain.js",
+    "accuraface1.js",
+    "accuraface2.js",
+    "accura.xml"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "babel-loader": "^9.2.1",
+    "file-loader": "^6.2.0",
+    "raw-loader": "^4.0.2",
+    "terser": "^5.34.1",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+   
+  }
+}