QrCode Barkod Okuma ve Oluşturma - Seditio Yazılım - Seditio CMS Türkiye

Yayınımız yeniliklerle beraber yeni sitemizden devam ediyor. Seditio.com.tr takip edin.

User profile picture

Kaan

Seditio CMS

QrCode Barkod Okuma ve Oluşturma

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;

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. Kullanımı ise aşağıdaki gibi oldukça basit ve pratiktir;

<html>
<head>
    <script src="qrcode.min.js"></script>
</head>
<body>
    <div id="qrcode"></div>
    <script type="text/javascript">
        new QRCode(document.getElementById("qrcode"), {
            text: 'barkoda cevrilecek veriyi buraya yazınız.',
            width: 250,
            height: 250,
            colorDark: 'red',
            colorLight: 'white',
            correctLevel: QRCode.CorrectLevel.H
        });
    </script>
</body>
</html>

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

 İlk olarak instascan.js kütüphanesini 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));
})

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.
qrcode barkod okuma ve oluşturma

İlginizi Çekebilir

Seditio Hızlı Menü Oluşturma Php 7.x86222020-11-25

Yorumlar

Henüz yorum yapılmamıştır.