{% extends 'scan.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}
<div class="box__bg">
    <h3 class="p-2 text-center mt-2" style="background-color:rgb(130, 98, 53);color:white;"><strong>SCAN MATERIAL</strong></h3>
    <label id="scanned_code_label"></label>
    <video id="preview"></video>
</div>


<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<!--script src="{% static 'assets/js/instascan.min.js' %}"></script-->
<script>
    
    var scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content, image) {
        document.getElementById('scanned_code_label').innerText = content;
        window.location.href = `/pkg/pkg_code_detail/?ref=${content}`;
      });
    
      
    Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
            var cam_selected = cameras.length - 1;
            scanner.start(cameras[cam_selected]);
            scanner.start(cameras[0])
        }else{
            alert("No Camera Found!!!")
        }
      });
 </script>

 <br><br>
{% endblock %}