scandoc-ai-components 0.1.16 → 0.1.17

package/dist/index.js

@@ -11174,14 +11174,16 @@ class ExtractorVideo {
   static VALIDATION_BATCH_SIZE = 1;
   static VALIDATION_IMG_WIDTH = 384;
   static VALIDATION_IMG_HEIGHT = 384;
-  static VIDEO_SETTINGS = Object.freeze({
-    width: {
-      ideal: 1920
-    },
-    height: {
-      ideal: 1080
-    }
-  });
+  static VIDEO_CANDIDATE_SETTINGS = Object.freeze([{
+    width: 1920,
+    height: 1080
+  }, {
+    width: 1280,
+    height: 960
+  }, {
+    width: 1280,
+    height: 720
+  }]);
   constructor(onExtractedResults) {
     this.candidateImages = [];
     this.extractionImages = {};
@@ -11195,8 +11197,6 @@ class ExtractorVideo {
     this.waitingForSecondSide = false;
     this.hasShownTurnMessage = false;
     this.turnMessageTimer = null;
-
-    // initialize through setter so we see the first set too:
     this.onExtractedResults = onExtractedResults;
   }
   reset() {
@@ -11294,13 +11294,11 @@ class ExtractorVideo {
           this.hasShownTurnMessage = true;
           this.scanStartTime = Date.now();
           this.showMessage("Turn to the other side", true);
-
-          // Clear lock after 3 seconds
           clearTimeout(this.turnMessageTimer);
           this.turnMessageTimer = setTimeout(() => {
             this.hasShownTurnMessage = false;
             this.waitingForSecondSide = false;
-            this.lastMessage = null; // allow same message again later
+            this.lastMessage = null;
           }, 3000);
         } else if (Object.keys(this.extractionImages).length === 2) {
           this.waitingForSecondSide = false;
@@ -11367,7 +11365,7 @@ class ExtractorVideo {
     this.turnMessageTimer = null;
     this.stopVideo();
     if (isExtractionOk) {
-      this.showMessage("Success - data extracted", true);
+      this.showMessage("Success - data extracted", "success");
       const shouldStop = this.onExtractedResults({
         success: true,
         code: "001",
@@ -11375,7 +11373,7 @@ class ExtractorVideo {
         data: extractionData
       });
       if (shouldStop === true) {
-        setTimeout(() => this.startVideo(), ExtractorVideo.FREQUENCY_MS);
+        setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
       }
     } else {
       this.onExtractedResults({
@@ -11383,8 +11381,378 @@ class ExtractorVideo {
         code: "005",
         info: "Document validation passed but extraction failed."
       });
-      setTimeout(() => this.startVideo(), ExtractorVideo.FREQUENCY_MS);
+      setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
+    }
+  }
+  getSupportedConstraintsSafe() {
+    if (!navigator.mediaDevices?.getSupportedConstraints) return {};
+    try {
+      return navigator.mediaDevices.getSupportedConstraints();
+    } catch (_) {
+      return {};
+    }
+  }
+  getAspectRatio(settings) {
+    if (typeof settings?.aspectRatio === "number" && settings.aspectRatio > 0) {
+      return settings.aspectRatio;
+    }
+    if (settings?.width && settings?.height) {
+      return settings.width / settings.height;
+    }
+    return null;
+  }
+  isLandscape(settings) {
+    return (settings?.width || 0) > (settings?.height || 0);
+  }
+  isFrontLabel(label) {
+    const l = (label || "").toLowerCase();
+    return l.includes("front") || l.includes("selfie") || l.includes("user facing") || l.includes("facing front");
+  }
+  isRearLikeLabel(label) {
+    const l = (label || "").toLowerCase();
+    return l.includes("rear") || l.includes("back") || l.includes("environment") || l.includes("facing back") || l.includes("facing rear");
+  }
+  scoreTrack({
+    settings,
+    label
+  }) {
+    const width = settings?.width || 0;
+    const height = settings?.height || 0;
+    const pixels = width * height;
+    const aspectRatio = this.getAspectRatio(settings) || 0;
+    let score = pixels;
+    if (width > height) score += 1_000_000_000;
+    if (aspectRatio >= 1.3) score += 100_000_000;
+    if (this.isRearLikeLabel(label)) score += 10_000_000;
+    if (this.isFrontLabel(label)) score -= 10_000_000_000;
+    return score;
+  }
+  buildVideoConstraints({
+    width,
+    height,
+    mode,
+    deviceId
+  }) {
+    const supported = this.getSupportedConstraintsSafe();
+    const video = {};
+    if (deviceId) {
+      video.deviceId = {
+        exact: deviceId
+      };
+    } else if (supported.facingMode) {
+      if (typeof mode === "string") {
+        video.facingMode = {
+          ideal: mode
+        };
+      } else if (mode && typeof mode === "object") {
+        video.facingMode = mode;
+      } else {
+        video.facingMode = {
+          ideal: "environment"
+        };
+      }
+    }
+    if (supported.width) {
+      video.width = {
+        ideal: width
+      };
+    }
+    if (supported.height) {
+      video.height = {
+        ideal: height
+      };
+    }
+    if (supported.aspectRatio) {
+      video.aspectRatio = {
+        ideal: width / height
+      };
+    }
+    return {
+      video,
+      audio: false
+    };
+  }
+  async pauseBetweenCameraOps(ms = 180) {
+    await new Promise(resolve => setTimeout(resolve, ms));
+  }
+  async stopMediaStream(stream) {
+    if (!stream) return;
+    try {
+      stream.getTracks().forEach(t => t.stop());
+    } catch (_) {}
+    await this.pauseBetweenCameraOps();
+  }
+  async tryEnableDocumentFocus(stream) {
+    const track = stream?.getVideoTracks?.()[0];
+    if (!track) {
+      return {
+        ok: false,
+        reason: "No video track found"
+      };
+    }
+    if (!track.getCapabilities || !track.applyConstraints) {
+      return {
+        ok: false,
+        reason: "Focus APIs unavailable on this browser/device",
+        settingsBefore: track.getSettings ? track.getSettings() : null
+      };
+    }
+    const caps = track.getCapabilities();
+    const result = {
+      ok: true,
+      capabilities: caps,
+      attempts: [],
+      settingsBefore: track.getSettings ? track.getSettings() : null
+    };
+    try {
+      let applied = false;
+      if (Array.isArray(caps.focusMode) && caps.focusMode.includes("continuous")) {
+        await track.applyConstraints({
+          advanced: [{
+            focusMode: "continuous"
+          }]
+        });
+        result.attempts.push("Applied focusMode=continuous");
+        applied = true;
+      }
+      if (caps.focusDistance) {
+        const min = caps.focusDistance.min;
+        const max = caps.focusDistance.max;
+        const docDistance = min + (max - min) * 0.30;
+        const advanced = [];
+        if (Array.isArray(caps.focusMode) && caps.focusMode.includes("manual")) {
+          advanced.push({
+            focusMode: "manual"
+          });
+        }
+        advanced.push({
+          focusDistance: docDistance
+        });
+        await track.applyConstraints({
+          advanced
+        });
+        result.attempts.push(`Applied focusDistance=${docDistance}`);
+        applied = true;
+      }
+      if (!applied) {
+        result.ok = false;
+        result.reason = "No supported focus controls were exposed";
+      }
+      result.settingsAfter = track.getSettings ? track.getSettings() : null;
+      return result;
+    } catch (err) {
+      result.ok = false;
+      result.error = err.message || String(err);
+      result.settingsAfter = track.getSettings ? track.getSettings() : null;
+      return result;
+    }
+  }
+  async openCandidateStream({
+    mode,
+    deviceId,
+    width,
+    height
+  }) {
+    return navigator.mediaDevices.getUserMedia(this.buildVideoConstraints({
+      width,
+      height,
+      mode,
+      deviceId
+    }));
+  }
+  async testDeviceAtPreferredResolutions(device, mode) {
+    const attempts = [];
+    for (const size of ExtractorVideo.VIDEO_CANDIDATE_SETTINGS) {
+      let stream = null;
+      try {
+        stream = await this.openCandidateStream({
+          mode,
+          deviceId: device?.deviceId,
+          width: size.width,
+          height: size.height
+        });
+        const track = stream.getVideoTracks()[0];
+        const settings = track.getSettings();
+        const label = track.label || device?.label || "";
+        const aspectRatio = this.getAspectRatio(settings);
+        const result = {
+          stream,
+          label,
+          settings,
+          aspectRatio,
+          landscape: this.isLandscape(settings),
+          score: this.scoreTrack({
+            settings,
+            label
+          }),
+          requested: size
+        };
+        attempts.push({
+          ok: true,
+          requested: size,
+          returnedWidth: settings.width,
+          returnedHeight: settings.height,
+          aspectRatio,
+          label
+        });
+        return {
+          result,
+          attempts
+        };
+      } catch (err) {
+        attempts.push({
+          ok: false,
+          requested: size,
+          error: err.message || String(err)
+        });
+        await this.stopMediaStream(stream);
+      }
+    }
+    return {
+      result: null,
+      attempts
+    };
+  }
+  async pickBestPhoneCamera(mode = "environment") {
+    const debug = {
+      mode,
+      tested: []
+    };
+
+    // First try a warmup stream to unlock labels
+    let warmupStream = null;
+    let warmupResult = null;
+    try {
+      const warmupSize = ExtractorVideo.VIDEO_CANDIDATE_SETTINGS[2]; // 1280x720
+      warmupStream = await this.openCandidateStream({
+        mode,
+        width: warmupSize.width,
+        height: warmupSize.height
+      });
+      const track = warmupStream.getVideoTracks()[0];
+      const settings = track.getSettings();
+      const label = track.label || "";
+      warmupResult = {
+        stream: warmupStream,
+        label,
+        settings,
+        aspectRatio: this.getAspectRatio(settings),
+        landscape: this.isLandscape(settings),
+        score: this.scoreTrack({
+          settings,
+          label
+        }),
+        requested: warmupSize
+      };
+    } catch (_) {
+      warmupStream = null;
+    }
+    let devices = [];
+    try {
+      devices = await navigator.mediaDevices.enumerateDevices();
+    } catch (_) {
+      devices = [];
+    }
+    const videoInputs = devices.filter(d => d.kind === "videoinput");
+    const candidateDevices = mode === "environment" ? videoInputs.filter(d => !this.isFrontLabel(d.label)) : videoInputs;
+    if (warmupStream) {
+      await this.stopMediaStream(warmupStream);
+      warmupStream = null;
+    }
+    const usableResults = [];
+    for (let i = 0; i < candidateDevices.length; i += 1) {
+      const device = candidateDevices[i];
+      const {
+        result,
+        attempts
+      } = await this.testDeviceAtPreferredResolutions(device, mode);
+      debug.tested.push({
+        deviceId: device.deviceId,
+        label: device.label,
+        attempts,
+        final: result ? {
+          label: result.label,
+          settings: result.settings,
+          aspectRatio: result.aspectRatio,
+          landscape: result.landscape,
+          score: result.score,
+          requested: result.requested
+        } : null
+      });
+      if (result) {
+        const frontRejected = mode === "environment" && this.isFrontLabel(result.label);
+        const geometryOk = result.landscape;
+        if (!frontRejected && geometryOk) {
+          usableResults.push(result);
+        } else {
+          await this.stopMediaStream(result.stream);
+        }
+      }
+    }
+    if (usableResults.length > 0) {
+      usableResults.sort((a, b) => b.score - a.score);
+      const chosen = usableResults[0];
+      for (const candidate of usableResults) {
+        if (candidate !== chosen) {
+          await this.stopMediaStream(candidate.stream);
+        }
+      }
+      debug.chosen = {
+        label: chosen.label,
+        settings: chosen.settings,
+        aspectRatio: chosen.aspectRatio,
+        requested: chosen.requested,
+        source: "device-test"
+      };
+      return {
+        chosen,
+        debug
+      };
     }
+
+    // Final fallback: simple facingMode-based opens in descending priority
+    for (const size of ExtractorVideo.VIDEO_CANDIDATE_SETTINGS) {
+      try {
+        const stream = await this.openCandidateStream({
+          mode,
+          width: size.width,
+          height: size.height
+        });
+        const track = stream.getVideoTracks()[0];
+        const settings = track.getSettings();
+        const label = track.label || "";
+        const aspectRatio = this.getAspectRatio(settings);
+        const landscape = this.isLandscape(settings);
+        if (mode === "environment" && !landscape) {
+          await this.stopMediaStream(stream);
+          continue;
+        }
+        const chosen = {
+          stream,
+          label,
+          settings,
+          aspectRatio,
+          landscape,
+          score: this.scoreTrack({
+            settings,
+            label
+          }),
+          requested: size
+        };
+        debug.chosen = {
+          label,
+          settings,
+          aspectRatio,
+          requested: size,
+          source: "fallback-facingMode"
+        };
+        return {
+          chosen,
+          debug
+        };
+      } catch (_) {}
+    }
+    throw new Error("Could not start a suitable camera.");
   }
   async startVideo() {
     try {
@@ -11399,40 +11767,20 @@ class ExtractorVideo {
       this.scanStartTime = Date.now();
       const cfgValues = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfigValues)();
       const mode = cfgValues.VIDEO_FACING_MODE ?? "environment";
-      let stream;
-      try {
-        stream = await navigator.mediaDevices.getUserMedia(buildDocumentScanConstraints(mode));
-      } catch (e) {
-        console.warn("Preferred camera constraints failed, falling back:", e);
-        stream = await navigator.mediaDevices.getUserMedia({
-          video: true,
-          audio: false
-        });
-      }
-      this.video.srcObject = stream;
-      try {
-        await this.video.play();
-      } catch (e) {
+      const {
+        chosen,
+        debug
+      } = await this.pickBestPhoneCamera(mode);
+      this.video.srcObject = chosen.stream;
+      await this.video.play().catch(e => {
         console.warn(`Error on video play: ${e}`);
-      }
-
-      // Try to improve document focus after stream is active
-      try {
-        const focusResult = await tryEnableDocumentFocus(stream);
-        console.log("Focus result:", focusResult);
-      } catch (focusError) {
-        console.warn("Could not apply focus settings:", focusError);
-      }
-
-      // Avoid re-binding listeners every start
-      if (!this._boundLoadedDataHandler) {
-        this._boundLoadedDataHandler = () => this.adjustOverlayPosition();
-        this.video.addEventListener("loadeddata", this._boundLoadedDataHandler);
-      }
-      if (!this._boundResizeHandler) {
-        this._boundResizeHandler = () => this.adjustOverlayPosition();
-        window.addEventListener("resize", this._boundResizeHandler);
-      }
+      });
+      this.focusDebug = await this.tryEnableDocumentFocus(chosen.stream);
+      this.cameraDebug = debug;
+      this.video.addEventListener("loadeddata", () => {
+        this.adjustOverlayPosition();
+      });
+      window.addEventListener("resize", () => this.adjustOverlayPosition());
       setTimeout(() => this.adjustOverlayPosition(), 500);
       this.scanStartTime = Date.now();
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
@@ -11482,7 +11830,7 @@ class ExtractorVideo {
     const centerX = offsetX + scaleWidth / 2;
     const centerY = offsetY + scaleHeight / 2;
     dot.style.display = "block";
-    dot.style.left = `${centerX - 8}px`; // center minus half dot size
+    dot.style.left = `${centerX - 8}px`;
     dot.style.top = `${centerY - 8}px`;
   }
   getHTML() {
@@ -11491,7 +11839,6 @@ class ExtractorVideo {
     const messageColor = cfgValues.VIDEO_COLORS?.messageColor;
     const isMobile = window.innerWidth < 768 || window.innerHeight > window.innerWidth && window.innerWidth < 1024;
     if (isMobile) {
-      // Mobile version with overlay feedback
       return `
 				<div class="mobileVideoArea">
 					<video id="ScanDocAIVideoElement" class="mobileVideo" autoplay muted playsinline></video>
@@ -11603,7 +11950,7 @@ class ExtractorVideo {
 						z-index: 4;
 						animation: flicker 1s infinite;
 						pointer-events: none;
-						display: none; /* Hidden until video is ready */
+						display: none;
 					}
 
 					@keyframes flicker {
@@ -11657,8 +12004,6 @@ function getExtractionVideo(tokenOrCallback, maybeCallback) {
     EXTRACTION_VIDEO = new ExtractorVideo(cb);
     return EXTRACTION_VIDEO;
   }
-
-  // If called again, update callback too
   if (typeof cb === "function") {
     EXTRACTION_VIDEO.onExtractedResults = cb;
   } else if (cb !== undefined) {
@@ -11666,143 +12011,6 @@ function getExtractionVideo(tokenOrCallback, maybeCallback) {
   }
   return EXTRACTION_VIDEO;
 }
-function getSupportedConstraintsSafe() {
-  try {
-    return navigator.mediaDevices?.getSupportedConstraints?.() || {};
-  } catch (_) {
-    return {};
-  }
-}
-function buildDocumentScanConstraints(mode = "environment") {
-  const supported = getSupportedConstraintsSafe();
-  const video = {};
-  if (supported.facingMode) {
-    video.facingMode = typeof mode === "string" ? {
-      ideal: mode
-    } : mode || {
-      ideal: "environment"
-    };
-  }
-  if (supported.width) {
-    video.width = {
-      ideal: 1920
-    };
-  }
-  if (supported.height) {
-    video.height = {
-      ideal: 1080
-    };
-  }
-  if (supported.aspectRatio) {
-    video.aspectRatio = {
-      ideal: 16 / 9
-    };
-  }
-  return {
-    video,
-    audio: false
-  };
-}
-async function tryEnableDocumentFocus(stream) {
-  const track = stream?.getVideoTracks?.()[0];
-  if (!track) {
-    return {
-      ok: false,
-      reason: "No video track found"
-    };
-  }
-  if (!track.getCapabilities || !track.applyConstraints) {
-    return {
-      ok: false,
-      reason: "Focus APIs unavailable on this browser/device",
-      settingsBefore: track.getSettings ? track.getSettings() : null
-    };
-  }
-  const caps = track.getCapabilities();
-  const result = {
-    ok: true,
-    capabilities: caps,
-    attempts: [],
-    settingsBefore: track.getSettings ? track.getSettings() : null
-  };
-  try {
-    let applied = false;
-    if (Array.isArray(caps.focusMode) && caps.focusMode.includes("continuous")) {
-      await track.applyConstraints({
-        advanced: [{
-          focusMode: "continuous"
-        }]
-      });
-      result.attempts.push("Applied focusMode=continuous");
-      applied = true;
-    }
-    if (caps.focusDistance) {
-      const min = caps.focusDistance.min ?? 0;
-      const max = caps.focusDistance.max ?? 0;
-      const docDistance = min + (max - min) * 0.3;
-      const advanced = [];
-      if (Array.isArray(caps.focusMode) && caps.focusMode.includes("manual")) {
-        advanced.push({
-          focusMode: "manual"
-        });
-      }
-      advanced.push({
-        focusDistance: docDistance
-      });
-      await track.applyConstraints({
-        advanced
-      });
-      result.attempts.push(`Applied focusDistance=${docDistance}`);
-      applied = true;
-    }
-    if (!applied) {
-      result.ok = false;
-      result.reason = "No supported focus controls were exposed";
-    }
-    result.settingsAfter = track.getSettings ? track.getSettings() : null;
-    return result;
-  } catch (err) {
-    result.ok = false;
-    result.error = err.message || String(err);
-    result.settingsAfter = track.getSettings ? track.getSettings() : null;
-    return result;
-  }
-}
-async function checkAutofocusSupport(environmentCameras) {
-  try {
-    const camerasWithAutofocus = [];
-    for (const camera of environmentCameras) {
-      // console.log(camera.deviceId);
-      const constraints = {
-        video: {
-          deviceId: {
-            exact: camera.deviceId
-          }
-        }
-      };
-
-      // Try to access camera stream with autofocus enabled
-      const stream = await navigator.mediaDevices.getUserMedia(constraints);
-      const tracks = stream.getVideoTracks();
-      const track = tracks[0];
-      if (track) {
-        // Check if autofocus is supported
-        const capabilities = track.getCapabilities();
-        // console.log(capabilities);
-        if (capabilities.focusMode && capabilities.focusMode.includes("continuous")) {
-          camerasWithAutofocus.push(camera);
-        }
-      }
-
-      // Cleanup
-      stream.getTracks().forEach(track => track.stop());
-    }
-    return camerasWithAutofocus;
-  } catch (error) {
-    console.log("Error checking autofocus support:", error);
-    return [];
-  }
-}
 
 /***/ }),
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "scandoc-ai-components",
   "author": "ScanDoc-AI",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": false,
   "description": "Pure JavaScript package for integrating ScanDoc-AI services.",
   "keywords": [