Sindbad~EG File Manager

{% extends "login/layout.html" %}
{% block title %}
QR Scan
{% endblock %}  
{% block style %}
 <style>
        #video {
            width: 100%;
            max-width: 500px;
            height: 300px; /* Set your desired height here */
            object-fit: cover; /* This ensures the video covers the entire area */
        }
        #canvas {
            display: none;
        }
    </style>
{% endblock %}  
{% block content %}
<div class="container-fluid mt-3">
    <h1>T-shirt Scan</h1>
    
    <div id="controls" class="row">
        <div class="col text-center">
        <button id="start" class="btn btn-primary">Start Scanning</button>
        <button id="stop" class="btn btn-danger" style="display:none">Stop Scanning</button>
        </div>
    </div>
    
    <video id="video" autoplay style="display:none"></video>
    <canvas id="canvas"></canvas>
    <div class="w-100 text-center">
         <h4 id="output">Delegate No. : <span id="qr-result"></span></h4>     
    </div>
    
    </div>
{% endblock %}
{% block bottomscript %}

    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
    <!--<script src="https://unpkg.com/@zxing/library@0.18.6/umd/index.min.js"></script>-->
      <script src="https://unpkg.com/@zxing/library@latest"></script>

    <!--<script src="/static/js/qrcode-scanner.js"></script>-->
    
    <script>
        
        var url = "{{ url }}"
   
    
        $(document).ready(function() {
            
            
            
        const video = document.getElementById('video');
        const canvasElement = document.getElementById('canvas');
        const canvas = canvasElement.getContext('2d');
        const outputData = document.getElementById('qr-result');
    
        let scanning = false;
        let stream = null;


        const codeReader = new ZXing.BrowserBarcodeReader();
        
        // Start scanning
        $('#start').on('click', function() {
            startScanning();
            $("#video").show()
            // $('#start').prop('disabled', true);
            // $('#stop').prop('disabled', false);
            $('#start').hide()
            $('#stop').show()
        });
    
        // Stop scanning
        $('#stop').on('click', function() {
            // alert("stop btn")

            stopScanning();
            $("#video").hide()
            // $('#start').prop('disabled', false);
            // $('#stop').prop('disabled', true);
            $('#start').show()
            $('#stop').hide()
        });
        
        function startScanning() {
            scanning = true;
            navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(s) {
                stream = s;
                video.srcObject = stream;
                video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
                video.play();
                requestAnimationFrame(tick);
            });
        }
    
        function stopScanning() {
            // alert("stopScanning")
            scanning = false;
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
            }
            video.srcObject = null;
            // outputData.innerText = "None";
        }
       function tick() {
        if (scanning) {
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                canvasElement.height = video.videoHeight;
                canvasElement.width = video.videoWidth;
                canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
                const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
                const qrcode = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });
                if (qrcode) {
                    scan_val =  qrcode.data;
                    // alert(scan_val)

                    outputData.innerText = scan_val
                    stopScanning();
                    $('#start').prop('disabled', false);
                    $('#stop').prop('disabled', true);
                    
                    url_new = url + scan_val // only delegate_no
                    // url_new = scan_val //  url Scan value
                    // alert("url_new");
                    // alert(url_new);
                    window.location.replace(url_new)
                    
                    
                }
                else
                {
                    const img = new Image();
                    img.src = canvasElement.toDataURL();

                    img.onload = function() {
                        codeReader.decodeFromImageElement(img)
                        .then(result => {
                            if (result) {
                                scan_val = result.text; // Get barcode data
                                // alert("Barcode detected: " + scan_val);
        
                                outputData.innerText = scan_val;
                                stopScanning();
                                $('#start').prop('disabled', false);
                                $('#stop').prop('disabled', true);
        
                                url_new = url + scan_val; // Process barcode data in URL
                                window.location.replace(url_new);
                            }
                        })
                        .catch(err => {
                            // Handle ZXing errors (except no barcode found)
                            if (!(err instanceof ZXing.NotFoundException)) {
                                console.error(err);
                            }
                        });
                    }
                    //  // Barcode scanning with ZXing
                    // codeReader.decodeFromCanvas(canvasElement)
                    // .then(result => {
                    //     if (result) {
                    //         scan_val = result.text; // Get barcode data
                    //         alert("Barcode detected: " + scan_val);
    
                    //         outputData.innerText = scan_val;
                    //         stopScanning();
                    //         $('#start').prop('disabled', false);
                    //         $('#stop').prop('disabled', true);
    
                    //         url_new = url + scan_val; // Process barcode data in URL
                    //         window.location.replace(url_new);
                    //     }
                    // })
                    // .catch(err => {
                    //     // Handle ZXing errors (except no barcode found)
                    //     if (!(err instanceof ZXing.NotFoundException)) {
                    //         console.error(err);
                    //     }
                    // });
                    
                }
            }
            requestAnimationFrame(tick);
        }
    }
});

    </script>

{% endblock %}