121 lines
4.3 KiB
PHP
121 lines
4.3 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> --}}
|
|
|
|
{{-- logic --}}
|
|
|
|
<div x-data="cameraCapture()" x-init="initCamera()" 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 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="secondary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
|
|
<x-filament::button color="gray" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
|
|
</div>
|
|
|
|
{{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
|
|
<input type="hidden" x-ref="hiddenInput" x-model="photo1">
|
|
</div>
|
|
|
|
<script>
|
|
function cameraCapture() {
|
|
return {
|
|
stream: null,
|
|
currentFacingMode: 'user', // 'user' = front, 'environment' = back
|
|
photoTaken: false,
|
|
recognizedText: '',
|
|
|
|
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');
|
|
this.photoTaken = true;
|
|
|
|
// this.$refs.hiddenInput.value = dataUrl;
|
|
@this.set('photo1', dataUrl);
|
|
},
|
|
|
|
async retakePhoto() {
|
|
this.photoTaken = false;
|
|
this.$refs.snapshot.classList.add('hidden');
|
|
//this.$refs.video.classList.remove('hidden');
|
|
await this.initCamera();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|