static/qrScanner.js

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const qrText = document.getElementById('qr-text');

let stream = null; 

navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }) // for rear camera
    .then(function(str) {
        stream = str;
        video.srcObject = stream;
        video.play();
    })
    .catch(function(err) {
        console.error("Error accessing the webcam: " + err);
    });

video.addEventListener('play', function() {
    canvas.style.width = video.videoWidth;
    canvas.style.height = video.videoHeight;

    const scan = async () => {
        if (video.paused || video.ended) {
            return;
        }

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: "dontInvert",
        });
        if (code) {
            console.log("QR Code detected:", code.data);
            qrText.innerHTML = code.data;
            video.pause();

            const response = await fetch('/qr', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    'data': code.data
                })
            });

            const data = await response.json();
            
            var source = document.createElement("source");
            source.src = data['qroutput_file_path'];
            source.type = "audio/mp3";

            document.getElementById("qroutput").appendChild(source);
            document.getElementById("qroutput").play();

            stream.getTracks().forEach((track) => {
                if (track.readyState == 'live' && track.kind === 'video') {
                    track.stop();
                }
            });
            cancelAnimationFrame(scan);
        }
        requestAnimationFrame(scan);
    };
    requestAnimationFrame(scan);
});

document.getElementById("qroutput").onended = function(){
    location.reload();
}