JavaScript

JavaScript QrCode Barkod Okuma ve Oluşturma – Web Tasarım & Programlama

Çağımızın gereği en önemli unsur ‘bilgi’… Dolayısıyla hayatımız bilgi merkezli bir yaklaşımla şekillenmekte ve bu yüzden günlük yaşantımızda belirli ihtiyaçlar ortaya çıkmaktadır. Bu ihtiyaçlardan en önemli ve hassasiyet gerektireni, bilginin bir yerden başka bir yere taşınması ve transfer edilmesidir. Bilginin transfer sürecinde hedef odaklı bir disiplin ile birlikte güvenlik faktörlerininde önemi göz ardı edilemeyecek derecede kritik arz etselerde biz bu içeriğimizde -bilginin transfer- süreci odalı bir teknolojiyle ilgileneceğiz. Bu teknoloji QrCode teknolojisidir.

QrCode Nedir?

İsmini Quick Response(QR) kelimelerinin baş harflerinden alan bu teknoloji ilk olarak otomotiv sanayi sektöründe kullanılmak amacıyla geliştirilmiştir ve genellikle mobil cihazların kameralarından okutulabilen ve görsel olarak kodlanmış(yahut görsele gömülmüşte diyebiliriz) veriyi eylemi gerçekleştiren cihaza transfer eden bir teknolojidir. Yapısal olarak aşağıdakine benzer niteliklerde bir kare koddan oluşmaktadır;

Peki bu kodu kendi projelerimize özel nasıl oluşturabiliriz?
QrCode’u kendi projelerimizde kullanabilmek için JavaScript temelli QRCode.js kütüphanesini yahut .NET ortamında QRCoder kütüpnanesini kullanabiliriz. Bu içeriğimizde her iki kütüphane ile bir QrCode’un nasıl oluşturulduğunu inceleyeceğiz.

QRCode.js İle JavaScript Ortamında QrCode Oluşturma

QrCode üretebilmek için tasarlanmış hazır JavaScript kütüphanesidir. Buradaki adresten indirilebilir. Kullanımı ise aşağıdaki gibi oldukça basit ve pratiktir;

 

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

 İ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.

 

 

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.

 

 

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.

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu