poc/pds
1
0
Fork 1
Code Issues Pull Requests 8 Actions Packages Projects Releases Wiki Activity

added retake photo functionality and improved capture logic in camera capture component

Browse Source
This commit is contained in:
dhanabalan
2025-10-27 16:24:05 +05:30
parent 39eedf1fe9
commit a9421963a7
1 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
resources/views/fields/camera-capture.blade.php
View File

@@ -734,17 +734,13 @@ function cameraCapture() {
<x-filament::button color="primary" @click="switchCamera">Switch Camera</x-filament::button>
<x-filament::button color="success" @click="capturePhoto">Capture Photo</x-filament::button>
<x-filament::button color="warning" @click="verifyPhoto">Verify</x-filament::button>
<x-filament::button color="primary" @click="retakePhoto">Retake</x-filament::button>
</div>
<input type="hidden" x-ref="hiddenInput" name="camera_capture_file">
{{-- <input type="hidden" x-ref="serialInput" name="serialNumbers"> --}}
{{-- <input type="hidden" x-model="serialNumbers" name="serialNumbers"> --}}
<input type="hidden" x-model="serialNumbers" name="serialNumbers">
</div>
<!-- Scripts -->
@@ -825,36 +821,35 @@ function cameraCapture() {
// 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');
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);
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;
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());
// ✅ Stop camera
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
// ✅ Hide video + overlay
video.classList.add('hidden');
overlay.classList.add('hidden');
// ✅ Hide video + overlay
video.classList.add('hidden');
overlay.classList.add('hidden');
// ✅ Show captured image
snapshot.src = snapshotData; // ✅ Correct variable
snapshot.classList.remove('hidden');
// ✅ Show captured image
snapshot.src = snapshotData; // ✅ Correct variable
snapshot.classList.remove('hidden');
alert("Photo captured!");
this.stopDetection();
},
alert("Photo captured!");
this.stopDetection();
},
async verifyPhoto() {
if (!this.capturedPhoto) {
@@ -885,7 +880,6 @@ function cameraCapture() {
//this.$refs.serialInput.value = JSON.stringify(this.serialNumbers);
alert("Serial numbers stored in hidden input:\n" + this.$refs.serialInput.value);
}
} catch (err) {
console.error("OCR verify error:", err);
@@ -924,6 +918,14 @@ function cameraCapture() {
}
},
async retakePhoto() {
this.photoTaken = false;
this.$refs.snapshot.classList.add('hidden');
this.$refs.video.classList.remove('hidden');
await this.initCamera();
},
startDetection() {
if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
@@ -946,3 +948,6 @@ function cameraCapture() {