Instascan.js Kütüphanesi İle QrCode Okuma

Merhaba,

Bir önceki QrCode Nedir? QRCode.js ve QRCoder Kütüphanelerini Kullanarak QrCode Oluşturma başlıklı yazımızda QrCode nedir ve nasıl oluşturulur detaylıca incelemiştik. Bu içeriğimizde ise instascan.js kütüphanesi ile QrCode okumayı inceleyeceğiz.

Şimdi hiç vakit kaybetmeksizin bir örnek üzerinden ilgili kütüphanenin kullanımını inceleyelim. İlk olarak instascan.js kütüphanesini buradaki adresinden indirip uygulamanıza dahil ediniz. Ardından html/body içerisinde uygun yere kemara görüntüsünü yansıtacağınız <video id=”preview”></video> kodlarını yerleştiriniz.

<!DOCTYPE html>
<html lang="en">
   <head>
      <script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
   </head>
   <body>
      <video id="preview" style="width: 500px;height: 500px;"></video>
      <br>
      <select id="cameras"></select>
   </body>
</html>

Bu düzenlemeden sonra artık yerleştirilen video etiketine kamera görüntülerini yakalayıp yansıtacak ve gerekli QrCode taramasını gerçekleştirecek olan JavaScript kodlarını yazabiliriz.

-- app.js --

let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });

scanner.addListener('scan', function (content) {
   //Barkod okunduğunda veriyi burası yakalayacaktır.
   alert(content)
});

let cameraList = []; //Tüm kameraları tutacağımız liste.

Instascan.Camera.getCameras().then(function (cameras, image) {
   //PC'de ki tüm kameraları algılayarak bizlere getirecektir.
   this.cameraList = cameras;
   cameras.forEach(element => {
      //Gelen kameralar select elementinde listelenmektedir.
      let cameraList = document.getElementById("cameras");
      let option = document.createElement("option");
      option.text = element.id;
      option.value = element.id;
      cameraList.add(option);
      scanner.start(cameras[0])
   });
}).catch(() => console.error(e));

document.getElementById("cameras").addEventListener("change", event => {
   //Select elementinde seçilen kamerayı qr code scanner olarak belirleyen olaydır.
   scanner.start(this.cameraList.find(c => c.id == event.target.value));
})

Yukarıdaki kaynak kodu incelerseniz eğer 3. satırda qr code scanner oluşturulmakta ve ayarları yapılmaktadır. Burada aşağıdaki ayarlarıda dahil ederek yapacağınız çalışmayı daha da hassas hale getirebilirsiniz;

{
   //Yakalanan kamera görüntüsünün basılacağı html elementini belirler.
   video: document.getElementById('preview'),
   //Eldeki görüntüde sürekli QRCode taraması yapılıp yapılmamasını belirler.
   continuous: true,
   mirror: true,
   //Tarama neticesinde okunan QRCode verisinin görüntüsünü sonuca dahil
   //ederek ikinci paramere(image) iletir. Varsayılan false değerindedir.
   captureImage: true,
   backgroundScan: true,
   //Taranan bir QRCode'un bulunduğu görüntüde kaç saniye aralıkla
   //tekrar taranacağını belirtir. Burada 10 saniye olarak belirlenmiştir.
   refractoryPeriod: 10000,
   //Tarama görüntüsünde kaç karenin taranacağını belirler.
   scanPeriod: 15
}

Ek olarak aşağıdaki fonksiyonlarıda kullanabilirsiniz;

  • scanner.stop()
    Kamera görüntüsünü almayı sonlandırarak kamera kapatılır.
  • scanner.scan()
    O anki kamera görüntüsünü almamızı sağlar. Geriye ‘content’ ve ‘image’ olmak üzere iki parametre döndürür. ‘addListener’ metoduna nazaran tek kullanımlıktır.
  • scanner.addListener(‘?’, callback)
    Sürekli modda çalışan fonksiyondur. ‘scan’, ‘active’ ve ‘inactive’ olmak üzere üç parametresi mevcuttur.

    • scanner.addListener(‘scan’, callback)
      Kamera görüntüsünde qr code tarandığı zaman tetiklenir. ‘content’ ve ‘image’ parametrelerinde değerleri döndürür.
    • scanner.addListener(‘active’, callback)
      Kamera görüntüsü alınmaya başlandığında tetiklenir.
    • scanner.addListener(‘inactive’, callback)
      Kamera sonlandığında tetiklenir.

Örnek Kullanım
Bunun için aşağıdaki ekran görüntüsünü inceleyiniz;
Instascan.js Kütüphanesi İle QrCode Okuma

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Not: Örnek uygulamayı indirebilmek için buraya tıklayınız.

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. 19 Mart 2020

    […] Kütüphanelerini Kullanarak QrCode Oluşturma başlıklı makale akabinde klavyeye aldığımız Instascan.js Kütüphanesi İle QrCode Okuma makalemizden sonra sıra bir Angular projesi üzerinde QrCode’un nasıl okunduğunu […]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*