สแกนคิวอาร์โค้ดขึ้นกล่องข้อความ
สอนสแกนคิวอาร์โค้ดบาร์โค้ด
ScanQRCode.html
<![CDATA[<!DOCTYPE html>
<html lang="th">
<meta charset="UTF-8">
<head>
<title>QR Code / Barcode Scanner</title>
<script src="js/html5-qrcode.min.js"></script>
<style>
#reader {
width: 400px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 10px;
}
#result-display {
text-align: center;
margin-top: 20px;
}
#result-input {
width: 80%;
padding: 10px;
font-size: 1.1em;
margin-top: 10px;
border: 2px solid #007bff;
border-radius: 5px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">QR/Barcode Scanner Input</h1>
<div id="reader"></div>
<div id="result-display">
<h2>ผลลัพธ์การสแกน:</h2>
<input type="text" id="result-input" placeholder="ผลลัพธ์จาก QR Code จะปรากฏที่นี่">
</div>
<script>
function onScanSuccess(decodedText, decodedResult) {
// เมื่อสแกนสำเร็จ
console.log(`Scan result: ${decodedText}`, decodedResult);
// นำผลลัพธ์ไปใส่ในช่อง input
document.getElementById('result-input').value = decodedText;
// (ทางเลือก) หยุดสแกนหลังจากสแกนครั้งแรกสำเร็จ
// html5QrcodeScanner.clear();
}
function onScanError(errorMessage) {
// จัดการกับข้อผิดพลาด
// console.log(`Scan error: ${errorMessage}`);
}
// สร้าง Object สำหรับการสแกน
var html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{
fps: 10, // Frame per second (ความเร็วในการสแกน)
qrbox: {width: 250, height: 250} // ขนาดกรอบสแกน
},
/* verbose= */ false
);
// เริ่มการสแกน
html5QrcodeScanner.render(onScanSuccess, onScanError);
</script>
</body>
</html>]]>