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

added detect text in ocr

Browse Source
This commit is contained in:
dhanabalan
2025-10-25 08:31:28 +05:30
parent b8339b8b0c
commit e313b0be4b
1 changed files with 95 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -298,6 +298,8 @@ document.addEventListener('DOMContentLoaded', () => {
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest"></script>
<script>
@@ -309,6 +311,21 @@ function cameraCapture() {
photo1: '',
// async initCamera() {
// try {
// if (this.stream) this.stream.getTracks().forEach(track => track.stop());
// this.stream = await navigator.mediaDevices.getUserMedia({
// video: { facingMode: this.currentFacingMode }
// });
// this.$refs.video.srcObject = this.stream;
// } catch (err) {
// console.error("Camera error:", err);
// alert("Cannot access camera. Enable permissions or use HTTPS.");
// }
// },
async initCamera() {
try {
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
@@ -317,10 +334,18 @@ function cameraCapture() {
video: { facingMode: this.currentFacingMode }
});
this.$refs.video.srcObject = this.stream;
const video = this.$refs.video;
video.srcObject = this.stream;
await video.play();
const overlay = this.$refs.overlay;
overlay.width = video.videoWidth;
overlay.height = video.videoHeight;
this.startTextDetection(); //auto detection after camera start
} catch (err) {
console.error("Camera error:", err);
alert("Cannot access camera. Enable permissions or use HTTPS.");
alert("Camera access failed!");
}
},
@@ -329,7 +354,6 @@ function cameraCapture() {
await this.initCamera();
},
async capturePhoto() {
const video = this.$refs.video;
const canvas = this.$refs.canvas;
@@ -342,36 +366,38 @@ function cameraCapture() {
const snapshot = this.$refs.snapshot;
snapshot.src = canvas.toDataURL('image/png');
//Wait until image is loaded
snapshot.onload = () => {
snapshot.classList.remove('hidden');
video.classList.add('hidden');
// snapshot.onload = () => {
// snapshot.classList.remove('hidden');
// video.classList.add('hidden');
//Alpine reactive update inside nextTick
this.$nextTick(() => {
this.photoTaken = true;
// //Alpine reactive update inside nextTick
// this.$nextTick(() => {
// this.photoTaken = true;
//Destroy old cropper if exists
if (this.cropper) this.cropper.destroy();
// //Destroy old cropper if exists
// if (this.cropper) this.cropper.destroy();
// ✅ Use requestAnimationFrame to ensure browser painted the image
requestAnimationFrame(() => {
this.cropper = new Cropper(snapshot, {
aspectRatio: NaN,
dragMode: 'crop',
viewMode: 1,
autoCropArea: 0.8,
background: true,
movable: true,
zoomable: true,
responsive: true,
});
console.log("✅ Cropper initialized");
});
// // ✅ Use requestAnimationFrame to ensure browser painted the image
// requestAnimationFrame(() => {
// this.cropper = new Cropper(snapshot, {
// aspectRatio: NaN,
// dragMode: 'crop',
// viewMode: 1,
// autoCropArea: 0.8,
// background: true,
// movable: true,
// zoomable: true,
// responsive: true,
// });
// console.log("✅ Cropper initialized");
// });
this.stopCamera(); // stop camera after Cropper starts
});
};
// this.stopCamera(); // stop camera after Cropper starts
// });
// };
},
@@ -467,6 +493,47 @@ function cameraCapture() {
this.cropper?.destroy();
await this.initCamera();
}
async detectText() {
// Draw video frame to temporary canvas
const tempCanvas = document.createElement('canvas');
tempCanvas.width = video.videoWidth;
tempCanvas.height = video.videoHeight;
const tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
// Run Tesseract.js
const { data: { words } } = await Tesseract.recognize(tempCanvas.toDataURL(), 'eng');
// Clear previous overlay
ctx.clearRect(0, 0, overlay.width, overlay.height);
// Draw bounding boxes for each detected word
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.font = '18px Arial';
ctx.fillStyle = 'red';
words.forEach(word => {
if (word.bbox) {
const { x0, y0, x1, y1 } = word.bbox;
ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
// Optional: draw recognized text
// ctx.fillText(word.text, x0, y0 - 2);
}
});
}
// Periodically detect text
async startDetection() {
setInterval(detectText, 500); // every 500ms
},
// Initialize camera and detection
(async () => {
await startCamera();
startDetection();
})();
}
}