之前有寫過實名制及報名網站內含 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>
留言
張貼留言