added logic in ocr
This commit is contained in:
@@ -729,7 +729,6 @@ function cameraCapture() {
|
||||
|
||||
<div class="flex space-x-4 mt-2">
|
||||
<x-filament::button color="primary" @click="switchCamera">Switch Camera</x-filament::button>
|
||||
<x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken" class="inline-flex w-auto">Retake</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>
|
||||
</div>
|
||||
@@ -757,49 +756,32 @@ function cameraCapture() {
|
||||
capturedPhoto: null, // store captured image
|
||||
serialNumbers: [],
|
||||
|
||||
// async initCamera() {
|
||||
// try {
|
||||
// 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 initCamera() {
|
||||
try {
|
||||
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 }
|
||||
});
|
||||
|
||||
this.$refs.video.srcObject = this.stream;
|
||||
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("Cannot access camera. Enable permissions or use HTTPS.");
|
||||
alert("Camera error:\n" + (err.message || err));
|
||||
this.stopDetection();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
async switchCamera() {
|
||||
this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
|
||||
await this.initCamera();
|
||||
@@ -840,30 +822,36 @@ function cameraCapture() {
|
||||
// this.stopDetection();
|
||||
// },
|
||||
|
||||
capturePhoto() {
|
||||
const video = this.$refs.video;
|
||||
const canvas = this.$refs.canvas;
|
||||
const snapshot = this.$refs.snapshot;
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
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');
|
||||
|
||||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
ctx.drawImage(video, 0, 0);
|
||||
|
||||
//const dataUrl = canvas.toDataURL('image/png');
|
||||
const dataUrl = canvas.toDataURL('image/jpeg', 0.95);
|
||||
const snapshotData = canvas.toDataURL('image/png'); // ✅ Correct data var
|
||||
this.$refs.hiddenInput.value = snapshotData;
|
||||
this.capturedPhoto = snapshotData;
|
||||
|
||||
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
|
||||
// ✅ Stop camera
|
||||
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
|
||||
|
||||
snapshot.src = dataUrl;
|
||||
snapshot.classList.remove('hidden');
|
||||
video.classList.add('hidden');
|
||||
this.photoTaken = true;
|
||||
// ✅ Hide video + overlay
|
||||
video.classList.add('hidden');
|
||||
overlay.classList.add('hidden');
|
||||
|
||||
this.$refs.hiddenInput.value = dataUrl;
|
||||
console.log('Captured Image:', dataUrl);
|
||||
},
|
||||
// ✅ Show captured image
|
||||
snapshot.src = snapshotData; // ✅ Correct variable
|
||||
snapshot.classList.remove('hidden');
|
||||
|
||||
alert("Photo captured!");
|
||||
this.stopDetection();
|
||||
},
|
||||
|
||||
async verifyPhoto() {
|
||||
if (!this.capturedPhoto) {
|
||||
@@ -933,14 +921,6 @@ 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);
|
||||
|
||||
Reference in New Issue
Block a user