Update index.html

index.html

@@ -120,7 +120,7 @@
                                     })()"
                   ></canvas>
                 </div>
-                <!-- <canvas id="canvas" x-ref="canvas"></canvas> -->
+                <canvas id="canvasObjdet" x-ref="canvasObjdet" style="visibility: hidden;"></canvas>
 
                 <div
                   x-show="activeTab === 'upload' && !imageUrl"
@@ -175,12 +175,12 @@
                 >
                   <div class="preview-area">
                     <video
-                      x-ref="video"
+                      x-ref="videoObjdet"
                       autoplay
                       playsinline
                       class="hidden"
                     ></video>
-                    <canvas x-ref="canvas" class="hidden"></canvas>
+                    <canvas x-ref="canvasOcr" class="hidden"></canvas>
 
                     <div class="preview-placeholder">
                       <svg
@@ -207,18 +207,18 @@
                   </div>
 
                   <div class="btn-group">
-                    <button @click="startCamera" class="btn btn-primary">
+                    <button @click="startCameraObjdet" class="btn btn-primary">
                       Start Camera
                     </button>
                     <button
-                      @click="captureImage"
+                      @click="captureImageObjdet"
                       class="btn btn-primary"
                       :disabled="!cameraActive"
                     >
                       Capture
                     </button>
                     <button
-                      @click="stopCamera"
+                      @click="stopCameraObjdet"
                       class="btn btn-secondary"
                       :disabled="!cameraActive"
                     >
@@ -495,7 +495,7 @@
                 >
                   <div class="preview-area">
                     <video
-                      x-ref="video"
+                      x-ref="videoOcr"
                       autoplay
                       playsinline
                       class="hidden"
@@ -527,18 +527,18 @@
                   </div>
 
                   <div class="btn-group">
-                    <button @click="startCamera" class="btn btn-primary">
+                    <button @click="startCameraOcr" class="btn btn-primary">
                       Start Camera
                     </button>
                     <button
-                      @click="captureImage"
+                      @click="captureImageOcr"
                       class="btn btn-primary"
                       :disabled="!cameraActive"
                     >
                       Capture
                     </button>
                     <button
-                      @click="stopCamera"
+                      @click="stopCameraOcr"
                       class="btn btn-secondary"
                       :disabled="!cameraActive"
                     >
@@ -941,23 +941,35 @@
               this.clearResults();
             },
 
-            async startCamera() {
+            async startCameraObjdet() {
               try {
                 const stream = await navigator.mediaDevices.getUserMedia({
                   video: true,
                 });
-                this.$refs.video.srcObject = stream;
-                this.$refs.video.classList.remove("hidden");
+                this.$refs.videoObjdet.srcObject = stream;
+                this.$refs.videoObjdet.classList.remove("hidden");
                 this.cameraActive = true;
               } catch (err) {
                 console.error("Error accessing camera:", err);
                 alert("Could not access camera. Please check permissions.");
               }
             },
-
-            captureImage() {
-              const video = this.$refs.video;
-              const canvas = this.$refs.canvas;
+            async startCameraOcr() {
+              try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                  video: true,
+                });
+                this.$refs.videoOcr.srcObject = stream;
+                this.$refs.videoOcr.classList.remove("hidden");
+                this.cameraActive = true;
+              } catch (err) {
+                console.error("Error accessing camera:", err);
+                alert("Could not access camera. Please check permissions.");
+              }
+            },
+            captureImageObjdet() {
+              const video = this.$refs.videoObjdet;
+              const canvas = this.$refs.canvasObjdet;
               canvas.width = video.videoWidth;
               canvas.height = video.videoHeight;
               canvas.getContext("2d").drawImage(video, 0, 0);
@@ -965,13 +977,31 @@
               this.imageUrl = canvas.toDataURL("image/png");
               this.clearResults();
             },
+            captureImageOcr() {
+              const video = this.$refs.videoOcr;
+              const canvas = this.$refs.canvasOcr;
+              canvas.width = video.videoWidth;
+              canvas.height = video.videoHeight;
+              canvas.getContext("2d").drawImage(video, 0, 0);
 
-            stopCamera() {
-              const stream = this.$refs.video.srcObject;
+              this.imageUrlOcr = canvas.toDataURL("image/png");
+              this.clearResults();
+            },
+            stopCameraObjdet() {
+              const stream = this.$refs.videoObjdet.srcObject;
+              if (stream) {
+                stream.getTracks().forEach((track) => track.stop());
+                this.$refs.videoObjdet.srcObject = null;
+                this.$refs.videoObjdet.classList.add("hidden");
+                this.cameraActive = false;
+              }
+            },
+            stopCameraOcr() {
+              const stream = this.$refs.videOcr.srcObject;
               if (stream) {
                 stream.getTracks().forEach((track) => track.stop());
-                this.$refs.video.srcObject = null;
-                this.$refs.video.classList.add("hidden");
+                this.$refs.videoOcr.srcObject = null;
+                this.$refs.videoOcr.classList.add("hidden");
                 this.cameraActive = false;
               }
             },