448 lines
15 KiB
PHP
448 lines
15 KiB
PHP
{{-- <div>
|
|
<video id="video" width="320" height="240" autoplay playsinline style="border:1px solid #ccc;"></video>
|
|
<br>
|
|
<button type="button" id="captureBtn" class="mt-2 px-4 py-2 bg-blue-600 text-white rounded">Capture</button>
|
|
<canvas id="canvas" width="320" height="240" style="display:none;"></canvas>
|
|
<img id="snapshot" style="margin-top:10px; max-width:100%;">
|
|
<input type="hidden" id="camera_image" name="{{ $getName() }}">
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const video = document.getElementById('video');
|
|
const canvas = document.getElementById('canvas');
|
|
const captureBtn = document.getElementById('captureBtn');
|
|
const snapshot = document.getElementById('snapshot');
|
|
const cameraInput = document.getElementById('camera_image');
|
|
|
|
async function startCamera() {
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({
|
|
video: { facingMode: "user" } // front camera
|
|
});
|
|
video.srcObject = stream;
|
|
} catch (err) {
|
|
console.error("Camera error: ", err);
|
|
alert("Cannot access camera. Check permissions or HTTPS.");
|
|
}
|
|
}
|
|
|
|
captureBtn.addEventListener('click', () => {
|
|
const context = canvas.getContext('2d');
|
|
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
const dataUrl = canvas.toDataURL('image/png');
|
|
snapshot.src = dataUrl;
|
|
cameraInput.value = dataUrl;
|
|
});
|
|
|
|
startCamera();
|
|
});
|
|
</script> --}}
|
|
|
|
|
|
|
|
{{-- <div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2" wire:ignore class="space-y-2">
|
|
<video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
|
|
<canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
|
|
<img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
|
|
|
|
{{-- <div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
|
|
<video
|
|
x-ref="video"
|
|
autoplay
|
|
playsinline
|
|
class="border rounded w-80 h-auto"
|
|
></video>
|
|
|
|
<!-- no need to fix width/height here either -->
|
|
<canvas x-ref="canvas" class="hidden"></canvas>
|
|
|
|
<img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
|
|
|
|
|
|
{{--
|
|
<div class="flex space-x-8 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">Switch Camera</x-filament::button>
|
|
<x-filament::button color="primary" @click="verify" x-show="photoTaken">Verify</x-filament::button>
|
|
</div> --}}
|
|
{{-- <div class="flex space-x-2 mt-2">
|
|
<x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken" class="inline-flex w-auto">Capture</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="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
|
|
<x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
|
|
</div> --}}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
|
|
{{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
|
|
{{-- <input type="hidden" x-ref="hiddenInput" id="camera_capture_field" name="camera_capture_file">
|
|
|
|
</div>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.2/dist/tesseract.min.js"></script>
|
|
<script>
|
|
|
|
// function cameraCapture()
|
|
// {
|
|
// return
|
|
// {
|
|
// stream: null,
|
|
// currentFacingMode: 'user', // 'user' = front, 'environment' = back
|
|
// photoTaken: false,
|
|
// 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 switchCamera() {
|
|
// this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
|
|
// await this.initCamera();
|
|
// },
|
|
|
|
// capturePhoto() {
|
|
// const video = this.$refs.video;
|
|
// const canvas = this.$refs.canvas;
|
|
// const snapshot = this.$refs.snapshot;
|
|
// const context = canvas.getContext('2d');
|
|
|
|
// context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
// const dataUrl = canvas.toDataURL('image/png');
|
|
|
|
// // stop camera stream after capture
|
|
// if (this.stream) {
|
|
// this.stream.getTracks().forEach(track => track.stop());
|
|
// }
|
|
|
|
// snapshot.src = dataUrl;
|
|
// snapshot.classList.remove('hidden');
|
|
// video.classList.add('hidden');
|
|
// this.photoTaken = true;
|
|
|
|
// // this.photo1 = dataUrl;
|
|
// this.$refs.hiddenInput.value = dataUrl;
|
|
// // @this.set('photo1', dataUrl);
|
|
// console.log('Captured Image:', dataUrl);
|
|
// },
|
|
|
|
// async verifyOCR(dataUrl) {
|
|
// try {
|
|
// const { data: { text } } = await Tesseract.recognize(
|
|
// dataUrl,
|
|
// 'eng', // language
|
|
// { logger: m => console.log(m) } // optional
|
|
// );
|
|
// alert("OCR Result: " + text);
|
|
// } catch (err) {
|
|
// console.error(err);
|
|
// alert("OCR Failed: " + err.message);
|
|
// }
|
|
// },
|
|
|
|
// async verify() {
|
|
// const dataUrl = this.$refs.hiddenInput.value;
|
|
// if (!dataUrl) {
|
|
// alert("No captured image found!");
|
|
// return;
|
|
// }
|
|
// await this.verifyOCR(dataUrl);
|
|
// },
|
|
|
|
// async retakePhoto() {
|
|
// this.photoTaken = false;
|
|
// this.$refs.snapshot.classList.add('hidden');
|
|
// this.$refs.video.classList.remove('hidden');
|
|
// await this.initCamera();
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
|
|
function cameraCapture() {
|
|
return {
|
|
stream: null,
|
|
currentFacingMode: 'user',
|
|
photoTaken: false,
|
|
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 switchCamera() {
|
|
this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
|
|
await this.initCamera();
|
|
},
|
|
|
|
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;
|
|
|
|
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
//const dataUrl = canvas.toDataURL('image/png');
|
|
const dataUrl = canvas.toDataURL('image/jpeg', 0.95);
|
|
|
|
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
|
|
|
|
snapshot.src = dataUrl;
|
|
snapshot.classList.remove('hidden');
|
|
video.classList.add('hidden');
|
|
this.photoTaken = true;
|
|
|
|
this.$refs.hiddenInput.value = dataUrl;
|
|
console.log('Captured Image:', dataUrl);
|
|
},
|
|
|
|
async verifyOCR(dataUrl) {
|
|
try {
|
|
const { data: { text } } = await Tesseract.recognize(
|
|
dataUrl,
|
|
'eng',
|
|
{ logger: m => console.log(m) }
|
|
);
|
|
alert("OCR Result: " + text);
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("OCR Failed: " + err.message);
|
|
}
|
|
}, // <-- COMMA ADDED HERE
|
|
|
|
async verify() {
|
|
const dataUrl = this.$refs.hiddenInput.value;
|
|
if (!dataUrl) {
|
|
alert("No captured image found!");
|
|
return;
|
|
}
|
|
await this.verifyOCR(dataUrl);
|
|
},
|
|
|
|
async retakePhoto() {
|
|
this.photoTaken = false;
|
|
this.$refs.snapshot.classList.add('hidden');
|
|
this.$refs.video.classList.remove('hidden');
|
|
await this.initCamera();
|
|
}
|
|
}
|
|
}
|
|
</script> --}}
|
|
|
|
|
|
{{-- //..Another Option --}}
|
|
|
|
<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
|
|
<video
|
|
x-ref="video"
|
|
autoplay
|
|
playsinline
|
|
class="border rounded w-80 h-auto"
|
|
></video>
|
|
|
|
<canvas x-ref="canvas" class="hidden"></canvas>
|
|
|
|
{{-- <img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
|
|
<img x-ref="snapshot"
|
|
class="hidden border rounded"
|
|
style="width: 100%; max-width: 350px; height: auto;">
|
|
|
|
|
|
<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>
|
|
<x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
|
|
<x-filament::button color="success" @click="uploadCroppedImage" x-show="photoTaken">OK ✔ Upload Cropped</x-filament::button>
|
|
</div>
|
|
|
|
<input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
|
|
|
|
</div>
|
|
|
|
<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>
|
|
function cameraCapture() {
|
|
return {
|
|
stream: null,
|
|
currentFacingMode: 'user',
|
|
photoTaken: false,
|
|
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 switchCamera() {
|
|
this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
|
|
await this.initCamera();
|
|
},
|
|
|
|
|
|
snapshot.onload = () => {
|
|
snapshot.classList.remove('hidden');
|
|
video.classList.add('hidden');
|
|
|
|
this.stopCamera();
|
|
|
|
// Destroy old cropper if exists
|
|
if (this.cropper) this.cropper.destroy();
|
|
|
|
// Initialize cropper
|
|
requestAnimationFrame(() => {
|
|
this.cropper = new Cropper(snapshot, {
|
|
aspectRatio: NaN,
|
|
dragMode: 'crop',
|
|
viewMode: 1,
|
|
autoCropArea: 0.9,
|
|
background: true,
|
|
responsive: true,
|
|
movable: true,
|
|
zoomable: true,
|
|
});
|
|
console.log("✅ Cropper initialized");
|
|
|
|
// ✅ Update Alpine reactivity so buttons show
|
|
this.$nextTick(() => {
|
|
this.photoTaken = true;
|
|
});
|
|
});
|
|
},
|
|
|
|
//
|
|
async uploadCroppedImage() {
|
|
|
|
if (!this.cropper) {
|
|
alert("Crop the image before upload!");
|
|
return;
|
|
}
|
|
|
|
const croppedCanvas = this.cropper.getCroppedCanvas({ imageSmoothingEnabled: true });
|
|
|
|
croppedCanvas.toBlob(async blob => {
|
|
|
|
const formData = new FormData();
|
|
formData.append('photo', blob, 'cropped.png');
|
|
|
|
const response = await fetch('/temp-upload', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
this.$refs.hiddenInput.value = data.path;
|
|
alert("✅ Cropped image uploaded!");
|
|
} else {
|
|
alert("Upload failed!");
|
|
}
|
|
}, "image/png");
|
|
},
|
|
|
|
async verify() {
|
|
const filePath = this.$refs.hiddenInput.value; // e.g., "temp/capture_1760764396.jpeg"
|
|
|
|
if (!filePath) {
|
|
alert("No captured image found!");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/verify-ocr', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ path: filePath })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
console.log(data);
|
|
|
|
// if (data.success) {
|
|
// alert("OCR Result: " + data.text);
|
|
// console.error(data.text);
|
|
// }
|
|
if (data.success) {
|
|
const serials = Array.isArray(data.text) ? data.text.join("\n") : data.text;
|
|
alert("OCR Result:\n" + serials);
|
|
console.log(serials);
|
|
}
|
|
else {
|
|
alert("OCR Failed: " + data.error);
|
|
console.error(data.error);
|
|
}
|
|
} catch (err) {
|
|
console.error(err.message);
|
|
alert("OCR request failed: " + err.message);
|
|
}
|
|
},
|
|
|
|
async retakePhoto() {
|
|
this.photoTaken = false;
|
|
this.$refs.snapshot.classList.add('hidden');
|
|
this.$refs.video.classList.remove('hidden');
|
|
this.cropper?.destroy();
|
|
await this.initCamera();
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|