Javascript ile QR Kod Okuma
QR kodlar, bilgiye hızlı ve kolay erişim sağlamanın modern bir yolu olarak yaygın bir şekilde kullanılmaktadır. JavaScript ile QR kod okuma işlemi yapmak, web tabanlı projelerde son kullanıcı deneyimini artırmak için etkili bir yöntemdir. Bu işlem için genellikle HTML5 teknolojileri ve çeşitli JavaScript kütüphaneleri kullanılır. JavaScript’te QR kod okumak için kullanılan en popüler kütüphanelerden biri html5-qrcode kütüphanesidir. Bu kütüphane, cihazın kamerasını kullanarak QR kodu tarayıp veriyi almanıza olanak tanır.
Mobil uyumlu ve modern bir QR kod okuyucu oluşturmak için responsive tasarım tekniklerinden yararlanılabilir. Web tarayıcılarında çalışan bu tür çözümler, Android ve iOS gibi mobil işletim sistemleriyle uyumlu olduğundan geniş bir kullanıcı kitlesine hitap eder. QR kod okuma işlemini başlatmak için kullanıcıdan kamera erişim izni istenir. Alınan izinle birlikte cihazın kamerası açılır ve QR kod tarama işlemi yapılır. Doğru bir QR kod tarandığında, taranan veri anında ekrana yansıtılabilir veya istenen bir işleme tabi tutulabilir. JavaScript ile QR kod okuma, hem etkileşimli hem de kullanıcı dostu bir web deneyimi oluşturmak için önemli bir beceridir.
Bu örnek için html5-qrcode.min.js dosyasını ekledim, yazının sonunda ki bağlantılardan gerekli dosyalara ulaşabilirsiniz.
HTML
<head>
<title>QR Kod Okuyucu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="qr-container">
<h1>QR Kod Okuyucu</h1>
<div id="reader" class="qr-reader"></div>
<p id="result">Tarama sonucu burada görünecek</p>
</div>
<script src="html5-qrcode.min.js"></script>
<script src="script.js"></script>
</body>CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f0f2f5;
font-family: Arial, sans-serif;
}
.qr-container {
text-align: center;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 400px;
}
.qr-container h1 {
font-size: 24px;
margin-bottom: 15px;
color: #333;
}
.qr-reader {
margin: 10px 0;
width: 100%;
max-width: 320px;
}
#result {
margin-top: 15px;
font-size: 18px;
color: #007bff;
}
JavaScript
const qrReader = new Html5Qrcode("reader");
function onScanSuccess(decodedText, decodedResult) {
document.getElementById("result").innerText = `Tarama sonucu: ${decodedText}`;
qrReader.stop().catch(err => console.error("Durdurma hatası:", err));
}
qrReader.start(
{ facingMode: "environment" },
{
fps: 10,
qrbox: { width: 250, height: 250 }
},
onScanSuccess,
errorMessage => {
console.warn("Hata:", errorMessage);
}
).catch(err => {
console.error("QR okuyucu başlatma hatası:", err);
});
NOT : Test için uygulamayı açtıktan sonra kamera erişimize izin vermelisiniz.
html5-qrcode.min.js dosyasını indirmek için aşağıda ki bağlantıyı kullanabilirsiniz.
https://serdarkaraca.com.tr/qrkodokuyucu/html5-qrcode.min.js
Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.
Bir Yorum Yazın