Categories: HTMLJavascript

Generate dan scan QR Code menggunakan javascript

Bismillaahirrohmaanirrohiim…

Generate dan scan QR barcode biasanya dipakai fitur di aplikasi android / ios, kali ini saya ingin membuat tutorial sederhana membuat generate QR code dan juga scan QR code menggunakan javascript.

Tentunya program ini bersifat web based, sehingga proses scan dan generate bisa dilakukan langsung dibrowser tanpa memerlukan instalasi program HP (android / ios).

Program ini berguna saat kita ingin membuat sistem web based yang ada fitur QR Code-nya, misalnya untuk scan barang pada aplikasi POS, scan kode keluar-masuk ruangan, scan produk, dan lain-lain.

Program dibawah ini telah kami coba dan berjalan secara cepat dan mudah, dengan beberapa fitur:

  • Bisa memilih kamera, jika HP depan belakang, jika di laptop bisa memilih kamera laptop, webcam, atau kamera apapun yang terpasang di laptop.
  • Hasil scan akurat, dengan disertai animasi posisi qr code-nya.
  • Hasil scan bisa dicek dan diolah menggunakan ajax atau bebas karena menggunakan javascript.
  • Ada fitur start/stop sehingga memudahkan saat menggunakan event.
  • Ada fitur generate QR code dengan javascript yang cepat dan mudah.
  • Menggunakan theme bootstrap yang familiar dan responsive diakses disemua perangkat, bisa diganti sesuai keinginan.
  • Untuk developer, aplikasi ini mudah untuk dikembangkan dan diintegrasikan dengan app web based yang sedang dibuat.

Untuk demo aplikasi Scan dan Generate QR Code bisa dilihat pada video di bawah ini:

Berikut ini source codenya:

Lalu upload ke server, wajib menggunakan https, misalnya https://domain.com/qrcode/

Buka url tersebut menggunakan browser HP/Laptop, jika ada notifikasi untuk izin akses kamera, klik Allow / Izinkan.

Nah mudah bukan, semoga bermanfaat.

Silahkan tinggalkan komentar jika ada yang ingin disampaikan.

Jika source code terproteksi dengan password, silahkan hubungi kami dengan cara klik WA di bawah ini:

Harga kode pada artikel ini Rp 10.000 (Transfer bank / Emoney), hubungi via WA di atas.

Bagikan
rasupe

Recent Posts

CPU usage tinggi pada server

Bismillaahirrohmaanirrohiim... Untuk mendeteksi cpu usage tinggi memang perkara rumit, adakalanya karena codingan bermasalah, akses ke…

2 weeks ago

Membersihkan log mongodb yang besar

Bismillaahirrohmaanirrohiim... Jika tidak dirawat dan dicek berkala, log mongodb akan semakin membesar. Bahkan sampai menghabiskan…

4 weeks ago

Cara mengakses gps di HP dengan javascript

Bismillaahirrohmaanirrohiim... Jika kita membuat website yang digunakan untuk memantau lokasi HP client, maka kita memerlukan…

4 months ago

Menghitung jarak dua titik koordinat dengan php dan javascript

Bismillaahirrohmaanirrohiim... Kali ini kita akan mencoba menerapkan rumus trigonometeri dari formula haversine, yang digunakan untuk…

4 months ago

Kemasan cleo botol kecil sering bikin tangan terluka

Bismillaahirrohmaanirrohiim... Disini saya akan berbagi pengalaman tentang susahnya membuka tutup botol cleo kecil ukuran 220ml.…

4 months ago

Solusi InsCek pada meteran PLN

Bismillaahirrohmaanirrohiim... Kali ini saya akan berbagi pengalaman tentang mati lampu yang disebabkan oleh permasalahan arus…

4 months ago