<div>
<div class="col-md-12">
    <div style="text-align: center;">
    <div>
        <div class="" style="position: relative;display: inline-block;">
            <canvas width="320" height="320" id="webcodecam-canvas" style="width: 100%;"></canvas>
            <div class="scanner-laser laser-rightBottom" style="opacity: 0.5;"></div>
            <div class="scanner-laser laser-rightTop" style="opacity: 0.5;"></div>
            <div class="scanner-laser laser-leftBottom" style="opacity: 0.5;"></div>
            <div class="scanner-laser laser-leftTop" style="opacity: 0.5;"></div>
        </div>                                            
    </div>                                        
    </div>
</div>
<div class="col-md-12"><span id="scanned-QR"></span></div>
</div>

<script type="text/javascript" src="libs/webcodecamjs-master/js/filereader.js"></script>
<script type="text/javascript" src="libs/webcodecamjs-master/js/qrcodelib.js"></script>
<script type="text/javascript" src="libs/webcodecamjs-master/js/webcodecamjquery.js"></script>
<!--<script type="text/javascript" src="/libs/webcodecamjs-master/js/mainjquery.js"></script>-->
<!--<script type="text/javascript" src="/vistas/asistencia/js/asistenciasqr.js"></script>-->
<script type="text/javascript" >
    var decoder;
    var canvasData;
    var scannedQR = $("#scanned-QR");
    var grabImg = $("#btn-marcacion");
    var scannedImg = $("#scanned-img");
    var scannerLaser = $(".scanner-laser");
    $(document).ready(function () {
        var args = {
            zoom: 3,
            flipHorizontal: true,
            autoBrightnessValue: 100,
            width: 500,
            height: 500,
            resultFunction: function (res) {
                [].forEach.call(scannerLaser, function (el) {
                    $(el).fadeOut(300, function () {
                        $(el).fadeIn(300);
                    });
                });
                procesarResultadoQR(res);
            },
            getDevicesError: function (error) {
                var p, message = "getdDevicerError detected with the following parameters:\n";
                for (p in error) {
                    message += (p + ": " + error[p] + "\n");
                }
                alert(message + error.toLocaleString());
            },
            getUserMediaError: function (error) {
                var p, message = "getUserError detected with the following parameters:\n";
                for (p in error) {
                    message += (p + ": " + error[p] + "\n");
                }
                alert(message + error.toLocaleString());
            },
            cameraError: function (error) {
                var p, message = "CameraError detected with the following parameters:\n";
                if (error.name == "NotSupportedError") {
                    var ans = confirm("Your browser does not support getUserMedia via HTTP!\n(see: https://goo.gl/Y0ZkNV).\n You want to see github demo page in a new window?");
                    if (ans) {
                        window.open("https://andrastoth.github.io/webcodecamjs/");
                    }
                } else {
                    for (p in error) {
                        message += p + ": " + error[p] + "\n";
                    }
                    cargarVistaApps("asistencia", "sinpermisos", 'error=ErrorCamara');
                    //alert(message + error.toLocaleString());
                }
            },
            cameraSuccess: function () {
                grabImg.removeClass("disabled");
            }
        };
        decoder = $("#webcodecam-canvas").WebCodeCamJQuery(args).data().plugin_WebCodeCamJQuery;
        decoder.buildSelectMenu("#camera-select", "environment|back").init();
        scannedQR.text("Escaneando ...");
        grabImg.removeClass("disabled");
        decoder.play();
    });
    function detenerCamara() {
        decoder = $("#webcodecam-canvas").WebCodeCamJQuery().data().plugin_WebCodeCamJQuery;
        decoder.stop();
    }
    function procesarResultadoQR(res) {
        scannedQR.text("Escaneado ["+res.code+"]");
        identificacionColaborador = res.code.replace("https://validar.apps.ccsm.org.co/?colaborador=", "");
        verificarIdentificacionColaborador(identificacionColaborador, actualizarDatosColaborador);
        detenerCamara();
    }
</script>