<h1>QR Code Scanner</h1>
    <video id="video" width="100%" height="auto" autoplay></video>
    <canvas id="canvas" style="display:none"></canvas>

    <script>
        // get the video element and canvas element
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');

        // check if the device supports mediaDevices.getUserMedia()
        if (navigator.mediaDevices.getUserMedia) {
            // request access to the device's camera
            navigator.mediaDevices.getUserMedia({ video: true })
            .then(function (stream) {
                // set the video element's src to the camera feed
                video.srcObject = stream;
                video.play();
            })
            .catch(function (err) {
                console.log("An error occurred: " + err);
            });
        }

        // create a function to capture the QR code image
        function capture() {
            // set the canvas dimensions to match the video element
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            // draw the video frame to the canvas
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

            // get the QR code image data from the canvas
            var imageData = canvas.toDataURL('image/png');

            // send the image data to a PHP script for processing
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'process_qrcode.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    // display the response message
                    alert(this.responseText);
                }
            };
            xhr.send('data=' + encodeURIComponent(imageData));
        }
    </script>

    <button onclick="capture()">Capture QR Code</button>