• 10-07-2024, 20:03:08
    #1
    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>QR Kod Okuyucu</title>
        <link rel="stylesheet" href="test.css">
        <!-- Include Remix Icons CSS -->
        <link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="input-container">
                <input type="text" size="16" placeholder="QR Code" class="qrcode-text">
                <label class="qrcode-text-btn">
                    <i class="ri-camera-line icon"></i>
                </label>
            </div>
            <div id="qr-reader" style="display: none;">
                <!-- This div will hold the QR scanner area -->
            </div>
            <p id="result">QR Kodu sonucu burada görünecek.</p>
        </div>
        <script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <script src="test.js"></script>
    </body>
    </html>
    // test.js
    function domReady(fn) {
        if (
            document.readyState === "complete" ||
            document.readyState === "interactive"
        ) {
            setTimeout(fn, 1000);
        } else {
            document.addEventListener("DOMContentLoaded", fn);
        }
    }
    domReady(function () {
        let htmlScanner = null; // Initialize scanner variable
        // Function to handle QR code scanning success
        function onScanSuccess(decodeText, decodeResult) {
            alert("QR Code scanned successfully. Content: " + decodeText);
            document.getElementById("result").textContent = "QR Code Result: " + decodeText;
        }
        // Click event handler for the camera icon to toggle scanner visibility
        document.querySelector('.qrcode-text-btn').addEventListener('click', function () {
            if (!htmlScanner) {
                htmlScanner = new Html5QrcodeScanner(
                    "qr-reader", // div id where scanner will be initialized
                    { fps: 10, qrbox: 250 } // options
                );
                htmlScanner.render(onScanSuccess);
            }
            const qrReaderDiv = document.getElementById('qr-reader');
            if (qrReaderDiv.style.display === 'none') {
                qrReaderDiv.style.display = 'block';
                // Start camera on display
                htmlScanner.start();
            } else {
                qrReaderDiv.style.display = 'none';
                // Stop camera when hidden
                htmlScanner.stop();
            }
        });
    });
    Bir türlü beceremedim , kamera açmaya izin ver bildirimi dahi gelmiyor telefondan deniyorum web'de tarama yaptırabilirsem iyi olucak veriyi yazmasını istiyorum veya kemera uygulaması açıp taratabilir miyim yada qr kodun resmini yükletip resimden tarama yapabilir mi
  • 10-07-2024, 20:18:10
    #2
    ücret karşılığı yardımcı olabilirim hocam wp +905308665994
  • 10-07-2024, 20:22:08
    #3
    Selamlar, üşenmeden ChatGPT ile yaptım.


    <!DOCTYPE html>
    <html lang="en">
    <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="styles.css">
    </head>
    <body>
        <h1>QR Code Scanner</h1>
        <video id="preview" style="width:500px;height:400px;"></video>
        <div id="qr-reader-results"></div>
        <script type="module" src="script.js"></script>
    </body>
    </html>
    body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 50px;
    }
    h1 {
        color: #333;
    }
    #preview {
        margin-top: 20px;
        border: 1px solid #ddd;
    }
    #qr-reader-results {
        margin-top: 20px;
        font-size: 18px;
        color: #555;
    }
    import QrScanner from 'https://unpkg.com/qr-scanner/qr-scanner.min.js';
    document.addEventListener("DOMContentLoaded", function() {
        const video = document.getElementById('preview');
        const resultDiv = document.getElementById('qr-reader-results');
        QrScanner.WORKER_PATH = 'https://unpkg.com/qr-scanner/qr-scanner-worker.min.js';
        const qrScanner = new QrScanner(video, result => {
            console.log(result);
            resultDiv.innerText = `QR Code Detected: ${result}`;
        });
        qrScanner.start().catch(console.error);
    });
    Localde live server, wamp server gibi bişeyle çalıştırman lazım. Local dosya olarak actiginda calismiyor.
  • 10-07-2024, 20:23:18
    #4
    @Emson; dene kardeşim hata alırsan anydeskle bakalım
  • 10-07-2024, 20:44:37
    #5
    MBarisTR adlı üyeden alıntı: mesajı görüntüle
    @Emson; dene kardeşim hata alırsan anydeskle bakalım
    hocam çalışıyorda ben biraz arayüz görüntüsü falan eklemeye çalışırken sistemi çalışmaz hale getiriyorum müsaitsen bi bakalım mı ?
  • 10-07-2024, 20:48:51
    #6
    https://github.com/onurerdog4n/javas...in/reader.html

    Buyrun hocam ben yapmıştım böyle bir şey.