網頁引入相機及QRCode判讀

 之前有寫過實名制及報名網站內含 QRCode 的判讀功能，使用 Intascan 及 Webrtc 的 javascript 模組。

參考資料：[day14]-使用網頁開啟相機掃描QR Code-instascan介紹+實際應用（https://ithelp.ithome.com.tw/articles/10206308）

Instscan：https://github.com/schmich/instascan

Webrtc：https://github.com/webrtc/adapter

網頁

html 上半部是掃描結果訊息顯示的部份，result_icon 用 materical design icons 顯示各個圖示；scan_text 顯示掃描結東；result_text 顯示文字化結果。

下半以 video 顯示 WebRTC 從 Camera 擷取的畫面，並由 Instascan 依此資料判讀 QRCode 資訊。camera_select 作為切換 Camera 的功能。

Javascript

<script>

        let precode = '';

        let res = '';

        let audio = new Audio('audio_beep.mp3');

        let scanner = new Instascan.Scanner({

            video: document.getElementById('preview'),

            mirror: false

        });

        scanner.addListener('scan', function(content) {

            audio.play();

            document.getElementById('scan_text').innerHTML = content;

            let result_arr = content.split('-');

            let theyear='{{$param.semesteryear}}';

            let thename = 'KLART';

            if(result_arr[0] != thename){

                document.getElementById('result_icon').innerHTML = 'error';

                document.getElementById('result_text').innerHTML = '非本競賽之 QR-Code';

                precode='';

            }else{

                if(result_arr[1] != theyear){

                    document.getElementById('result_icon').innerHTML = 'error';

                    document.getElementById('result_text').innerHTML = '非本年度之 QR-Code'; 

                    precode='';

                }else{

                    $.ajax({

                        url: "{{base_url('/ajaxfunc/qrcodescan')}}/"+content,

                        success: function(data){

                            res = data.split(',');

                            if(res[0]=='ok'){

                                document.getElementById('result_icon').innerHTML = 'task_alt';

                                document.getElementById('result_text').innerHTML = res[1];

                            }else{

                                document.getElementById('result_icon').innerHTML = 'error';

                                document.getElementById('result_text').innerHTML = res[1];

                            }

                        }

                    });

                }

            }

        });

        Instascan.Camera.getCameras().then(function(cameras) {

            //取得設備的相機數目

            self.cameras = cameras;

            str = '';

            if (cameras.length > 0) {

                ///若設備相機數目大於0 則先開啟第0個相機(程式的世界是從第零個開始的)

                scanner.start(cameras[0]);

                for (i = 0; i < cameras.length; i++) {

                    str += '<button type="button" class="btn btn-primary btn-sm mx-1 mb-2" onclick="scanner.start(cameras[' + i + ']);"><i class="material-icons">videocam</i>' + (i+1) + '</botton>';

                }

                document.getElementById('camera_select').innerHTML = str;

            } else {

                //若設備沒有相機數量則顯示"No cameras found";

                //這裡自行判斷要寫什麼

                document.getElementById('result_icon').innerHTML = 'error';

                document.getElementById('scan_text').innerHTML = '無相機可供使用';

            }

        }).catch(function(e) {

            document.getElementById('result_icon').innerHTML = 'error';

            document.getElementById('result_text').innerHTML = e;

        });

        function cleardata() {

            document.getElementById('result_icon').innerHTML = 'loop';

            document.getElementById('scan_text').innerHTML = '';

            document.getElementById('result_text').innerHTML = '';

        }

    </script>