Scan QR Code + Beep

bysemicon -
0

 


ตัวอย่าง โค้ดเว็บสำหรับ สแกน QR Code อัตโนมัติ โดยใช้ html5-qrcode และ เล่นเสียงบี๊บเมื่อสแกนสำเร็จ

🔹 คุณสมบัติของโค้ด

✅ สแกนอัตโนมัติ ด้วยกล้อง
✅ เสียงบี๊บ เมื่อสแกนสำเร็จ
✅ แสดงค่า QR Code ที่สแกนได้
✅ ใช้ Bootstrap 5 สำหรับ UI ที่สวยงาม

DEMO


📌 โค้ด HTML + JavaScript

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Scanner</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <script src="https://unpkg.com/html5-qrcode"></script>
    <style>
        #qr-reader {
            width: 320px;
            max-width: 400px;
        }

        #qr-result {
            font-size: 1.5rem;
            font-weight: bold;
            color: green;
            margin-top: 10px;
        }
    </style>
</head>

<body class="d-flex justify-content-center align-items-center vh-100 bg-light">

    <div class="text-center">
        <h3>📷 สแกน QR Code</h3>
        <div id="qr-reader"></div>
        <p id="qr-result" class="mt-3"></p>
    </div>

    <audio id="beep-sound">
        <source src="https://semicon.github.io/sounds/store-scanner-beep-90395.mp3"  type="audio/mpeg">
    </audio>

    <script>
        function onScanSuccess(decodedText) {
            const resultElement = document.getElementById("qr-result");
            resultElement.innerHTML = `✅ พบข้อมูล: ${decodedText}`;

            // เล่นเสียงบี๊บ
            document.getElementById("beep-sound").play();

            // หยุดสแกนหลังจากสำเร็จ (ถ้าต้องการให้สแกนต่อ ให้ลบโค้ดนี้ออก)
            qrScanner.stop();
        }

        function onScanFailure(error) {
            // ไม่ต้องทำอะไรถ้ายังไม่พบ QR Code
        }

        // เริ่มต้นสแกน
        const qrScanner = new Html5Qrcode("qr-reader");
        qrScanner.start(
            { facingMode: "environment" }, // ใช้กล้องหลัง
            { fps: 10, qrbox: 200 },
            onScanSuccess,
            onScanFailure
        );
    </script>

</body>

</html>


🔹 วิธีใช้งาน

  1. เปิดเว็บในมือถือหรือคอมฯ
  2. กล้องจะเปิดอัตโนมัติ และเริ่มสแกน
  3. เมื่อสแกนสำเร็จ:
    • แสดงค่า QR Code ที่อ่านได้
    • เล่นเสียงบี๊บ
    • หยุดการสแกน (ถ้าต้องการให้สแกนต่อ ให้ลบ qrScanner.stop();)

✨ ลองนำไปใช้ดูครับ 😃




Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า