smartcomply-web-sdk 1.0.80 → 1.0.82

package/dist/smartcomply.browser.js

@@ -4665,7 +4665,7 @@ var SmartComplySDK = (() => {
         faceDetected,
         blinkDetected: this.blinkDetected,
         motionDetected: this.motionDetected,
-        livenessConfirmed: this.blinkDetected || this.motionDetected
+        livenessConfirmed: this.blinkDetected && this.motionDetected
       };
     }
     getHeadYaw(matrix) {
@@ -5780,7 +5780,7 @@ var SmartComplySDK = (() => {
    * CDN tag they installed with (e.g. @1, which floats to the latest
    * matching release) actually resolved to the version they expect.
    */
-  _SmartComply.VERSION = "1.0.80";
+  _SmartComply.VERSION = "1.0.82";
   var SmartComply = _SmartComply;
 
   // src/flow/theme.ts
@@ -6040,6 +6040,67 @@ var SmartComplySDK = (() => {
       quality: metrics
     };
   }
+  function assessFraming(imageData, guideBoxPct) {
+    const { width: W2, height: H2, data } = imageData;
+    const gray = new Uint8Array(W2 * H2);
+    for (let i2 = 0; i2 < W2 * H2; i2++) {
+      const idx = i2 * 4;
+      gray[i2] = Math.round(0.299 * data[idx] + 0.587 * data[idx + 1] + 0.114 * data[idx + 2]);
+    }
+    const gx0 = Math.round(guideBoxPct.x * W2);
+    const gy0 = Math.round(guideBoxPct.y * H2);
+    const gx1 = Math.round((guideBoxPct.x + guideBoxPct.width) * W2);
+    const gy1 = Math.round((guideBoxPct.y + guideBoxPct.height) * H2);
+    const edgeAt = (x2, y2) => {
+      if (x2 < 1 || y2 < 1 || x2 >= W2 - 1 || y2 >= H2 - 1) return 0;
+      const gxVal = gray[y2 * W2 + x2 + 1] - gray[y2 * W2 + x2 - 1];
+      const gyVal = gray[(y2 + 1) * W2 + x2] - gray[(y2 - 1) * W2 + x2];
+      return Math.sqrt(gxVal * gxVal + gyVal * gyVal);
+    };
+    const EDGE_THRESHOLD = 40;
+    const BORDER_BAND = Math.max(4, Math.round(Math.min(W2, H2) * 0.015));
+    let borderPoints = 0;
+    let borderHits = 0;
+    const SAMPLES_PER_SIDE = 24;
+    const sampleBand = (fixed, isX, start, end) => {
+      for (let s2 = 0; s2 < SAMPLES_PER_SIDE; s2++) {
+        const t2 = start + (end - start) * s2 / (SAMPLES_PER_SIDE - 1);
+        let bestEdge = 0;
+        for (let b2 = -BORDER_BAND; b2 <= BORDER_BAND; b2++) {
+          const x2 = isX ? fixed + b2 : Math.round(t2);
+          const y2 = isX ? Math.round(t2) : fixed + b2;
+          bestEdge = Math.max(bestEdge, edgeAt(x2, y2));
+        }
+        borderPoints++;
+        if (bestEdge >= EDGE_THRESHOLD) borderHits++;
+      }
+    };
+    sampleBand(gy0, false, gx0, gx1);
+    sampleBand(gy1, false, gx0, gx1);
+    sampleBand(gx0, true, gy0, gy1);
+    sampleBand(gx1, true, gy0, gy1);
+    const borderEdgeCoverage = borderPoints > 0 ? borderHits / borderPoints : 0;
+    let sum = 0, sumSq = 0, n2 = 0;
+    const GRID = 12;
+    const insetX = Math.round((gx1 - gx0) * 0.1);
+    const insetY = Math.round((gy1 - gy0) * 0.1);
+    for (let iy = 0; iy < GRID; iy++) {
+      for (let ix = 0; ix < GRID; ix++) {
+        const x2 = gx0 + insetX + Math.round((gx1 - gx0 - 2 * insetX) * ix / (GRID - 1));
+        const y2 = gy0 + insetY + Math.round((gy1 - gy0 - 2 * insetY) * iy / (GRID - 1));
+        if (x2 < 0 || y2 < 0 || x2 >= W2 || y2 >= H2) continue;
+        const v2 = gray[y2 * W2 + x2];
+        sum += v2;
+        sumSq += v2 * v2;
+        n2++;
+      }
+    }
+    const mean = n2 > 0 ? sum / n2 : 0;
+    const variance = n2 > 0 ? sumSq / n2 - mean * mean : 0;
+    const interiorVariance = Math.min(1, Math.sqrt(Math.max(0, variance)) / 35);
+    const isFramed = borderEdgeCoverage >= 0.55 && interiorVariance >= 0.25;
+    return { isFramed, borderEdgeCoverage, interiorVariance };
+  }
 
   // src/flow/icons.ts
   var PATHS = {
@@ -6130,6 +6191,9 @@ var SmartComplySDK = (() => {
       this.backBlob = null;
       this.currentSide = "front";
       this.requiresBackOverride = void 0;
+      this.framingTimer = null;
+      this.framingStableCount = 0;
+      this.framingAutoTriggered = false;
     }
     /**
      * Mount the document capture UI and return a promise that resolves
@@ -6414,6 +6478,13 @@ var SmartComplySDK = (() => {
       padding:14px 16px 32px;text-align:center;
     `;
       header.innerHTML = `<div style="color:#fff;font-size:${TYPE.sm}px;font-weight:600;">Align your ${this.getDocumentLabel(documentType)} within the frame</div>`;
+      const framingStatus = document.createElement("div");
+      framingStatus.style.cssText = `
+      margin-top:6px;font-size:${TYPE.xs}px;font-weight:600;
+      color:rgba(255,255,255,0.7);transition:color 0.2s ease;
+    `;
+      framingStatus.textContent = "Fit the document inside the frame";
+      header.appendChild(framingStatus);
       wrapper.appendChild(header);
       const footer = document.createElement("div");
       footer.style.cssText = `
@@ -6446,10 +6517,19 @@ var SmartComplySDK = (() => {
         inner.style.transform = "translate(-50%,-50%) scale(1)";
       });
       captureBtn.addEventListener("click", () => {
+        this.framingAutoTriggered = true;
         this.captureFrame(container, theme, documentType);
       });
       container.appendChild(captureBtn);
-      this.openCamera();
+      this.openCamera().then(() => {
+        if (this.videoEl) {
+          this.videoEl.addEventListener(
+            "loadedmetadata",
+            () => this._startFramingLoop(container, theme, documentType, framingStatus),
+            { once: true }
+          );
+        }
+      });
     }
     /**
      * Matches the video box's aspect-ratio CSS to the stream's actual
@@ -6484,6 +6564,90 @@ var SmartComplySDK = (() => {
         this.orientationHandler = null;
       }
     }
+    /**
+     * Auto-capture-on-stability — the same pattern the liveness module already
+     * uses for face-lock (see liveness.ts's checkFace), applied to documents:
+     * poll the raw video frame on an interval, score it against the guide box
+     * with assessFraming() (see utils/ImageQuality.ts), and fire the shutter
+     * automatically once several consecutive samples score as "framed". This
+     * is industry-standard for document capture (Persona/Onfido/Jumio-style
+     * SDKs all auto-capture rather than trust a manual tap against a static
+     * guide overlay) — the guide box alone never blocked a badly cropped tap.
+     *
+     * The manual capture button still works throughout and always wins
+     * (framingAutoTriggered guards against a race between the two).
+     */
+    _startFramingLoop(container, theme, documentType, statusEl) {
+      if (!this.videoEl) return;
+      this.framingStableCount = 0;
+      this.framingAutoTriggered = false;
+      const STABLE_REQUIRED = 3;
+      const SAMPLE_INTERVAL_MS = 350;
+      const MAX_WAIT_MS = 12e3;
+      const startTime = performance.now();
+      const boxWidthPct = 0.84;
+      const boxAspect = 16 / 10;
+      const tick = () => {
+        if (!this.videoEl || this.framingAutoTriggered) return;
+        if (performance.now() - startTime >= MAX_WAIT_MS) {
+          statusEl.textContent = "Fit the document inside the frame";
+          return;
+        }
+        const w2 = this.videoEl.videoWidth;
+        const h2 = this.videoEl.videoHeight;
+        if (!w2 || !h2 || this.videoEl.readyState < 2) {
+          this.framingTimer = setTimeout(tick, SAMPLE_INTERVAL_MS);
+          return;
+        }
+        try {
+          const boxWidthPx = w2 * boxWidthPct;
+          const boxHeightPx = boxWidthPx / boxAspect;
+          const boxXPct = (1 - boxWidthPct) / 2;
+          const boxHeightPct = boxHeightPx / h2;
+          const boxYPct = (1 - boxHeightPct) / 2;
+          const canvas = document.createElement("canvas");
+          const scale = Math.min(1, 480 / w2);
+          canvas.width = Math.round(w2 * scale);
+          canvas.height = Math.round(h2 * scale);
+          const ctx = canvas.getContext("2d", { willReadFrequently: true });
+          if (!ctx) {
+            this.framingTimer = setTimeout(tick, SAMPLE_INTERVAL_MS);
+            return;
+          }
+          ctx.drawImage(this.videoEl, 0, 0, canvas.width, canvas.height);
+          const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const result = assessFraming(pixels, {
+            x: boxXPct,
+            y: boxYPct,
+            width: boxWidthPct,
+            height: boxHeightPct
+          });
+          if (result.isFramed) {
+            this.framingStableCount++;
+            statusEl.style.color = theme.primary;
+            statusEl.textContent = this.framingStableCount >= STABLE_REQUIRED ? "Capturing…" : "Hold steady…";
+          } else {
+            this.framingStableCount = 0;
+            statusEl.style.color = "rgba(255,255,255,0.7)";
+            statusEl.textContent = result.interiorVariance < 0.25 ? "Move closer — fill the frame with your document" : "Align all 4 corners within the guide";
+          }
+          if (this.framingStableCount >= STABLE_REQUIRED) {
+            this.framingAutoTriggered = true;
+            this.captureFrame(container, theme, documentType);
+            return;
+          }
+        } catch {
+        }
+        this.framingTimer = setTimeout(tick, SAMPLE_INTERVAL_MS);
+      };
+      this.framingTimer = setTimeout(tick, SAMPLE_INTERVAL_MS);
+    }
+    _stopFramingLoop() {
+      if (this.framingTimer !== null) {
+        clearTimeout(this.framingTimer);
+        this.framingTimer = null;
+      }
+    }
     async openCamera() {
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
         this.rejectCapture?.(new Error("Camera access is not supported in this browser. Please use a modern browser like Chrome, Firefox, or Safari."));
@@ -6614,7 +6778,7 @@ var SmartComplySDK = (() => {
           URL.revokeObjectURL(currentUrl);
           currentUrl = URL.createObjectURL(rotated);
           img.src = currentUrl;
-          this._checkPhotoQuality(currentBlob, qualityNotice, theme);
+          this._checkPhotoQuality(currentBlob, qualityNotice, theme, useBtn);
         } catch {
         } finally {
           isRotating = false;
@@ -6640,7 +6804,6 @@ var SmartComplySDK = (() => {
     `;
       qualityNotice.setAttribute("role", "status");
       this.root.appendChild(qualityNotice);
-      this._checkPhotoQuality(currentBlob, qualityNotice, theme);
       const btnRow = document.createElement("div");
       btnRow.style.cssText = "display:flex;gap:12px;width:100%;";
       const retakeBtn = this.createButton("Retake", theme, false);
@@ -6662,20 +6825,58 @@ var SmartComplySDK = (() => {
       btnRow.appendChild(retakeBtn);
       btnRow.appendChild(useBtn);
       this.root.appendChild(btnRow);
+      this._checkPhotoQuality(currentBlob, qualityNotice, theme, useBtn);
     }
     /**
-     * Runs the shared client-side quality heuristic (blur/glare/contrast/
-     * brightness — see utils/ImageQuality.ts) against the just-captured photo
-     * and, if it scores poorly, shows a plain-language nudge on the preview
-     * screen. Fails silently on decode error — this is an advisory extra, not
-     * a required step, so a browser that can't run it must not block capture.
+     * Runs the shared client-side quality heuristics — blur/glare/contrast/
+     * brightness (assessQuality) and document framing/completeness
+     * (assessFraming) — against the just-captured or just-uploaded photo, and
+     * shows a plain-language nudge on the preview screen if either scores
+     * poorly. This is the one chokepoint both the camera and manual-upload
+     * paths funnel through (see showPreview), so it's the only place that
+     * reliably catches a badly cropped document regardless of how the photo
+     * arrived — the camera's own auto-capture framing loop only guards live
+     * capture, and does nothing for an uploaded file or a manual shutter tap
+     * fired before the loop ever samples.
+     *
+     * Framing here checks the WHOLE image (guideBoxPct = full frame), not a
+     * guide-box region — there's no guide overlay for an arbitrary uploaded
+     * photo, so "does the document fill most of the frame" is the correct
+     * question, matching the same border-edge + interior-variance heuristic
+     * the camera loop already uses.
+     *
+     * A framing failure disables useBtn — unlike the blur/glare nudge, this
+     * one blocks: a cropped ID reads as a confident, wrong identity downstream
+     * (partial OCR fields, a registry check against a truncated ID number)
+     * with no further chance to catch it, so the user must retake/re-upload
+     * rather than being trusted to notice an advisory nudge and act on it
+     * voluntarily. Fails open on decode error — this heuristic not running at
+     * all must not lock the user out of a photo it never actually scored.
      */
-    async _checkPhotoQuality(imageData, noticeEl, theme) {
+    async _checkPhotoQuality(imageData, noticeEl, theme, useBtn) {
       try {
         const canvas = await this._blobToCanvas(imageData, 640);
         const ctx = canvas.getContext("2d");
         if (!ctx) return;
         const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const framing = assessFraming(pixels, { x: 0, y: 0, width: 1, height: 1 });
+        if (!framing.isFramed) {
+          if (noticeEl.isConnected) {
+            noticeEl.style.display = "block";
+            noticeEl.textContent = framing.interiorVariance < 0.25 ? "We couldn't detect a document in this photo — make sure the ID is clearly visible and try again." : "Part of the document looks cut off — make sure all four corners are visible and try again.";
+          }
+          if (useBtn.isConnected) {
+            useBtn.disabled = true;
+            useBtn.style.opacity = "0.5";
+            useBtn.style.cursor = "not-allowed";
+          }
+          return;
+        }
+        if (useBtn.isConnected) {
+          useBtn.disabled = false;
+          useBtn.style.opacity = "1";
+          useBtn.style.cursor = "pointer";
+        }
         const result = assessQuality(pixels);
         if (noticeEl.isConnected && !result.isValid) {
           noticeEl.style.display = "block";
@@ -6818,6 +7019,7 @@ var SmartComplySDK = (() => {
       if (input) input.click();
     }
     stopCamera() {
+      this._stopFramingLoop();
       this._unwatchOrientation();
       this.cameraManager.stop();
       if (this.videoEl) {
@@ -8403,6 +8605,11 @@ var SmartComplySDK = (() => {
             this._renderOcrQualityFail(container, result.ocr_rejection_reason);
             return;
           }
+          if (result.status === "failed") {
+            container.innerHTML = "";
+            this._renderDocumentVerificationFailed(container, result.failure_reason);
+            return;
+          }
           const ocrDone = result.ocr_status === "done" || result.ocr_status === "ocr_complete" || result.ocr_name || result.ocr_document_number || result.ocr_expiry_date;
           if (ocrDone) {
             this._ocrName = result.ocr_name || "";
@@ -8495,6 +8702,44 @@ var SmartComplySDK = (() => {
       });
       container.appendChild(retryBtn);
     }
+    /**
+     * The document passed OCR's own quality gate (it was readable) but failed
+     * the government-registry re-check — the ID number either doesn't exist
+     * in the registry, or belongs to a different person than the name on the
+     * document. Distinct from _renderOcrQualityFail: the photo itself may be
+     * perfectly clear, so "retake photo" framing would be misleading — the
+     * fix is a correct, uncropped photo of the actual document, not just a
+     * clearer one.
+     */
+    _renderDocumentVerificationFailed(container, failureReason) {
+      container.style.cssText += "display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px 0;";
+      const icon2 = document.createElement("div");
+      icon2.style.cssText = `width:72px;height:72px;border-radius:50%;background:${this.theme.errorBg};border:3px solid ${this.theme.error};display:flex;align-items:center;justify-content:center;font-size:28px;`;
+      icon2.textContent = "⚠️";
+      container.appendChild(icon2);
+      const t2 = document.createElement("h2");
+      t2.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
+      t2.textContent = "We Couldn't Confirm Your Details";
+      container.appendChild(t2);
+      const d2 = document.createElement("p");
+      d2.style.cssText = `color:${this.theme.textSecondary};font-size:13px;margin:0;max-width:280px;line-height:1.6;`;
+      d2.textContent = failureReason || "We couldn't confirm your details. Please re-upload a clear photo of your ID and make sure your details are correct before submitting.";
+      container.appendChild(d2);
+      const retryBtn = this.createPrimaryButton("Re-upload ID");
+      retryBtn.addEventListener("click", () => {
+        this.livenessEntryId = null;
+        this.documentBlob = null;
+        this.documentBackBlob = null;
+        this.showStep("document_capture");
+      });
+      container.appendChild(retryBtn);
+      const endBtn = this.createSecondaryButton("End session");
+      endBtn.addEventListener("click", () => {
+        this.options.onError?.(new Error("Document verification failed"));
+        this.close();
+      });
+      container.appendChild(endBtn);
+    }
     /**
      * OCR ran to completion but never produced a single usable field within
      * the poll window — do not let the flow reach liveness with no verified