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

changed logic in ocr

Browse Source
This commit is contained in:
dhanabalan
2025-10-25 16:49:38 +05:30
parent f8fda97181
commit 28d07533f0
1 changed files with 74 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -703,37 +703,30 @@ function cameraCapture() {
{{-- .. --}}
<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="relative space-y-2">
<div x-data="cameraCapture()" x-init="init()" wire:ignore class="space-y-2 relative">
<!-- Video feed -->
<video
x-ref="video"
autoplay
playsinline
class="border rounded w-80 h-auto"
style="display:block;"
></video>
<video x-ref="video" autoplay playsinline class="border rounded w-80 h-auto"></video>
<!-- Overlay canvas for OCR highlight -->
<canvas
x-ref="overlay"
class="border rounded w-80 h-auto"
style="position:absolute; top:0; left:0; pointer-events:none;"
></canvas>
<!-- Overlay for highlighting text -->
<div x-ref="overlay" class="absolute top-0 left-0 w-80 h-auto pointer-events-none"></div>
<!-- Hidden canvas for capturing snapshot -->
<!-- Hidden canvas for capturing frames -->
<canvas x-ref="canvas" class="hidden"></canvas>
<div class="flex space-x-4 mt-2">
<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="capturePhoto">Capture</x-filament::button>
<x-filament::button color="success" @click="verifyText">Verify OCR</x-filament::button>
</div>
<input type="hidden" x-ref="hiddenInput" name="camera_capture_file">
<input type="hidden" x-ref="serialInput" name="serialNumbers">
</div>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.5/dist/tesseract.min.js"></script>
<!-- Libraries -->
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.3/dist/tesseract.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.9.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/text-detection@0.1.0/dist/text-detection.min.js"></script>
<script>
function cameraCapture() {
@@ -741,30 +734,30 @@ function cameraCapture() {
stream: null,
currentFacingMode: 'user',
textDetectionInterval: null,
capturedPhoto: null, // store captured image
textModel: null,
tesseractWorker: null,
textDetectionRunning: false,
init: async function() {
await this.initCamera();
await this.initTextModel();
await this.initTesseract();
this.startDetection();
},
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));
alert("Camera error: " + (err.message || err));
}
},
@@ -773,111 +766,82 @@ function cameraCapture() {
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
alert("Photo captured!");
async initTextModel() {
this.textModel = await window.textDetection.createDetector('medium');
},
async verifyPhoto() {
if (!this.capturedPhoto) {
alert("Please capture a photo first!");
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 detectedText = result.data.text.trim();
alert("Detected Text:\n" + (detectedText || "[No text detected]"));
}
} catch (err) {
console.error("OCR verify error:", err);
alert("OCR verify failed:\n" + (err.message || err));
}
async initTesseract() {
this.tesseractWorker = Tesseract.createWorker({
logger: m => console.log(m)
});
await this.tesseractWorker.load();
await this.tesseractWorker.loadLanguage('eng');
await this.tesseractWorker.initialize('eng');
},
async detectText() {
startDetection() {
if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
this.textDetectionInterval = setInterval(() => this.detectTextTF(), 500);
},
async detectTextTF() {
if (this.textDetectionRunning) return;
this.textDetectionRunning = true;
const video = this.$refs.video;
const overlay = this.$refs.overlay;
overlay.innerHTML = '';
if (!video.videoWidth) {
if (!video.videoWidth || !this.textModel) {
this.textDetectionRunning = false;
return;
}
// Clear old highlights
overlay.innerHTML = '';
// Use small canvas for faster detection
const tempCanvas = document.createElement('canvas');
const scale = 0.5;
tempCanvas.width = video.videoWidth * scale;
tempCanvas.height = video.videoHeight * scale;
tempCanvas.getContext('2d').drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
try {
const result = await this.worker.recognize(tempCanvas);
const words = result.data.words;
words.forEach(w => {
if (!w.bbox || w.confidence < 50) return;
// Scale back to full video
const scaleX = 1 / scale;
const scaleY = 1 / scale;
// Detect text regions (bounding boxes)
const predictions = await this.textModel.estimateText(video);
predictions.forEach(pred => {
const [x, y, w, h] = pred.boundingBox;
const div = document.createElement('div');
div.textContent = w.text;
div.style.position = 'absolute';
div.style.left = `${w.bbox.x0 * scaleX}px`;
div.style.top = `${w.bbox.y0 * scaleY}px`;
div.style.width = `${(w.bbox.x1 - w.bbox.x0) * scaleX}px`;
div.style.height = `${(w.bbox.y1 - w.bbox.y0) * scaleY}px`;
div.style.left = `${x}px`;
div.style.top = `${y}px`;
div.style.width = `${w}px`;
div.style.height = `${h}px`;
div.style.backgroundColor = 'rgba(0,255,0,0.3)';
div.style.color = 'black';
div.style.fontSize = `${12 * scaleX}px`;
div.style.pointerEvents = 'auto';
div.style.userSelect = 'text';
div.style.overflow = 'hidden';
div.style.pointerEvents = 'none';
overlay.appendChild(div);
});
} catch (err) {
console.error("OCR error:", err);
console.error("Text detection error:", err);
} finally {
this.textDetectionRunning = false;
}
},
startDetection() {
if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
async capturePhoto() {
const video = this.$refs.video;
const canvas = this.$refs.canvas;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
const dataURL = canvas.toDataURL('image/png');
this.$refs.hiddenInput.value = dataURL;
alert("Photo captured!");
},
async verifyText() {
const canvas = this.$refs.canvas;
if (!canvas.width || !canvas.height) {
alert("Please capture an image first!");
return;
}
const result = await this.tesseractWorker.recognize(canvas);
const text = result.data.text.trim();
alert("Detected Text:\n" + text);
}
}
}
@@ -889,3 +853,4 @@ function cameraCapture() {