scandoc-ai-components 0.0.60 → 0.0.62

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;
@@ -11332,47 +11373,6 @@ class ExtractorVideo {
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
     }
   }
-  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 startVideo() {
     try {
       const serviceConfig = (0,_config__WEBPACK_IMPORTED_MODULE_1__.getScanDocAIConfig)();
@@ -11405,6 +11405,17 @@ class ExtractorVideo {
       await this.video.play().catch(e => {
         console.warn(`Error on video play: ${e}`);
       });
+      setTimeout(async () => {
+        const margins = await this.getCameraMargins();
+        const rectangle = document.querySelector('.desktopRectangle');
+        if (rectangle) {
+          rectangle.style.top = `${margins.topPct * 100}%`;
+          rectangle.style.bottom = `${margins.bottomPct * 100}%`;
+          rectangle.style.left = `${margins.leftPct * 100}%`;
+          rectangle.style.right = `${margins.rightPct * 100}%`;
+        }
+      }, 500); // Give time for video frame to show			  
+
       this.scanStartTime = Date.now(); // Reset timer
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
       this.showMessage("Starting scanning");
@@ -11439,83 +11450,76 @@ class ExtractorVideo {
   }
   getHTML() {
     return `
-			<div class="desktopFeedback" id="ScanDocAIMessage"></div>
-			<div class="desktopVideoArea">
-				<div class="desktopVideoHolder">
+            <div class="desktopFeedback" id="ScanDocAIMessage"></div>
+            <div class="desktopVideoArea">
+                <div class="desktopVideoHolder">
 					<video id="ScanDocAIVideoElement" class="desktopVideo" autoPlay muted playsInline></video>
 					<div class="backgroundOverlay"></div>
 					<div class="desktopRectangle dashedRectangle"></div>
-				</div>
-			</div>
-	
-			<style>
-				.desktopVideoArea {
-					display: flex;
-					flex-direction: column;
-					gap: 8px;
-					padding: 16px;
-					background-color: rgba(255, 255, 255, 0.05);
-					border: 1px solid #5078bb;
-					border-radius: 15px;
-					margin-left: 20%;
-					margin-right: 20%;
-				}
-	
-				.desktopVideoHolder {
-					position: relative;
-					max-width: 100%;
-					overflow: hidden;
-				}
-	
-				.desktopVideo {
-					width: 100%;
-					height: auto;
-					margin-left: auto;
-					margin-right: auto;
-					max-width: 100vw;
-					max-height: 100vh;
-				}
-	
-				.desktopRectangle {
+                </div>
+            </div>
+    
+            <style>
+                .desktopVideoArea {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    padding: 16px;
+                    background-color: rgba(255, 255, 255, 0.05);
+                    border: 1px solid #5078bb;
+                    border-radius: 15px;
+                    margin-left: 20%;
+                    margin-right: 20%;
+                }
+    
+                .desktopVideoHolder {
+                    position: relative;
+                    max-width: 100%;
+                    overflow: hidden;
+					aspect-ratio: 16 / 9;
+                }
+
+                .desktopVideo {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: contain;
+                    display: block;
+                }
+
+                .desktopRectangle {
 					position: absolute;
 					border-radius: 30px;
 					display: flex;
 					justify-content: center;
 					align-items: center;
-					transition: all 0.3s ease;
-				}
-	
-				.dashedRectangle {
+					z-index: 3;
 					border: 5px dashed #5078bb;
+					transition: all 0.3s ease;
 				}
-	
-				.solidRectangle {
-					border: 5px solid #5078bb;
-				}
-	
-				.backgroundOverlay {
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					background-color: rgba(0, 0, 0, 0.051);
-					z-index: 2;
-					pointer-events: none;
-				}
-	
-				.desktopFeedback {
-					position: relative;
-					display: flex;
-					font-size: 22px;
-					font-weight: 600;
-					min-height: 36px;
-					justify-content: center;
-					align-items: center;
-					color: #5078bb;
-				}
-			</style>
-		`;
+    
+                .backgroundOverlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background-color: rgba(0, 0, 0, 0.051);
+                    z-index: 2;
+                    pointer-events: none;
+                }
+    
+                .desktopFeedback {
+                    position: relative;
+                    display: flex;
+                    font-size: 22px;
+                    font-weight: 600;
+                    min-height: 36px;
+                    justify-content: center;
+                    align-items: center;
+                    color: #5078bb;
+                }
+            </style>
+        `;
   }
 }
 let EXTRACTION_VIDEO = undefined;

package/package.json

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