@extends('layouts.scan')
@section('content')

     <div class="tab-content p-5 bg-light">
                        <h2 class="mb-4">Scan Qr code</h2>


                            <div class="cards">
                                <div class="cards-header cards-chart" data-background-color="blue" style="padding:20px">
                                <div class="input-group mb-3">
                          
    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
  
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
  
                        </div>
                        

                                </div>
                                <div class="cards-content">
                                    <h4 class="title"></h4>
                                    <p class="category"><div class="form-group">
                            <div class="form-check form-check-inline">
                               
                            </div>
                        </div></p>
                                </div>
                               
                            </div>

                      


                </div>

@endsection
