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

changed whole logic in ocr

Browse Source
This commit is contained in:
dhanabalan
2025-10-25 09:23:26 +05:30
parent 0438be6c5f
commit 0d9df371ee
1 changed files with 108 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -266,7 +266,7 @@ document.addEventListener('DOMContentLoaded', () => {
{{-- //..Another Option --}}
<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
{{-- <div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
<video
x-ref="video"
autoplay
@@ -284,12 +284,12 @@ document.addEventListener('DOMContentLoaded', () => {
<canvas x-ref="canvas" class="hidden"></canvas>
{{-- <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
<img x-ref="snapshot"
{{-- <img x-ref="snapshot"
class="hidden border rounded"
style="width: 100%; max-width: 350px; height: auto;">
style="width: 100%; max-width: 350px; height: auto;"> --}}
<div class="flex space-x-4 mt-2">
{{-- <div class="flex space-x-4 mt-2">
<x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
<x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
<x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
@@ -301,14 +301,14 @@ document.addEventListener('DOMContentLoaded', () => {
<input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
<input type="hidden" x-ref="serialInput" name="serialNumbers">
</div>
</div> --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
{{-- <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/tesseract.js@4.1.3/dist/tesseract.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.3/dist/tesseract.min.js"></script> --}}
<script>
{{-- <script>
function cameraCapture() {
return {
stream: null,
@@ -316,10 +316,10 @@ function cameraCapture() {
photoTaken: false,
photo1: '',
textDetectionInterval: null,
worker: null,
worker: null, --}}
// async initCamera() {
{{-- // async initCamera() {
// try {
// if (this.stream) this.stream.getTracks().forEach(track => track.stop());
@@ -563,7 +563,105 @@ function cameraCapture() {
}
}
</script> --}}
{{-- //.. --}}
<div x-data="cameraCapture()" x-init="initCamera()" class="relative w-80 h-auto">
<video x-ref="video" autoplay playsinline class="border rounded w-80 h-auto"></video>
<canvas x-ref="overlay" class="absolute top-0 left-0 w-80 h-auto pointer-events-none"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.3/dist/tesseract.min.js"></script>
<script>
function cameraCapture() {
return {
stream: null,
currentFacingMode: 'user',
worker: null,
textDetectionInterval: null,
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);
await video.play();
// Set overlay size
const overlay = this.$refs.overlay;
overlay.width = video.videoWidth;
overlay.height = video.videoHeight;
// Init Tesseract worker once
if (!this.worker) {
this.worker = Tesseract.createWorker({ logger: m => console.log(m) });
await this.worker.load();
await this.worker.loadLanguage('eng');
await this.worker.initialize('eng');
}
this.startDetection();
} catch (err) {
console.error("Camera error:", err);
alert("Camera error:\n" + (err.message || err));
}
},
async switchCamera() {
this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
await new Promise(r => setTimeout(r, 300)); // small delay
await this.initCamera();
},
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 { data: { words } } = await this.worker.recognize(tempCanvas);
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("OCR error:", err);
}
},
startDetection() {
if (this.textDetectionInterval) clearInterval(this.textDetectionInterval);
this.textDetectionInterval = setInterval(() => this.detectText(), 1000);
}
}
}
</script>