[RESOURCE::js/jsQR.js]
[RESOURCE::js/qrcode.js]
<style>
    #loadingMessage {
        text-align: center;
        padding: 30px;
        background-color: #eee;
        font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; font-weight: 300; letter-spacing: -0.02em; color: #353a40;
    }


    #noQRFound {
        text-align: center;
    }

    .canvas_box::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url('/weven_template/theme/weven/ko/1/page/test/admin_attendance_check_bg.png'); background-size: cover;
        background-position: center center; background-repeat: no-repeat; }

    .admin_attendance_check_title { font-size:25px; font-size:2.5rem; line-height:31px; line-height:3.1rem; font-weight: 500; letter-spacing: -0.04em; color: #353a40; }
    .admin_attendance_check_contents_title { font-size:26px; font-size:2.6rem; line-height:32px; line-height:3.2rem; font-weight: 500; letter-spacing: -0.02em; color: #353a40; }
    .admin_attendance_check_contents_desc > li > span { position: relative; box-sizing: border-box; font-size:15px; font-size:1.5rem; line-height:26px; line-height:2.6rem; font-weight: 300; letter-spacing: -0.02em; color: #353a40; }
    .admin_attendance_check_contents_desc > li > span:first-child{ float: left; padding-right: 15px; margin-right: 15px; }
    .admin_attendance_check_contents_desc > li > span:first-child::after { content: ''; position: absolute; top: 0; right: 0; height: 100%; border-right: 1px solid #e9f0f3; }
    .admin_attendance_check_contents_desc > li:first-child > span:first-child::after { top: 5px; height: calc(100% - 5px); }
    .admin_attendance_check_contents_desc > li:last-child > span:first-child::after { height: calc(100% - 6px); }
    .admin_attendance_check_contents_desc > li > span:last-child { float: none; overflow: hidden; font-size:14px; font-size:1.4rem; }
</style>


<div class="col-12 col-center mw-480 pl30 pr30 admin_attendance_check_con">
    <div class="col-12 admin_attendance_check_title fontGongGothic">
        출석체크
    </div>
    <div class="col-12 canvas_box">
        <canvas id="canvas" width="420" height="420" hidden style="width: 420px !important; height: 420px !important;"></canvas>
    </div>
    <div class="col-12" id="loadingMessage">카메라에 접근할 수 없습니다.</div>
    <div class="col-12 mt46 admin_attendance_check_contents_box" id="output" hidden>
        <div class="col-12 admin_attendance_check_contents_title fontGong">
            협회체육관운영 (2020년 1기)
        </div>
        <ul class="col-12 admin_attendance_check_contents_desc">
            <li>
                <span>과정코드</span>
                <span class="font_roboto">S530</span>
            </li>
            <li>
                <span>출석회차</span>
                <span><span class="font_roboto">3</span>회차</span>
            </li>
            <li>
                <span>진행상태</span>
                <span>수업시작</span>
            </li>
        </ul>
        <div style="display: none;">
            <div id="outputMessage">QR코드를 카메라에 인식시켜주세요.</div>
            <div hidden><b>Data:</b> <span id="outputData"></span></div>
        </div>
    </div>
</div>

<script>
    var video = document.createElement("video");
    var canvasElement = document.getElementById("canvas");
    var canvas = canvasElement.getContext("2d");
    var loadingMessage = document.getElementById("loadingMessage");
    var outputContainer = document.getElementById("output");
    var outputMessage = document.getElementById("outputMessage");
    var outputData = document.getElementById("outputData");

    function drawLine(begin, end, color) {
        canvas.beginPath();
        canvas.moveTo(begin.x, begin.y);
        canvas.lineTo(end.x, end.y);
        canvas.lineWidth = 4;
        canvas.strokeStyle = color;
        canvas.stroke();
    }

    // Use facingMode: environment to attemt to get the front camera on phones
    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
        video.srcObject = stream;
        video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
        video.play();
        requestAnimationFrame(tick);
    });

    function tick() {
        loadingMessage.innerText = "스캔 기능을 활성화 중입니다."
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
            loadingMessage.hidden = true;
            canvasElement.hidden = false;
            outputContainer.hidden = false;

            canvasElement.height = video.videoHeight;
            canvasElement.width = video.videoWidth;
            canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
            var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
            var code = jsQR(imageData.data, imageData.width, imageData.height, {
                inversionAttempts: "dontInvert",
            });
            if (code && code.data && code.data != '' ) {
                drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#2cca7e");
                drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#2cca7e");
                drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#2cca7e");
                drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#2cca7e");
                outputMessage.hidden = true;
                outputData.parentElement.hidden = false;
                outputData.innerText = code.data;
                bm.httpSendJsonPost(WEB_ROOT + 'portfolio/insertQrData', {data : code.data}, function( result ){
                    console.log(result);
                });
            } else {
                outputMessage.hidden = false;
                outputData.parentElement.hidden = true;
            }
        }
        requestAnimationFrame(tick);
    }
</script>