@extends('layouts.backend')

@section('extraCss')

@endsection

@section('mainContentArea')
<div class="container-fluid">
        <div class="row">
            <div class="col-sm-3">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- demo left sidebar -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-6724419004010752"
                     data-ad-slot="7706376079"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
            
            <div class="col">
                <script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
                
                <div class="col-sm-12">
                    <video id="preview" class="p-1 border" style="width:100%;"></video>
                </div>
                <script type="text/javascript">
                    var scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5, mirror: false });
                    scanner.addListener('scan',function(content){
                        //alert(content);
                        window.location.href=content
                        //window.location.href=content;
                    });
                    Instascan.Camera.getCameras().then(function (cameras){
                        if(cameras.length>0){
                            scanner.start(cameras[0]);
                            $('[name="options"]').on('change',function(){
                                if($(this).val()==1){
                                    if(cameras[0]!=""){
                                        scanner.start(cameras[0]);
                                    }else{
                                        alert('No Front camera found!');
                                    }
                                }else if($(this).val()==2){
                                    if(cameras[1]!=""){
                                        scanner.start(cameras[1]);
                                    }else{
                                        alert('No Back camera found!');
                                    }
                                }
                            });
                        }else{
                            console.error('No cameras found.');
                            alert('No cameras found.');
                        }
                    }).catch(function(e){
                        console.error(e);
                        alert(e);
                    });
                </script>
                <div class="btn-group btn-group-toggle mb-5" data-toggle="buttons">
                  <label class="btn btn-primary active">
                    <input type="radio" name="options" value="1" autocomplete="off" checked> Front Camera
                  </label>
                  <label class="btn btn-secondary">
                    <input type="radio" name="options" value="2" autocomplete="off"> Back Camera
                  </label>
                </div>
            </div>
            

        
        </div>
    </div>
@endsection

@section('extraJs')

@endsection