Sindbad~EG File Manager

{% extends "login/layout.html" %}
{% block title %}
QR Scan to Signup
{% 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>QR Code Scan to Signup</h1>
    
    <div id="controls" class="row">
        <div class="col text-center">
        <button id="start" class="btn btn-primary"><i class="fa-solid fa-camera"></i>Start Scanning</button>
        <button id="stop" class="btn btn-danger" style="display:none"><i class="fa-solid fa-camera"></i>Stop Scanning</button>
          <a href="{{ url_for('signup.getSearch',conf_id=conf_id,conf_key=conf_key) }}" class="btn btn-danger"> <i class="fa-solid fa-search"></i> Search delegates</a>
        </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">None</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="/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;


        
        // 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() {
            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() {
            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 code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });
                if (code) {
                    scan_val =  code.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
                    
                    window.location.replace(url_new)
                    
                    
                }
            }
            requestAnimationFrame(tick);
        }
    }
});

    </script>

{% endblock %}