<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>