{% extends 'base.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block title %}Scan Cam | IQChem{% endblock %}

{% block content %}
<h4>CHEMICAL UNIT PLATFORM</h4>
<p>Scan Cam (low resolution)</p>
<hr style="background-color: rgb(48, 25, 52); color: rgb(48, 25, 52);">
<div>
    <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 '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 = `/material_info/?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 %}