Bir Angular Projesinde QrCode Tarama

Merhaba,

QrCode Nedir? QRCode.js ve QRCoder 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 incelemeye geldi.

Esasında Angular uygulamasında bir önceki makalemizde kullanılan instascan.js kütüphanesini kullanarak barkod taramasını gerçekleştirebiliriz. Lakin bizler bu içeriğimizde angular2-qrscanner kütüphanesini kullanarak qrcode taramasını gerçekleştirecek ve örneklendirmede bulunacağız.

Kurulum

ng new projectname
komutuyla oluşturulmuş hazır bir Angular projesi üzerinde
npm i angular2-qrscanner --save
komutunu çalıştırarak ilgili kütüphaneyi uygulamaya entegre ederek kurulumu gerçekleştiriniz.

Kod Yapılanması

QrCode okumasını gerçekleştireceğiniz componentin(makalede app.components.ts dosyası kullanılmaktadır) .ts uzantılı dosyasını açarak aşağıdaki çalışmayı gerçekleştiriniz.

import { Component, Renderer2, ViewChild, OnInit } from '@angular/core';
import { QrScannerComponent } from 'angular2-qrscanner';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  _renderer2: Renderer2;
  cameras: MediaDeviceInfo[] = [];

  @ViewChild(QrScannerComponent) qrScannerComponent: QrScannerComponent;

  constructor(renderer2: Renderer2) {
    this.qrScannerComponent = new QrScannerComponent(this._renderer2);
  }
  ngOnInit(): void {
    //PC'de ki tüm cihazlar getiriliyor.
    this.qrScannerComponent.getMediaDevices().then(devices => {
      devices.forEach(device => {
        //Kameralar ayırt edilerek global tanımlanmış 'cameras' dizisine atılıyor.
        if (device.kind.toString() === 'videoinput')
          this.cameras.push(device);
      });

      //Varsayılan olarak koleksiyondaki ilk kamera seçiliyor.
      if (this.cameras.length > 0)
        this.qrScannerComponent.chooseCamera.next(this.cameras[0]);

      //Görüntüde QrCode taranması neticesinde tetiklenecek olan callback fonksiyon tanımlanıyor.
      this.qrScannerComponent.capturedQr.subscribe(result => {
        //Tarandığında bizi uyarması için bir beep sesi ekleniyor.
        var audio = new Audio(
          'https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3');
        audio.play().then(re => alert(result));
      });
    });
  }

  selectCamera(cameraId: string) {
    //Taramada seçilen kamera baz alınıyor.
    this.qrScannerComponent.chooseCamera.next(this.cameras.find(c => c.deviceId === cameraId));
  }
}

Ardından ilgili componentin .html uzantılı dosyasına aşağıdaki qr-scanner tag’ini ekleyiniz.

<div style="width: 500px; height: 500px;">
   <qr-scanner [debug]="false" [canvasWidth]="1080" [canvasHeight]="1080" [stopAfterScan]="false" [updateTime]="500">
   </qr-scanner>
</div>
<select (change)="selectCamera($event.target.value)">
   <option [value]="camera.deviceId" *ngFor="let camera of cameras">{{camera.label}}</option>
</select>

Tüm bu işlemlerden sonra uygulamanın sağlıklı çalışabilmesi için uygulamanın ana modülü olan ‘app.module.ts’ dosyasının import alanına ‘NgQrScannerModule’ modülünü ekleyiniz.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgQrScannerModule } from 'angular2-qrscanner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgQrScannerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Test

Örnek amaçlı temel düzeyde yapılandırdığımız Angular uygulamasını ng serve --o diyerek varsayılan 4200 portunda ayağa kaldıralım ve aşağıda görseldeki gibi yapılan test sonucu gözlemleyelim…
Bir Angular Projesinde QrCode Tarama

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

Not : Örnek projeyi indirmek için buraya tıklayınız.

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*