Merhabalar sizlere bugün basit bir şekilde laravel qr code okuma nasıl yapılacak onu anlatacağım.

Nasıl Çalışıyor?

Laravel 5.2 ile kurulu proje üzerine Vue.js ile browser üzerinden webcame bağlanarak ” mobil tarayıcı ” qr code okuyabiliyorsunuz.

Nerelerde Kullanılır ?

Bu projenizi ürünlerde ,basit düzeylerde eğlence uygulamalarınızda, cafenizde web sayfalara yönlendirmelerde kullanabilirsiniz.

Kod bloğu örneği

</p>
<p>&lt;div class=&quot;container-fluid &quot;&gt;<br />
&lt;div class=&quot; wrapper container-fluid&quot;&gt;<br />
&lt;div class=&quot;row feature-row&quot;&gt;<br />
&lt;div class=&quot;col-md-12&quot;&gt;<br />
&lt;h3&gt;Scan QR Code&lt;/h3&gt;<br />
&lt;div class=&quot;tabbable tabs-below&quot;&gt;<br />
&lt;div class=&quot;tab-content&quot;&gt;<br />
&lt;div class=&quot;tab-pane active&quot; id=&quot;one_&quot;&gt;<br />
&lt;div id=&quot;app&quot; class=&quot;panel&quot;&gt;<br />
&lt;div class=&quot;sidebar col-md-4&quot;&gt;<br />
&lt;section class=&quot;cameras&quot;&gt;<br />
&lt;h2&gt;Cameras&lt;/h2&gt;<br />
&lt;ul&gt;<br />
&lt;li v-if=&quot;cameras.length === 0&quot; class=&quot;empty&quot;&gt;No cameras found&lt;/li&gt;<br />
&lt;li v-for=&quot;camera in cameras&quot;&gt;<br />
                                                &lt;span v-if=&quot;camera.id == activeCameraId&quot; :title=&quot;formatName(camera.name)&quot; class=&quot;active&quot;&gt;@{{ formatName(camera.name) }}&lt;/span&gt;<br />
                                                &lt;span v-if=&quot;camera.id != activeCameraId&quot; :title=&quot;formatName(camera.name)&quot;&gt;<br />
                      &lt;a @click.stop=&quot;selectCamera(camera)&quot;&gt;@{{ formatName(camera.name) }}&lt;/a&gt;<br />
                    &lt;/span&gt;<br />
                                            &lt;/li&gt;<br />
                                        &lt;/ul&gt;<br />
                                    &lt;/section&gt;<br />
&lt;section class=&quot;scans&quot;&gt;<br />
&lt;h2&gt;Scans&lt;/h2&gt;<br />
&lt;ul v-if=&quot;scans.length === 0&quot;&gt;<br />
&lt;li class=&quot;empty&quot;&gt;No scans yet&lt;/li&gt;<br />
                                        &lt;/ul&gt;<br />
                                        &lt;transition-group name=&quot;scans&quot; tag=&quot;ul&quot;&gt;<br />
&lt;li v-for=&quot;scan in scans&quot; :key=&quot;scan.date&quot; :title=&quot;scan.content&quot;&gt;@{{ scan.content }}&lt;/li&gt;<br />
                                        &lt;/transition-group&gt;<br />
                                    &lt;/section&gt;<br />
                                &lt;/div&gt;<br />
&lt;div class=&quot;preview-container col-md-8&quot;&gt;<br />
                                    &lt;video id=&quot;preview&quot;&gt;&lt;/video&gt;<br />
                                &lt;/div&gt;<br />
                            &lt;/div&gt;<br />
                            &lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%7B!!%20asset('qr%2Fqr-scan%2Fapp.js')%20!!%7D%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;&lt;/div&gt;<br />
&lt;div class=&quot;tab-pane&quot; id=&quot;two_&quot;&gt;&lt;/div&gt;<br />
                    &lt;/div&gt;<br />
&lt;ul class=&quot;nav nav-tabs text-center&quot; style=&quot;margin-left: 40%;border-bottom: 0px solid #fff; }&quot;&gt;<br />
&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#one_&quot; data-toggle=&quot;tab&quot;&gt;QR Code Scanner&lt;/a&gt;&lt;/li&gt;<br />
                    &lt;/ul&gt;<br />
                &lt;/div&gt;<br />
                &lt;!-- /tabs --&gt;<br />
            &lt;/div&gt;<br />
        &lt;/div&gt;<br />
    &lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;/div&gt;<br />

Laravel projenin tamamı için github sayfasına bakabilirsiniz.

Bilmeyenler için QR Code Nedir?

QR Code, Japonya’da faaliyet gösteren ve Toyota’nın bir yan kuruluşu olan Denso Wave firması tarafından geliştirilen 2 boyutlu bir barkod sistemidir. Adını ingilizcede Çabuk Tepki anlamına gelen Quick Response kelimelerinin baş harflerinden alır.

İçeriği bir metin, web sitesi adresi, video link dahil herhangi bir veri olabilir. QR Code okuyucu bir yazılım vasıtasıyla bir cep telefonu rahatlıkla QR Code okuyabilir ve ilgili ürün veya servis sayfasını açabilir.