scandoc-ai-components 0.1.17 → 0.1.18

package/dist/index.js

@@ -11170,6 +11170,7 @@ __webpack_require__.r(__webpack_exports__);
 
 const DOCUMENT_DETECTOR = new _ai_detect_document__WEBPACK_IMPORTED_MODULE_0__["default"]();
 class ExtractorVideo {
+  static DEBUG = true;
   static FREQUENCY_MS = 10;
   static VALIDATION_BATCH_SIZE = 1;
   static VALIDATION_IMG_WIDTH = 384;
@@ -11197,8 +11198,48 @@ class ExtractorVideo {
     this.waitingForSecondSide = false;
     this.hasShownTurnMessage = false;
     this.turnMessageTimer = null;
+    this.debugLog = [];
     this.onExtractedResults = onExtractedResults;
   }
+  logDebug(event, data = {}) {
+    if (!ExtractorVideo.DEBUG) return;
+    const entry = {
+      ts: new Date().toISOString(),
+      event,
+      data
+    };
+    this.debugLog.push(entry);
+    try {
+      console.log("[ScanDocAI]", event, data);
+    } catch (_) {}
+  }
+  getDebugDump() {
+    return {
+      userAgent: navigator.userAgent,
+      secureContext: window.isSecureContext,
+      location: window.location.href,
+      videoPresent: !!this.video,
+      videoReadyState: this.video?.readyState,
+      videoNetworkState: this.video?.networkState,
+      videoPaused: this.video?.paused,
+      videoMuted: this.video?.muted,
+      videoAutoplay: this.video?.autoplay,
+      videoPlaysInline: this.video?.playsInline,
+      videoDimensions: {
+        videoWidth: this.video?.videoWidth || 0,
+        videoHeight: this.video?.videoHeight || 0,
+        clientWidth: this.video?.clientWidth || 0,
+        clientHeight: this.video?.clientHeight || 0
+      },
+      streamTracks: this.video?.srcObject ? this.video.srcObject.getTracks().map(t => ({
+        kind: t.kind,
+        label: t.label,
+        readyState: t.readyState,
+        enabled: t.enabled
+      })) : [],
+      log: this.debugLog
+    };
+  }
   reset() {
     this.stopVideo();
     this.candidateImages = [];
@@ -11215,12 +11256,16 @@ class ExtractorVideo {
     this.hasShownTurnMessage = false;
     clearTimeout(this.turnMessageTimer);
     this.turnMessageTimer = null;
+    this.debugLog = [];
   }
   async analyzeVideoStream() {
     if (!this.isRunning) return;
     const now = Date.now();
     const cfgValues = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfigValues)();
     if (this.scanStartTime && now - this.scanStartTime > cfgValues.MAX_SCAN_DURATION_MS) {
+      this.logDebug("scan_timeout", {
+        elapsedMs: now - this.scanStartTime
+      });
       this.stopVideo();
       this.onExtractedResults({
         success: false,
@@ -11231,7 +11276,16 @@ class ExtractorVideo {
     }
     const canvas = document.createElement("canvas");
     const video = document.getElementById("ScanDocAIVideoElement");
-    if (video && video.videoWidth < video.videoHeight) {
+    if (!video) {
+      this.logDebug("analyze_no_video_element");
+      setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
+      return;
+    }
+    if (video.videoWidth < video.videoHeight) {
+      this.logDebug("portrait_video_detected", {
+        videoWidth: video.videoWidth,
+        videoHeight: video.videoHeight
+      });
       this.showMessage("Please rotate your device to landscape mode.");
       this.candidateImages = [];
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
@@ -11250,6 +11304,9 @@ class ExtractorVideo {
       const [isValidationOk, response] = await (0,_requests_validation__WEBPACK_IMPORTED_MODULE_3__["default"])(images.map(e => e.validationImg), this.pastBlurValues, {});
       if (!isValidationOk) {
         const msg = Array.isArray(response) ? response.join(", ") : String(response || "");
+        this.logDebug("validation_failed", {
+          response: msg
+        });
         if (msg.toLowerCase().includes("token expired/invalid")) {
           this.stopVideo();
           this.showMessage("Token expired/invalid. Please provide a new token.", true);
@@ -11264,6 +11321,7 @@ class ExtractorVideo {
         return;
       }
       if (response?.InfoCode === "1006" && response?.TransactionID) {
+        this.logDebug("unsupported_document", response);
         const frontImage = this.candidateImages[this.candidateImages.length - 1].fullImg;
         await (0,_requests_error_logging__WEBPACK_IMPORTED_MODULE_4__["default"])(frontImage, "", response.TransactionID, response.OS, response.Device, response.Browser);
         this.showMessage("Document not supported.", true);
@@ -11345,6 +11403,10 @@ class ExtractorVideo {
         return;
       }
       this.candidateImages = [];
+    }).catch(err => {
+      this.logDebug("document_detector_error", {
+        message: err?.message || String(err)
+      });
     }).finally(() => {
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
     });
@@ -11452,21 +11514,15 @@ class ExtractorVideo {
         };
       }
     }
-    if (supported.width) {
-      video.width = {
-        ideal: width
-      };
-    }
-    if (supported.height) {
-      video.height = {
-        ideal: height
-      };
-    }
-    if (supported.aspectRatio) {
-      video.aspectRatio = {
-        ideal: width / height
-      };
-    }
+    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
@@ -11485,12 +11541,14 @@ class ExtractorVideo {
   async tryEnableDocumentFocus(stream) {
     const track = stream?.getVideoTracks?.()[0];
     if (!track) {
+      this.logDebug("focus_no_track");
       return {
         ok: false,
         reason: "No video track found"
       };
     }
     if (!track.getCapabilities || !track.applyConstraints) {
+      this.logDebug("focus_api_unavailable");
       return {
         ok: false,
         reason: "Focus APIs unavailable on this browser/device",
@@ -11539,11 +11597,13 @@ class ExtractorVideo {
         result.reason = "No supported focus controls were exposed";
       }
       result.settingsAfter = track.getSettings ? track.getSettings() : null;
+      this.logDebug("focus_result", result);
       return result;
     } catch (err) {
       result.ok = false;
       result.error = err.message || String(err);
       result.settingsAfter = track.getSettings ? track.getSettings() : null;
+      this.logDebug("focus_error", result);
       return result;
     }
   }
@@ -11553,12 +11613,23 @@ class ExtractorVideo {
     width,
     height
   }) {
-    return navigator.mediaDevices.getUserMedia(this.buildVideoConstraints({
+    const constraints = this.buildVideoConstraints({
       width,
       height,
       mode,
       deviceId
-    }));
+    });
+    this.logDebug("getUserMedia_attempt", {
+      constraints
+    });
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    this.logDebug("getUserMedia_success", {
+      deviceId,
+      width,
+      height,
+      trackLabels: stream.getTracks().map(t => t.label)
+    });
+    return stream;
   }
   async testDeviceAtPreferredResolutions(device, mode) {
     const attempts = [];
@@ -11595,6 +11666,13 @@ class ExtractorVideo {
           aspectRatio,
           label
         });
+        this.logDebug("device_test_success", {
+          deviceLabel: device?.label,
+          deviceId: device?.deviceId,
+          requested: size,
+          settings,
+          label
+        });
         return {
           result,
           attempts
@@ -11605,6 +11683,13 @@ class ExtractorVideo {
           requested: size,
           error: err.message || String(err)
         });
+        this.logDebug("device_test_error", {
+          deviceLabel: device?.label,
+          deviceId: device?.deviceId,
+          requested: size,
+          error: err?.message || String(err),
+          name: err?.name
+        });
         await this.stopMediaStream(stream);
       }
     }
@@ -11618,12 +11703,10 @@ class ExtractorVideo {
       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
+      const warmupSize = ExtractorVideo.VIDEO_CANDIDATE_SETTINGS[2];
       warmupStream = await this.openCandidateStream({
         mode,
         width: warmupSize.width,
@@ -11644,13 +11727,32 @@ class ExtractorVideo {
         }),
         requested: warmupSize
       };
-    } catch (_) {
+      this.logDebug("warmup_success", {
+        label,
+        settings
+      });
+    } catch (err) {
+      this.logDebug("warmup_error", {
+        name: err?.name,
+        message: err?.message || String(err)
+      });
       warmupStream = null;
     }
     let devices = [];
     try {
       devices = await navigator.mediaDevices.enumerateDevices();
-    } catch (_) {
+      this.logDebug("enumerate_devices", {
+        devices: devices.map(d => ({
+          kind: d.kind,
+          label: d.label,
+          deviceId: d.deviceId
+        }))
+      });
+    } catch (err) {
+      this.logDebug("enumerate_devices_error", {
+        name: err?.name,
+        message: err?.message || String(err)
+      });
       devices = [];
     }
     const videoInputs = devices.filter(d => d.kind === "videoinput");
@@ -11704,13 +11806,12 @@ class ExtractorVideo {
         requested: chosen.requested,
         source: "device-test"
       };
+      this.logDebug("camera_chosen", debug.chosen);
       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({
@@ -11746,16 +11847,24 @@ class ExtractorVideo {
           requested: size,
           source: "fallback-facingMode"
         };
+        this.logDebug("camera_chosen_fallback", debug.chosen);
         return {
           chosen,
           debug
         };
-      } catch (_) {}
+      } catch (err) {
+        this.logDebug("fallback_open_error", {
+          requested: size,
+          name: err?.name,
+          message: err?.message || String(err)
+        });
+      }
     }
     throw new Error("Could not start a suitable camera.");
   }
   async startVideo() {
     try {
+      this.logDebug("startVideo_begin");
       const serviceConfig = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfig)();
       await serviceConfig.getAccessToken(false);
       const videoElem = document.getElementById("ScanDocAIVideoElement");
@@ -11772,38 +11881,75 @@ class ExtractorVideo {
         debug
       } = await this.pickBestPhoneCamera(mode);
       this.video.srcObject = chosen.stream;
-      await this.video.play().catch(e => {
-        console.warn(`Error on video play: ${e}`);
+      this.logDebug("srcObject_assigned", {
+        label: chosen.label,
+        settings: chosen.settings
       });
+      try {
+        await this.video.play();
+        this.logDebug("video_play_success", {
+          readyState: this.video.readyState,
+          videoWidth: this.video.videoWidth,
+          videoHeight: this.video.videoHeight
+        });
+      } catch (e) {
+        this.logDebug("video_play_error", {
+          name: e?.name,
+          message: e?.message || String(e)
+        });
+        throw e;
+      }
       this.focusDebug = await this.tryEnableDocumentFocus(chosen.stream);
       this.cameraDebug = debug;
       this.video.addEventListener("loadeddata", () => {
+        this.logDebug("video_loadeddata", {
+          videoWidth: this.video.videoWidth,
+          videoHeight: this.video.videoHeight
+        });
         this.adjustOverlayPosition();
       });
+      this.video.addEventListener("error", () => {
+        this.logDebug("video_element_error", {
+          error: this.video?.error ? {
+            code: this.video.error.code,
+            message: this.video.error.message
+          } : null
+        });
+      });
       window.addEventListener("resize", () => this.adjustOverlayPosition());
       setTimeout(() => this.adjustOverlayPosition(), 500);
       this.scanStartTime = Date.now();
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
       this.showMessage("Starting scanning");
+      this.logDebug("startVideo_success", this.getDebugDump());
       return true;
     } catch (error) {
       console.error("startVideo failed:", error);
+      this.logDebug("startVideo_failed", {
+        name: error?.name,
+        message: error?.message || String(error),
+        dump: this.getDebugDump()
+      });
       this.isRunning = false;
       this.stopVideo();
       this.onExtractedResults({
         success: false,
         code: error.status === 401 || error.status === 403 ? "004" : "005",
-        info: error.status === 401 || error.status === 403 ? "Authentication failed: Invalid API key/token." : "Startup failed: " + (error.message || "Unknown error")
+        info: error.status === 401 || error.status === 403 ? "Authentication failed: Invalid API key/token." : "Startup failed: " + (error.message || "Unknown error"),
+        debug: ExtractorVideo.DEBUG ? this.getDebugDump() : undefined
       });
       return false;
     }
   }
   stopVideo() {
     this.isRunning = false;
+    this.logDebug("stopVideo_called");
     if (this.video) {
       this.video.pause();
       if (this.video.srcObject !== undefined && this.video.srcObject !== null) {
-        this.video.srcObject.getTracks().forEach(t => t.stop());
+        try {
+          this.video.srcObject.getTracks().forEach(t => t.stop());
+        } catch (_) {}
       }
       this.video.srcObject = null;
     }
@@ -11924,13 +12070,11 @@ class ExtractorVideo {
 						margin-left: 20%;
 						margin-right: 20%;
 					}
-		
 					.desktopVideoHolder {
 						position: relative;
 						width: 100%;
 						overflow: hidden;
 					}
-
 					.desktopVideo {
 						width: 100%;
 						height: auto;
@@ -11939,7 +12083,6 @@ class ExtractorVideo {
 						max-width: 100vw;
 						max-height: 100vh;
 					}
-					
 					.centerGuideDot {
 						position: absolute;
 						width: 16px;
@@ -11952,12 +12095,10 @@ class ExtractorVideo {
 						pointer-events: none;
 						display: none;
 					}
-
 					@keyframes flicker {
 						0%, 100% { opacity: 1; }
 						50% { opacity: 0.3; }
 					}
-
 					.backgroundOverlay {
 						position: absolute;
 						top: 0;
@@ -11968,7 +12109,6 @@ class ExtractorVideo {
 						z-index: 2;
 						pointer-events: none;
 					}
-		
 					.desktopFeedback {
 						position: relative;
 						display: flex;

package/package.json

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