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.