pds/resources/views/fields/camera-capture.blade.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>  --}}

<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 border rounded"></canvas>

    <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" 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);
        // },
        capturePhoto() {
            const video = this.$refs.video;
            const canvas = this.$refs.canvas;
            const context = canvas.getContext('2d');

            // draw video frame to canvas
            context.drawImage(video, 0, 0, canvas.width, canvas.height);

            // convert to data URL
            const dataUrl = canvas.toDataURL('image/png');

            // store to Livewire
            @this.set('photo1', dataUrl);

            // stop camera
            if (this.stream) {
                this.stream.getTracks().forEach(track => track.stop());
                this.stream = null;
            }

            this.photoTaken = true;

            // hide video and show canvas in the same place
            video.classList.add('hidden');
            canvas.classList.remove('hidden');
        },


        async retakePhoto() {
            this.photoTaken = false;
            this.$refs.snapshot.classList.add('hidden');
            //this.$refs.video.classList.remove('hidden');
            await this.initCamera();
        }
    }
}
</script>