scandoc-ai-components 0.0.61 → 0.0.63

package/dist/index.js

@@ -11204,6 +11204,47 @@ class ExtractorVideo {
     this.unsupportedDocCount = 0;
     this.video = null;
   }
+  async getCameraMargins() {
+    const video = document.getElementById('ScanDocAIVideoElement');
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    const isColumnBlack = x => {
+      const threshold = 16;
+      for (let y = 0; y < canvas.height; y++) {
+        const i = (y * canvas.width + x) * 4;
+        const [r, g, b] = [imageData[i], imageData[i + 1], imageData[i + 2]];
+        if (r > threshold || g > threshold || b > threshold) return false;
+      }
+      return true;
+    };
+    const isRowBlack = y => {
+      const threshold = 16;
+      for (let x = 0; x < canvas.width; x++) {
+        const i = (y * canvas.width + x) * 4;
+        const [r, g, b] = [imageData[i], imageData[i + 1], imageData[i + 2]];
+        if (r > threshold || g > threshold || b > threshold) return false;
+      }
+      return true;
+    };
+    let left = 0,
+      right = 0,
+      top = 0,
+      bottom = 0;
+    while (left < canvas.width && isColumnBlack(left)) left++;
+    while (right < canvas.width && isColumnBlack(canvas.width - 1 - right)) right++;
+    while (top < canvas.height && isRowBlack(top)) top++;
+    while (bottom < canvas.height && isRowBlack(canvas.height - 1 - bottom)) bottom++;
+    return {
+      leftPct: left / canvas.width,
+      rightPct: right / canvas.width,
+      topPct: top / canvas.height,
+      bottomPct: bottom / canvas.height
+    };
+  }
   async analyzeVideoStream() {
     if (!this.isRunning) {
       return;
@@ -11364,6 +11405,21 @@ class ExtractorVideo {
       await this.video.play().catch(e => {
         console.warn(`Error on video play: ${e}`);
       });
+      window.addEventListener("resize", () => {
+        if (this.isRunning) {
+          setTimeout(() => this.getCameraMargins().then(margins => {
+            const rectangle = document.querySelector('.desktopRectangle');
+            const clamp = (v, max = 0.25) => Math.min(v, max) * 100;
+            const buffer = 0.03;
+            if (rectangle) {
+              rectangle.style.top = `${clamp(margins.topPct + buffer)}%`;
+              rectangle.style.bottom = `${clamp(margins.bottomPct + buffer)}%`;
+              rectangle.style.left = `${clamp(margins.leftPct + buffer)}%`;
+              rectangle.style.right = `${clamp(margins.rightPct + buffer)}%`;
+            }
+          }), 500);
+        }
+      });
       this.scanStartTime = Date.now(); // Reset timer
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
       this.showMessage("Starting scanning");
@@ -11401,11 +11457,9 @@ class ExtractorVideo {
             <div class="desktopFeedback" id="ScanDocAIMessage"></div>
             <div class="desktopVideoArea">
                 <div class="desktopVideoHolder">
-                    <div class="videoWrapper">
-                        <video id="ScanDocAIVideoElement" class="desktopVideo" autoPlay muted playsInline></video>
-                        <div class="backgroundOverlay"></div>
-                        <div class="desktopRectangle dashedRectangle"></div>
-                    </div>
+					<video id="ScanDocAIVideoElement" class="desktopVideo" autoPlay muted playsInline></video>
+					<div class="backgroundOverlay"></div>
+					<div class="desktopRectangle dashedRectangle"></div>
                 </div>
             </div>
     
@@ -11426,39 +11480,26 @@ class ExtractorVideo {
                     position: relative;
                     max-width: 100%;
                     overflow: hidden;
+					aspect-ratio: 16 / 9;
                 }
-    
-                .videoWrapper {
-                    position: relative;
-                    width: 100%;
-                    aspect-ratio: 16 / 9;
-                }
+
                 .desktopVideo {
                     width: 100%;
                     height: 100%;
-                    object-fit: cover;
+                    object-fit: contain;
                     display: block;
                 }
+
                 .desktopRectangle {
-                    position: absolute;
-                    top: 5%;
-                    left: 5%;
-                    right: 5%;
-                    bottom: 5%;
-                    border-radius: 30px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    z-index: 3;
-                }
-    
-                .dashedRectangle {
-                    border: 5px dashed #5078bb;
-                }
-    
-                .solidRectangle {
-                    border: 5px solid #5078bb;
-                }
+					position: absolute;
+					border-radius: 30px;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					z-index: 3;
+					border: 5px dashed #5078bb;
+					transition: all 0.3s ease;
+				}
     
                 .backgroundOverlay {
                     position: absolute;

package/package.json

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