<\/div>\n

Merhaba,<\/p>\n

QrCode Nedir? QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma<\/a> ba\u015fl\u0131kl\u0131 makale akabinde klavyeye ald\u0131\u011f\u0131m\u0131z Instascan.js K\u00fct\u00fcphanesi \u0130le QrCode Okuma<\/a> makalemizden sonra s\u0131ra bir Angular projesi \u00fczerinde QrCode’un nas\u0131l okundu\u011funu incelemeye geldi.<\/p>\n

Esas\u0131nda Angular uygulamas\u0131nda bir \u00f6nceki makalemizde kullan\u0131lan instascan.js k\u00fct\u00fcphanesini kullanarak barkod taramas\u0131n\u0131 ger\u00e7ekle\u015ftirebiliriz. Lakin bizler bu i\u00e7eri\u011fimizde angular2-qrscanner<\/a> k\u00fct\u00fcphanesini kullanarak qrcode taramas\u0131n\u0131 ger\u00e7ekle\u015ftirecek ve \u00f6rneklendirmede bulunaca\u011f\u0131z.<\/p>\n

Kurulum<\/h3>\n

ng new projectname<\/code><\/strong> \nkomutuyla olu\u015fturulmu\u015f haz\u0131r bir Angular projesi \u00fczerinde \nnpm i angular2-qrscanner --save<\/code><\/strong> \nkomutunu \u00e7al\u0131\u015ft\u0131rarak ilgili k\u00fct\u00fcphaneyi uygulamaya entegre ederek kurulumu ger\u00e7ekle\u015ftiriniz.<\/p>\n

Kod Yap\u0131lanmas\u0131<\/h3>\nQrCode okumas\u0131n\u0131 ger\u00e7ekle\u015ftirece\u011finiz componentin(makalede app.components.ts dosyas\u0131 kullan\u0131lmaktad\u0131r<\/span>) .ts uzant\u0131l\u0131 dosyas\u0131n\u0131 a\u00e7arak a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmay\u0131 ger\u00e7ekle\u015ftiriniz.<\/p>\n

\r\nimport { Component, Renderer2, ViewChild, OnInit } from '@angular\/core';\r\nimport { QrScannerComponent } from 'angular2-qrscanner';\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n  _renderer2: Renderer2;\r\n  cameras: MediaDeviceInfo[] = [];\r\n\r\n  @ViewChild(QrScannerComponent) qrScannerComponent: QrScannerComponent;\r\n\r\n  constructor(renderer2: Renderer2) {\r\n    this.qrScannerComponent = new QrScannerComponent(this._renderer2);\r\n  }\r\n  ngOnInit(): void {\r\n    \/\/PC'de ki t\u00fcm cihazlar getiriliyor.\r\n    this.qrScannerComponent.getMediaDevices().then(devices => {\r\n      devices.forEach(device => {\r\n        \/\/Kameralar ay\u0131rt edilerek global tan\u0131mlanm\u0131\u015f 'cameras' dizisine at\u0131l\u0131yor.\r\n        if (device.kind.toString() === 'videoinput')\r\n          this.cameras.push(device);\r\n      });\r\n\r\n      \/\/Varsay\u0131lan olarak koleksiyondaki ilk kamera se\u00e7iliyor.\r\n      if (this.cameras.length > 0)\r\n        this.qrScannerComponent.chooseCamera.next(this.cameras[0]);\r\n\r\n      \/\/G\u00f6r\u00fcnt\u00fcde QrCode taranmas\u0131 neticesinde tetiklenecek olan callback fonksiyon tan\u0131mlan\u0131yor.\r\n      this.qrScannerComponent.capturedQr.subscribe(result => {\r\n        \/\/Tarand\u0131\u011f\u0131nda bizi uyarmas\u0131 i\u00e7in bir beep sesi ekleniyor.\r\n        var audio = new Audio(\r\n          'https:\/\/media.geeksforgeeks.org\/wp-content\/uploads\/20190531135120\/beep.mp3');\r\n        audio.play().then(re => alert(result));\r\n      });\r\n    });\r\n  }\r\n\r\n  selectCamera(cameraId: string) {\r\n    \/\/Taramada se\u00e7ilen kamera baz al\u0131n\u0131yor.\r\n    this.qrScannerComponent.chooseCamera.next(this.cameras.find(c => c.deviceId === cameraId));\r\n  }\r\n}\r\n<\/pre>\nArd\u0131ndan ilgili componentin .html uzant\u0131l\u0131 dosyas\u0131na a\u015fa\u011f\u0131daki qr-scanner tag’ini ekleyiniz.<\/p>\n\r\n<div style="width: 500px; height: 500px;">\r\n   <qr-scanner [debug]="false" [canvasWidth]="1080" [canvasHeight]="1080" [stopAfterScan]="false" [updateTime]="500">\r\n   <\/qr-scanner>\r\n<\/div>\r\n<select (change)="selectCamera($event.target.value)">\r\n   <option [value]="camera.deviceId" *ngFor="let camera of cameras">{{camera.label}}<\/option>\r\n<\/select>\r\n<\/pre>\nT\u00fcm bu i\u015flemlerden sonra uygulaman\u0131n sa\u011fl\u0131kl\u0131 \u00e7al\u0131\u015fabilmesi i\u00e7in uygulaman\u0131n ana mod\u00fcl\u00fc olan ‘app.module.ts’ dosyas\u0131n\u0131n import alan\u0131na ‘NgQrScannerModule’ mod\u00fcl\u00fcn\u00fc ekleyiniz.<\/p>\n\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\n\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { NgQrScannerModule } from 'angular2-qrscanner';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule,\r\n    NgQrScannerModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nTest<\/h3>\n\u00d6rnek ama\u00e7l\u0131 temel d\u00fczeyde yap\u0131land\u0131rd\u0131\u011f\u0131m\u0131z Angular uygulamas\u0131n\u0131 ng serve --o<\/code><\/strong> diyerek varsay\u0131lan 4200 portunda aya\u011fa kald\u0131ral\u0131m ve a\u015fa\u011f\u0131da g\u00f6rseldeki gibi yap\u0131lan test sonucu g\u00f6zlemleyelim…
\n<\/a><\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n
Not : \u00d6rnek projeyi indirmek i\u00e7in buraya<\/a> t\u0131klay\u0131n\u0131z.<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, QrCode Nedir? QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma ba\u015fl\u0131kl\u0131 makale akabinde klavyeye ald\u0131\u011f\u0131m\u0131z Instascan.js K\u00fct\u00fcphanesi \u0130le QrCode Okuma makalemizden sonra s\u0131ra bir Angular projesi \u00fczerinde QrCode’un nas\u0131l okundu\u011funu incelemeye geldi. Esas\u0131nda Angular...<\/p>\n","protected":false},"author":1,"featured_media":7400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,2144,2415,2599,2756,3018,3155],"tags":[3279,3278,3277,3276,3273,3280],"class_list":["post-14280","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-4","category-angular-5","category-angular-6","category-angular-7","category-angular-8","category-angular-9","tag-angular-9-qrcode","tag-angular-qrcode-okuma","tag-angular-qrcode-scanner","tag-angular2-qrscanner","tag-qrcode-okuma","tag-qrcode-scanner"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=14280"}],"version-history":[{"count":26,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14280\/revisions"}],"predecessor-version":[{"id":14310,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14280\/revisions\/14310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7400"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=14280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=14280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=14280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}