<!DOCTYPE html>

<html style="background-color: black;">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="../dist/css/style.css" />

    <title>Lector QR y Código de Barras</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            height: 100vh;

            background-color: black;

            color: white;

        }

        #video-container {

            position: relative;

            width: 300px; /* Ancho del círculo */

            height: 300px; /* Alto del círculo */

            border-radius: 50%; /* Hace que sea un círculo */

            overflow: hidden; /* Oculta todo lo que se salga del círculo */

            border: 5px solid white; /* Borde blanco */

            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);

        }

        #video {

            width: 100%;

            height: 100%;

            object-fit: cover; /* Asegura que la cámara se ajuste dentro del círculo */

        }

        #output {

            margin-top: 20px;

            font-size: 18px;

            color: white;

        }

        #backLink, #goToLink {

            display: inline-block;

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            background-color: white;

            color: black;

            font-weight: bold;

            text-decoration: none;

            text-align: center;

        }

        #backLink:hover, #goToLink:hover {

            background-color: gray;

            color: white;

        }

    </style>

</head>

<body>

    <div id="video-container">

        <video id="video" autoplay></video>

    </div>

    <center>

        <div id="output">LECTOR QR Y CÓDIGO DE BARRAS</div>

        <br>

        <button id="goToLink" style="display: none;" onclick="goToQRLink()">IR</button>

        <br><br>

        <a id="backLink" href="/">Regresar</a>

    </center>

    <script>

        // Asigna la URL de referencia al enlace "Regresar"

        const backLink = document.getElementById('backLink');

        const referrer = document.referrer;



        if (referrer) {

            backLink.href = referrer; // Redirigir a la página anterior si existe referrer

        } else {

            backLink.href = '/'; // Redirigir al home si no hay referrer

        }

    </script>

    <script src="../dist/js/jsQR.js"></script>

    <script src="../dist/js/quagga.min.js"></script> <!-- QuaggaJS cargado localmente -->

    <script type="text/javascript">

        async function startVideo() {

            const video = document.getElementById('video');

            const output = document.getElementById('output');



            try {

                const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });

                video.srcObject = stream;



                video.onloadedmetadata = () => {

                    video.play();

                    scanQRCodeAndBarcode();

                };

            } catch (err) {

                console.error("Error accessing camera: ", err);

                output.textContent = 'Error accessing camera';

            }

        }



        function scanQRCodeAndBarcode() {

            const video = document.getElementById('video');

            const canvas = document.createElement('canvas');

            const context = canvas.getContext('2d');

            const goToLinkButton = document.getElementById('goToLink');

            const output = document.getElementById('output');



            // Configuración de QuaggaJS

            Quagga.init({

                inputStream: {

                    type: "LiveStream",

                    target: video, // Usamos el elemento <video> como flujo de entrada

                    constraints: {

                        facingMode: "environment" // Cámara trasera

                    }

                },

                decoder: {

                    readers: ["code_128_reader", "ean_reader", "ean_8_reader", "upc_reader", "upc_e_reader"] // Tipos de códigos de barras soportados

                }

            }, (err) => {

                if (err) {

                    console.error(err);

                    output.textContent = 'Error inicializando QuaggaJS';

                    return;

                }

                Quagga.start();

            });



            // Escaneo de códigos QR con jsQR

            function scanQR() {

                canvas.width = video.videoWidth;

                canvas.height = video.videoHeight;

                context.drawImage(video, 0, 0, canvas.width, canvas.height);



                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

                const code = jsQR(imageData.data, imageData.width, imageData.height);



                if (code) {

                    goToLinkButton.style.display = 'inline-block';

                    window.location.href = `${code.data}`;

                    goToLinkButton.dataset.url = `${code.data}`;

                }

            }



            // Lectura de códigos de barras con QuaggaJS

            Quagga.onDetected((data) => {

                if (data && data.codeResult && data.codeResult.code) {

                    Quagga.stop();

                    output.textContent = `Código de barras detectado: ${data.codeResult.code}`;

                    console.log(`Código de barras detectado: ${data.codeResult.code}`);

                }

            });



            // Escaneo de QR en bucle

            function drawFrame() {

                scanQR();

                requestAnimationFrame(drawFrame);

            }

            drawFrame();

        }



        function goToQRLink() {

            const url = document.getElementById('goToLink').dataset.url;

            if (url) {

                window.location.href = url;

            }

        }



        startVideo();

    </script>

</body>

</html>

