From 9491b37a8982c7a725407a3ec52bbbe60de2474e Mon Sep 17 00:00:00 2001
From: dhanabalan <dhana@example.com>
Date: Fri, 14 Nov 2025 10:20:58 +0530
Subject: [PATCH] modified total method logic camera capture in ocr

---
 .../views/fields/camera-capture.blade.php     | 686 ++++++++++++------
 1 file changed, 470 insertions(+), 216 deletions(-)

diff --git a/resources/views/fields/camera-capture.blade.php b/resources/views/fields/camera-capture.blade.php
index 51a9f26..fee477e 100644
--- a/resources/views/fields/camera-capture.blade.php
+++ b/resources/views/fields/camera-capture.blade.php
@@ -746,43 +746,374 @@ function cameraCapture() {
 
 
 <script>
+// function cameraCapture() {
+//     return {
+//         stream: null,
+//         currentFacingMode: 'user',
+//         textDetectionInterval: null,
+//         capturedPhoto: null, // store captured image
+//         serialNumbers: [],
+//         ocrWorker: null,
+//         isWorkerReady: false,
+
+//         async initCamera() {
+//             try {
+
+//                 await this.initWorker();
+
+//                 if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+
+//                 const video = this.$refs.video;
+//                 this.stream = await navigator.mediaDevices.getUserMedia({
+//                     video: { facingMode: this.currentFacingMode }
+//                 });
+
+//                 video.srcObject = this.stream;
+//                 await new Promise(resolve => video.onloadedmetadata = resolve);
+//                 video.play();
+
+//                 // Overlay size matches video
+//                 const overlay = this.$refs.overlay;
+//                 overlay.width = video.videoWidth;
+//                 overlay.height = video.videoHeight;
+
+//                 this.startDetection();
+//             } catch (err) {
+//                 console.error("Camera error:", err);
+//                 alert("Camera error:\n" + (err.message || err));
+//                 this.stopDetection();
+//             }
+//         },
+
+//         async initWorker() {
+//             if (this.ocrWorker) return;
+
+//             console.log("⏳ Loading OCR worker...");
+
+//             this.ocrWorker = await Tesseract.createWorker({
+//                 logger: info => console.log(info.status, info.progress)
+//             });
+
+//             await this.ocrWorker.loadLanguage('eng');
+//             await this.ocrWorker.initialize('eng');
+//             this.isWorkerReady = true;
+
+//             console.log("✅ OCR Worker Ready");
+//         },
+
+//         async switchCamera() {
+//             this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
+//             await this.initCamera();
+//         },
+
+//         // async capturePhoto() {
+//         //     const video = this.$refs.video;
+//         //     const canvas = this.$refs.canvas;
+//         //     const ctx = canvas.getContext('2d');
+
+//         //     canvas.width = video.videoWidth;
+//         //     canvas.height = video.videoHeight;
+//         //     ctx.drawImage(video, 0, 0);
+
+//         //     // const snapshotData = canvas.toDataURL('image/png');
+//         //     // this.$refs.hiddenInput.value = snapshotData;
+//         //     // this.capturedPhoto = snapshotData; // store for verification
+//         //     const snapshotData = canvas.toDataURL('image/png');
+//         //     this.$refs.hiddenInput.value = snapshotData;
+//         //     this.capturedPhoto = snapshotData;
+
+//         //      // Stop camera stream
+//         //     if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+
+//         //     // snapshot.src = dataUrl;
+//         //     // snapshot.classList.remove('hidden');
+//         //     // video.classList.add('hidden');
+//         //     // const snapshot = this.$refs.snapshot;
+//         //     // snapshot.src = snapshotData;
+//         //     // snapshot.classList.remove('hidden');
+//         //     // video.classList.add('hidden');
+//         //     // overlay.classList.add('hidden');
+//         //     snapshot.src = dataUrl;
+//         //     snapshot.classList.remove('hidden');
+//         //     video.classList.add('hidden');
+
+//         //     alert("Photo captured!");
+//         //     this.stopDetection();
+//         // },
+
+//         async capturePhoto() {
+//             const video = this.$refs.video;
+//             const canvas = this.$refs.canvas;
+//             const overlay = this.$refs.overlay;
+//             const snapshot = this.$refs.snapshot; // ✅ Fix: define snapshot reference
+//             const ctx = canvas.getContext('2d');
+
+//             canvas.width = video.videoWidth;
+//             canvas.height = video.videoHeight;
+//             ctx.drawImage(video, 0, 0);
+
+//             const snapshotData = canvas.toDataURL('image/png'); // ✅ Correct data var
+//             this.$refs.hiddenInput.value = snapshotData;
+//             this.capturedPhoto = snapshotData;
+
+//             // ✅ Stop camera
+//             if (this.stream) this.stream.getTracks().forEach(track => track.stop());
+
+//             // ✅ Hide video + overlay
+//             video.classList.add('hidden');
+//             overlay.classList.add('hidden');
+
+//             // ✅ Show captured image
+//             snapshot.src = snapshotData; // ✅ Correct variable
+//             snapshot.classList.remove('hidden');
+
+//             alert("Photo captured!");
+//             this.stopDetection();
+//         },
+
+//         async verifyPhoto() {
+//             if (!this.capturedPhoto) {
+//                 alert("Please capture a photo first!");
+//                 return;
+//             }
+
+//             if (!this.isWorkerReady) {
+//                 alert("OCR worker not ready yet!");
+//                 return;
+//             }
+
+//             try {
+//                 const img = new Image();
+//                 img.src = this.capturedPhoto;
+
+//                 img.onload = async () => {
+//                     const canvas = document.createElement('canvas');
+//                     canvas.width = img.width;
+//                     canvas.height = img.height;
+//                     const ctx = canvas.getContext('2d');
+//                     ctx.drawImage(img, 0, 0);
+
+//                     // const result = await Tesseract.recognize(canvas, 'eng', {
+//                     //     logger: m => console.log(m)
+//                     // });
+
+//                     // const result = await Tesseract.recognize(canvas, 'eng', {
+//                     //     logger: m => console.log(m.status, m.progress)
+//                     // });
+
+//                     const result = await this.ocrWorker.recognize(img);
+
+//                     const detectedText = result.data.text.trim();
+//                     // const matches = detectedText.match(/\d+/g) || [];
+
+//                     // const serialRegex = /Serial\s*No[:\-]?\s*([A-Za-z0-9]+)/i;
+//                     // const match = detectedText.match(serialRegex);
+
+//                     // this.serialNumbers = matches.slice(0, 4); // take first 4 serials
+//                     const serialWithLabelRegex = /Serial\s*No[:\-]?\s*([A-Za-z0-9]+)/i;
+//                     const match = detectedText.match(serialWithLabelRegex);
+
+//                     if (match && match[1]) {
+//                         //Scenario Found "Serial No"
+//                         this.serialNumbers = [match[1].trim()];
+//                         console.log("Serial with Label:", this.serialNumbers[0]);
+//                     }
+//                     else
+//                     {
+//                         //Extract first 4 numbers
+//                         const generalNums = detectedText.match(/[A-Za-z0-9]{4,}/g) || [];
+//                         this.serialNumbers = generalNums.slice(0, 4);
+
+//                         if (this.serialNumbers.length == 0) {
+//                             alert("No serial numbers detected!");
+//                             return;
+//                         }
+
+//                         console.log("Serial Numbers List:", this.serialNumbers);
+//                     }
+
+//                     this.$refs.hiddenInputSerials.value = JSON.stringify(this.serialNumbers);
+//                     alert("Serial numbers:\n" + this.$refs.hiddenInputSerials.value);
+//                     fetch('/save-serials-to-session', {
+//                         method: 'POST',
+//                         credentials: 'same-origin',
+//                         headers: {
+//                             'Content-Type': 'application/json',
+//                             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
+//                         },
+//                         body: JSON.stringify({
+//                             serial_numbers: this.serialNumbers,
+//                         }),
+//                     })
+//                     .then(response => response.json())
+//                     .then(data => {
+//                         console.log("✅ Session Updated:", data);
+//                         alert("✅ Serial numbers saved to session!");
+//                     })
+//                 }
+//             } catch (err) {
+//                 console.error("OCR verify error:", err);
+//                 alert("OCR verify failed:\n" + (err.message || err));
+//             }
+//         },
+
+
+//         data() {
+//             return {
+//                 tempCanvas: null,
+//                 tempCtx: null,
+//                 isDetecting: false,
+//             };
+//         },
+
+//         mounted() {
+//             this.tempCanvas = document.createElement('canvas');
+//             this.tempCtx = this.tempCanvas.getContext('2d');
+//         },
+
+//         async detectText() {
+//             if (this.isDetecting) return;
+//             this.isDetecting = true;
+
+//             const video = this.$refs.video;
+//             const overlay = this.$refs.overlay;
+//             const ctx = overlay.getContext('2d');
+
+//             if (!video.videoWidth) {
+//                 this.isDetecting = false;
+//                 return;
+//             }
+
+//             // 🔥 Reuse temp canvas (no memory leak)
+//             this.tempCanvas.width = video.videoWidth;
+//             this.tempCanvas.height = video.videoHeight;
+
+//             this.tempCtx.drawImage(video, 0, 0);
+
+//             try {
+//                 const result = await Tesseract.recognize(this.tempCanvas, 'eng');
+//                 const words = result.data.words;
+
+//                 ctx.clearRect(0, 0, overlay.width, overlay.height);
+//                 ctx.strokeStyle = 'lime';
+//                 ctx.lineWidth = 2;
+
+//                 words.forEach(w => {
+//                     if (!w.bbox || w.confidence < 50) return;
+//                     const { x0, y0, x1, y1 } = w.bbox;
+//                     ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
+//                 });
+
+//             } catch (err) {
+//                 console.error("Live OCR error:", err);
+//             }
+
+//             this.isDetecting = false;
+//         }
+
+//         // async detectText() {
+//         //     const video = this.$refs.video;
+//         //     const overlay = this.$refs.overlay;
+//         //     const ctx = overlay.getContext('2d');
+
+//         //     if (!video.videoWidth) return;
+
+//         //     const tempCanvas = document.createElement('canvas');
+//         //     tempCanvas.width = video.videoWidth;
+//         //     tempCanvas.height = video.videoHeight;
+//         //     const tempCtx = tempCanvas.getContext('2d');
+//         //     tempCtx.drawImage(video, 0, 0);
+
+//         //     try {
+//         //         const result = await Tesseract.recognize(tempCanvas, 'eng');
+//         //         const words = result.data.words;
+
+//         //         ctx.clearRect(0, 0, overlay.width, overlay.height);
+//         //         ctx.strokeStyle = 'lime';
+//         //         ctx.lineWidth = 2;
+
+//         //         words.forEach(w => {
+//         //             if (!w.bbox || w.confidence < 50) return;
+//         //             const { x0, y0, x1, y1 } = w.bbox;
+//         //             ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
+//         //         });
+//         //     } catch (err) {
+//         //         console.error("Live OCR error:", err);
+//         //     }
+//         // },
+
+//         async retakePhoto() {
+//             this.photoTaken = false;
+//             this.$refs.snapshot.classList.add('hidden');
+//             this.$refs.video.classList.remove('hidden');
+//             await this.initCamera();
+//             await new Promise(resolve => {
+//                 this.$refs.video.onloadedmetadata = resolve;
+//             });
+//             const video = this.$refs.video;
+//             const overlay = this.$refs.overlay;
+//             overlay.width = video.videoWidth;
+//             overlay.height = video.videoHeight;
+
+//             // Clear old green boxes
+//             const ctx = overlay.getContext('2d');
+//             ctx.clearRect(0, 0, overlay.width, overlay.height);
+
+//             // Make overlay visible if hidden
+//             overlay.classList.remove('hidden');
+//             this.startDetection();
+//         },
+
+//         // startDetection() {
+//         //     if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
+//         //     this.textDetectionInterval = setInterval(() => this.detectText(), 1500);
+//         // },
+
+//         startDetection() {
+//             if (this.textDetectionInterval)
+//                 clearInterval(this.textDetectionInterval);
+
+//             // Run IMMEDIATELY after retake
+//             this.detectText();
+
+//             // Then keep scanning every 1200ms
+//             this.textDetectionInterval = setInterval(() => {
+//                 this.detectText();
+//             }, 1200);
+//         }
+
+//         stopDetection() {
+//             if (this.textDetectionInterval) {
+//                 clearInterval(this.textDetectionInterval);
+//                 this.textDetectionInterval = null;
+//                 console.log("Text detection stopped");
+//             }
+//         }
+//     }
+// }
+
+
 function cameraCapture() {
     return {
         stream: null,
         currentFacingMode: 'user',
         textDetectionInterval: null,
-        capturedPhoto: null, // store captured image
+        capturedPhoto: null,
         serialNumbers: [],
+
+        // OCR Worker
         ocrWorker: null,
         isWorkerReady: false,
+        isDetecting: false,
 
-        async initCamera() {
-            try {
+        // Reusable canvas
+        tempCanvas: null,
+        tempCtx: null,
 
-                await this.initWorker();
-
-                if (this.stream) this.stream.getTracks().forEach(track => track.stop());
-
-                const video = this.$refs.video;
-                this.stream = await navigator.mediaDevices.getUserMedia({
-                    video: { facingMode: this.currentFacingMode }
-                });
-
-                video.srcObject = this.stream;
-                await new Promise(resolve => video.onloadedmetadata = resolve);
-                video.play();
-
-                // Overlay size matches video
-                const overlay = this.$refs.overlay;
-                overlay.width = video.videoWidth;
-                overlay.height = video.videoHeight;
-
-                this.startDetection();
-            } catch (err) {
-                console.error("Camera error:", err);
-                alert("Camera error:\n" + (err.message || err));
-                this.stopDetection();
-            }
+        async init() {
+            this.tempCanvas = document.createElement('canvas');
+            this.tempCtx = this.tempCanvas.getContext('2d');
+            await this.initWorker();
         },
 
         async initWorker() {
@@ -791,239 +1122,162 @@ function cameraCapture() {
             console.log("⏳ Loading OCR worker...");
 
             this.ocrWorker = await Tesseract.createWorker({
-                logger: info => console.log(info.status, info.progress)
+                logger: m => console.log(m.status, m.progress)
             });
 
-            await this.ocrWorker.loadLanguage('eng');
-            await this.ocrWorker.initialize('eng');
-            this.isWorkerReady = true;
+            await this.ocrWorker.loadLanguage("eng");
+            await this.ocrWorker.initialize("eng");
 
+            this.isWorkerReady = true;
             console.log("✅ OCR Worker Ready");
         },
 
-        async switchCamera() {
-            this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
-            await this.initCamera();
-        },
-
-        // async capturePhoto() {
-        //     const video = this.$refs.video;
-        //     const canvas = this.$refs.canvas;
-        //     const ctx = canvas.getContext('2d');
-
-        //     canvas.width = video.videoWidth;
-        //     canvas.height = video.videoHeight;
-        //     ctx.drawImage(video, 0, 0);
-
-        //     // const snapshotData = canvas.toDataURL('image/png');
-        //     // this.$refs.hiddenInput.value = snapshotData;
-        //     // this.capturedPhoto = snapshotData; // store for verification
-        //     const snapshotData = canvas.toDataURL('image/png');
-        //     this.$refs.hiddenInput.value = snapshotData;
-        //     this.capturedPhoto = snapshotData;
-
-        //      // Stop camera stream
-        //     if (this.stream) this.stream.getTracks().forEach(track => track.stop());
-
-        //     // snapshot.src = dataUrl;
-        //     // snapshot.classList.remove('hidden');
-        //     // video.classList.add('hidden');
-        //     // const snapshot = this.$refs.snapshot;
-        //     // snapshot.src = snapshotData;
-        //     // snapshot.classList.remove('hidden');
-        //     // video.classList.add('hidden');
-        //     // overlay.classList.add('hidden');
-        //     snapshot.src = dataUrl;
-        //     snapshot.classList.remove('hidden');
-        //     video.classList.add('hidden');
-
-        //     alert("Photo captured!");
-        //     this.stopDetection();
-        // },
-
-        async capturePhoto() {
-            const video = this.$refs.video;
-            const canvas = this.$refs.canvas;
-            const overlay = this.$refs.overlay;
-            const snapshot = this.$refs.snapshot; // ✅ Fix: define snapshot reference
-            const ctx = canvas.getContext('2d');
-
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
-            ctx.drawImage(video, 0, 0);
-
-            const snapshotData = canvas.toDataURL('image/png'); // ✅ Correct data var
-            this.$refs.hiddenInput.value = snapshotData;
-            this.capturedPhoto = snapshotData;
-
-            // ✅ Stop camera
-            if (this.stream) this.stream.getTracks().forEach(track => track.stop());
-
-            // ✅ Hide video + overlay
-            video.classList.add('hidden');
-            overlay.classList.add('hidden');
-
-            // ✅ Show captured image
-            snapshot.src = snapshotData; // ✅ Correct variable
-            snapshot.classList.remove('hidden');
-
-            alert("Photo captured!");
-            this.stopDetection();
-        },
-
-        async verifyPhoto() {
-            if (!this.capturedPhoto) {
-                alert("Please capture a photo first!");
-                return;
-            }
-
-            if (!this.isWorkerReady) {
-                alert("OCR worker not ready yet!");
-                return;
-            }
-
+        async initCamera() {
             try {
-                const img = new Image();
-                img.src = this.capturedPhoto;
-
-                img.onload = async () => {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = img.width;
-                    canvas.height = img.height;
-                    const ctx = canvas.getContext('2d');
-                    ctx.drawImage(img, 0, 0);
-
-                    // const result = await Tesseract.recognize(canvas, 'eng', {
-                    //     logger: m => console.log(m)
-                    // });
-
-                    // const result = await Tesseract.recognize(canvas, 'eng', {
-                    //     logger: m => console.log(m.status, m.progress)
-                    // });
-
-                    const result = await this.ocrWorker.recognize(img);
-
-                    const detectedText = result.data.text.trim();
-                    // const matches = detectedText.match(/\d+/g) || [];
-
-                    // const serialRegex = /Serial\s*No[:\-]?\s*([A-Za-z0-9]+)/i;
-                    // const match = detectedText.match(serialRegex);
-
-                    // this.serialNumbers = matches.slice(0, 4); // take first 4 serials
-                    const serialWithLabelRegex = /Serial\s*No[:\-]?\s*([A-Za-z0-9]+)/i;
-                    const match = detectedText.match(serialWithLabelRegex);
-
-                    if (match && match[1]) {
-                        //Scenario Found "Serial No"
-                        this.serialNumbers = [match[1].trim()];
-                        console.log("Serial with Label:", this.serialNumbers[0]);
-                    }
-                    else
-                    {
-                        //Extract first 4 numbers
-                        const generalNums = detectedText.match(/[A-Za-z0-9]{4,}/g) || [];
-                        this.serialNumbers = generalNums.slice(0, 4);
-
-                        if (this.serialNumbers.length == 0) {
-                            alert("No serial numbers detected!");
-                            return;
-                        }
-
-                        console.log("Serial Numbers List:", this.serialNumbers);
-                    }
-
-                    this.$refs.hiddenInputSerials.value = JSON.stringify(this.serialNumbers);
-                    alert("Serial numbers:\n" + this.$refs.hiddenInputSerials.value);
-                    fetch('/save-serials-to-session', {
-                        method: 'POST',
-                        credentials: 'same-origin',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
-                        },
-                        body: JSON.stringify({
-                            serial_numbers: this.serialNumbers,
-                        }),
-                    })
-                    .then(response => response.json())
-                    .then(data => {
-                        console.log("✅ Session Updated:", data);
-                        alert("✅ Serial numbers saved to session!");
-                    })
+                if (this.stream) {
+                    this.stream.getTracks().forEach(t => t.stop());
                 }
+
+                const video = this.$refs.video;
+
+                this.stream = await navigator.mediaDevices.getUserMedia({
+                    video: { facingMode: this.currentFacingMode }
+                });
+
+                video.srcObject = this.stream;
+                await new Promise(res => video.onloadedmetadata = res);
+                video.play();
+
+                // Resize overlay to match video
+                const overlay = this.$refs.overlay;
+                overlay.width = video.videoWidth;
+                overlay.height = video.videoHeight;
+
+                // Start OCR once per camera start
+                this.startDetection();
+
             } catch (err) {
-                console.error("OCR verify error:", err);
-                alert("OCR verify failed:\n" + (err.message || err));
+                console.error("Camera error:", err);
+                alert("Camera Error:\n" + err.message);
+                this.stopDetection();
             }
         },
 
+        async switchCamera() {
+            this.currentFacingMode =
+                this.currentFacingMode === "user"
+                    ? "environment"
+                    : "user";
+
+            await this.initCamera();
+        },
+
         async detectText() {
+            if (!this.isWorkerReady) return;
+            if (this.isDetecting) return;
+
+            this.isDetecting = true;
+
             const video = this.$refs.video;
             const overlay = this.$refs.overlay;
-            const ctx = overlay.getContext('2d');
+            const ctx = overlay.getContext("2d");
 
-            if (!video.videoWidth) return;
+            if (!video.videoWidth) {
+                this.isDetecting = false;
+                return;
+            }
 
-            const tempCanvas = document.createElement('canvas');
-            tempCanvas.width = video.videoWidth;
-            tempCanvas.height = video.videoHeight;
-            const tempCtx = tempCanvas.getContext('2d');
-            tempCtx.drawImage(video, 0, 0);
+            // Draw video frame into reusable canvas
+            this.tempCanvas.width = video.videoWidth;
+            this.tempCanvas.height = video.videoHeight;
+            this.tempCtx.drawImage(video, 0, 0);
 
             try {
-                const result = await Tesseract.recognize(tempCanvas, 'eng');
+                const result = await this.ocrWorker.recognize(this.tempCanvas);
                 const words = result.data.words;
 
                 ctx.clearRect(0, 0, overlay.width, overlay.height);
-                ctx.strokeStyle = 'lime';
+                ctx.strokeStyle = "lime";
                 ctx.lineWidth = 2;
 
                 words.forEach(w => {
-                    if (!w.bbox || w.confidence < 50) return;
+                    if (w.confidence < 50) return;
                     const { x0, y0, x1, y1 } = w.bbox;
                     ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
                 });
+
             } catch (err) {
                 console.error("Live OCR error:", err);
             }
-        },
 
-        async retakePhoto() {
-            this.photoTaken = false;
-            this.$refs.snapshot.classList.add('hidden');
-            this.$refs.video.classList.remove('hidden');
-            await this.initCamera();
-            await new Promise(resolve => {
-                this.$refs.video.onloadedmetadata = resolve;
-            });
-            const video = this.$refs.video;
-            const overlay = this.$refs.overlay;
-            overlay.width = video.videoWidth;
-            overlay.height = video.videoHeight;
-
-            // Clear old green boxes
-            const ctx = overlay.getContext('2d');
-            ctx.clearRect(0, 0, overlay.width, overlay.height);
-
-            // Make overlay visible if hidden
-            overlay.classList.remove('hidden');
-            this.startDetection();
+            this.isDetecting = false;
         },
 
         startDetection() {
-            if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
-            this.textDetectionInterval = setInterval(() => this.detectText(), 500);
+            if (this.textDetectionInterval) {
+                clearInterval(this.textDetectionInterval);
+            }
+
+            // run once instantly
+            this.detectText();
+
+            // run continuous every 1.2s
+            this.textDetectionInterval = setInterval(() => {
+                this.detectText();
+            }, 1200);
         },
 
         stopDetection() {
             if (this.textDetectionInterval) {
                 clearInterval(this.textDetectionInterval);
                 this.textDetectionInterval = null;
-                console.log("Text detection stopped");
             }
+        },
+
+        async capturePhoto() {
+            const video = this.$refs.video;
+            const canvas = this.$refs.canvas;
+            const ctx = canvas.getContext("2d");
+
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            ctx.drawImage(video, 0, 0);
+
+            const snapshotData = canvas.toDataURL("image/png");
+            this.$refs.hiddenInput.value = snapshotData;
+            this.capturedPhoto = snapshotData;
+
+            // Stop detection + camera
+            this.stopDetection();
+            if (this.stream) this.stream.getTracks().forEach(t => t.stop());
+
+            // Switch UI
+            video.classList.add("hidden");
+            this.$refs.overlay.classList.add("hidden");
+
+            const snap = this.$refs.snapshot;
+            snap.src = snapshotData;
+            snap.classList.remove("hidden");
+
+            alert("Photo captured!");
+        },
+
+        async retakePhoto() {
+            this.$refs.snapshot.classList.add("hidden");
+            this.$refs.video.classList.remove("hidden");
+
+            await this.initCamera();
+
+            const overlay = this.$refs.overlay;
+            const ctx = overlay.getContext("2d");
+            ctx.clearRect(0, 0, overlay.width, overlay.height);
+            overlay.classList.remove("hidden");
+
+            this.startDetection();
         }
-    }
+    };
 }
+
 </script>