<\/div>\n

Merhaba,<\/p>\n

Bir \u00f6nceki QrCode Nedir? QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131m\u0131zda QrCode nedir ve nas\u0131l olu\u015fturulur detayl\u0131ca incelemi\u015ftik. Bu i\u00e7eri\u011fimizde ise instascan.js k\u00fct\u00fcphanesi ile QrCode okumay\u0131 inceleyece\u011fiz.<\/p>\n

\u015eimdi hi\u00e7 vakit kaybetmeksizin bir \u00f6rnek \u00fczerinden ilgili k\u00fct\u00fcphanenin kullan\u0131m\u0131n\u0131 inceleyelim. \u0130lk olarak instascan.js k\u00fct\u00fcphanesini buradaki<\/a> adresinden indirip uygulaman\u0131za dahil ediniz. Ard\u0131ndan html\/body i\u00e7erisinde uygun yere kemara g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc yans\u0131taca\u011f\u0131n\u0131z <video id=”preview”><\/video> <\/span><\/em> kodlar\u0131n\u0131 yerle\u015ftiriniz.<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n   <head>\r\n      <script src="https:\/\/rawgit.com\/schmich\/instascan-builds\/master\/instascan.min.js"><\/script>\r\n   <\/head>\r\n   <body>\r\n      <video id="preview" style="width: 500px;height: 500px;"><\/video>\r\n      <br>\r\n      <select id="cameras"><\/select>\r\n   <\/body>\r\n<\/html>\r\n<\/pre>\nBu d\u00fczenlemeden sonra art\u0131k yerle\u015ftirilen video etiketine kamera g\u00f6r\u00fcnt\u00fclerini yakalay\u0131p yans\u0131tacak ve gerekli QrCode taramas\u0131n\u0131 ger\u00e7ekle\u015ftirecek olan JavaScript kodlar\u0131n\u0131 yazabiliriz.<\/p>\n\r\n-- app.js --\r\n\r\nlet scanner = new Instascan.Scanner({ video: document.getElementById('preview') });\r\n\r\nscanner.addListener('scan', function (content) {\r\n   \/\/Barkod okundu\u011funda veriyi buras\u0131 yakalayacakt\u0131r.\r\n   alert(content)\r\n});\r\n\r\nlet cameraList = []; \/\/T\u00fcm kameralar\u0131 tutaca\u011f\u0131m\u0131z liste.\r\n\r\nInstascan.Camera.getCameras().then(function (cameras, image) {\r\n   \/\/PC'de ki t\u00fcm kameralar\u0131 alg\u0131layarak bizlere getirecektir.\r\n   this.cameraList = cameras;\r\n   cameras.forEach(element => {\r\n      \/\/Gelen kameralar select elementinde listelenmektedir.\r\n      let cameraList = document.getElementById("cameras");\r\n      let option = document.createElement("option");\r\n      option.text = element.id;\r\n      option.value = element.id;\r\n      cameraList.add(option);\r\n      scanner.start(cameras[0])\r\n   });\r\n}).catch(() => console.error(e));\r\n\r\ndocument.getElementById("cameras").addEventListener("change", event => {\r\n   \/\/Select elementinde se\u00e7ilen kameray\u0131 qr code scanner olarak belirleyen olayd\u0131r.\r\n   scanner.start(this.cameraList.find(c => c.id == event.target.value));\r\n})\r\n<\/pre>\nYukar\u0131daki kaynak kodu incelerseniz e\u011fer 3. sat\u0131rda qr code scanner olu\u015fturulmakta ve ayarlar\u0131 yap\u0131lmaktad\u0131r. Burada a\u015fa\u011f\u0131daki ayarlar\u0131da dahil ederek yapaca\u011f\u0131n\u0131z \u00e7al\u0131\u015fmay\u0131 daha da hassas hale getirebilirsiniz;<\/p>\n\r\n{\r\n   \/\/Yakalanan kamera g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fcn bas\u0131laca\u011f\u0131 html elementini belirler.\r\n   video: document.getElementById('preview'),\r\n   \/\/Eldeki g\u00f6r\u00fcnt\u00fcde s\u00fcrekli QRCode taramas\u0131 yap\u0131l\u0131p yap\u0131lmamas\u0131n\u0131 belirler.\r\n   continuous: true,\r\n   mirror: true,\r\n   \/\/Tarama neticesinde okunan QRCode verisinin g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc sonuca dahil\r\n   \/\/ederek ikinci paramere(image) iletir. Varsay\u0131lan false de\u011ferindedir.\r\n   captureImage: true,\r\n   backgroundScan: true,\r\n   \/\/Taranan bir QRCode'un bulundu\u011fu g\u00f6r\u00fcnt\u00fcde ka\u00e7 saniye aral\u0131kla\r\n   \/\/tekrar taranaca\u011f\u0131n\u0131 belirtir. Burada 10 saniye olarak belirlenmi\u015ftir.\r\n   refractoryPeriod: 10000,\r\n   \/\/Tarama g\u00f6r\u00fcnt\u00fcs\u00fcnde ka\u00e7 karenin taranaca\u011f\u0131n\u0131 belirler.\r\n   scanPeriod: 15\r\n}\r\n<\/pre>\nEk olarak a\u015fa\u011f\u0131daki fonksiyonlar\u0131da kullanabilirsiniz;<\/p>\n\nscanner.stop()<\/strong>
\nKamera g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc almay\u0131 sonland\u0131rarak kamera kapat\u0131l\u0131r.\n<\/li>\n
scanner.scan()<\/strong>
\nO anki kamera g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc almam\u0131z\u0131 sa\u011flar. Geriye ‘content’ ve ‘image’ olmak \u00fczere iki parametre d\u00f6nd\u00fcr\u00fcr. ‘addListener’ metoduna nazaran tek kullan\u0131ml\u0131kt\u0131r.\n<\/li>\nscanner.addListener(‘?’, callback)<\/strong>
\nS\u00fcrekli modda \u00e7al\u0131\u015fan fonksiyondur. ‘scan’, ‘active’ ve ‘inactive’ olmak \u00fczere \u00fc\u00e7 parametresi mevcuttur.<\/p>\n\nscanner.addListener(‘scan’, callback)<\/span>
\nKamera g\u00f6r\u00fcnt\u00fcs\u00fcnde qr code tarand\u0131\u011f\u0131 zaman tetiklenir. ‘content’ ve ‘image’ parametrelerinde de\u011ferleri d\u00f6nd\u00fcr\u00fcr.\n<\/li>\n
scanner.addListener(‘active’, callback)<\/span>
\nKamera g\u00f6r\u00fcnt\u00fcs\u00fc al\u0131nmaya ba\u015fland\u0131\u011f\u0131nda tetiklenir.\n<\/li>\nscanner.addListener(‘inactive’, callback)<\/span>
\nKamera sonland\u0131\u011f\u0131nda tetiklenir.\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\u00d6rnek Kullan\u0131m<\/strong>
\nBunun i\u00e7in a\u015fa\u011f\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc inceleyiniz;
\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 uygulamay\u0131 indirebilmek i\u00e7in buraya<\/a> t\u0131klay\u0131n\u0131z.<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bir \u00f6nceki QrCode Nedir? QRCode.js ve QRCoder K\u00fct\u00fcphanelerini Kullanarak QrCode Olu\u015fturma ba\u015fl\u0131kl\u0131 yaz\u0131m\u0131zda QrCode nedir ve nas\u0131l olu\u015fturulur detayl\u0131ca incelemi\u015ftik. Bu i\u00e7eri\u011fimizde ise instascan.js k\u00fct\u00fcphanesi ile QrCode okumay\u0131 inceleyece\u011fiz. \u015eimdi hi\u00e7 vakit kaybetmeksizin...<\/p>\n","protected":false},"author":1,"featured_media":3223,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[3272,3274,3273],"class_list":["post-14235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-instascan-js","tag-instascan-js-qrcode","tag-qrcode-okuma"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14235","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=14235"}],"version-history":[{"count":31,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14235\/revisions"}],"predecessor-version":[{"id":14268,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/14235\/revisions\/14268"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3223"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=14235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=14235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=14235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}