• Contact Us
Thursday, December 22, 2022
-18 °c
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Teman Ngoding
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English
No Result
View All Result
Plugin Install : Cart Icon need WooCommerce plugin to be installed.
Teman Ngoding
No Result
View All Result
Home Tutorial Problem Solution

Membaca QR dan Barcode Menggunakan Webcam dengan html5-qrcode

admin by admin
September 15, 2022
in Problem Solution, Tutorial
0 0
0
QR and Barcode Scanner Using Webcam with html5-qrcode

QR and Barcode Scanner Using Webcam with html5-qrcode

0
SHARES
190
VIEWS
Share on FacebookShare on Twitter

This post is also available in: English

Hallo apa kabar teman semuanya, kembali lagi bersama mantan programmer. Kali ini kita akan membahas cara membaca QR dan baecode menggunakan webcame. Saya di sini menggunakan library html5-qrcode untuk membacanya.

Scanner barcode ini sangat membantu kita ketika membuat aplikasi untuk membaca barcode pada produk. Scanner biasanya digunakan untuk mempermudah saat melakukan penjualan produk dan mempercepat untuk melakukan transaksi penjualan.

Ada beberapa yang akan kita bahas:

  1. Apa itu html5-qrcode?
  2. Kelebihan html5-qrcode
  3. Format Kode yang didukung
  4. Implementasi

Dan kamu dapat mempelajari juga tutorial di bawah ini:

Implementasi Datatables di Laravel

Alur Kerja Login and Registrasi with JWT

Tutorial Javascript: Convert waktu am pm to 24 Jam

Apa itu html5-qrcode?

html5qrcode merupakan library untuk melakukan membaca dan mengintegrasikan kode QR, barcode, dan kemampuan pemindaian kode umum lainnya ke aplikasi web Anda. Dan library ini support dengan webcam, jadi mempermudah ketika kita melakukan transaksi menggunakan mobile sekalipun.

https://github.com/mebjas/html5-qrcode

Kelebihan html5-qrcode

  • Supports easy scanning using an integrated webcam or camera in smartphones (Android / IOS).
  • Supports scanning codes from files or default cameras on smartphones.
  • Recently Added Supports bar code scanning in various formats.
  • Supports two kinds of APIs
    * Html5QrcodeScanner — End-to-end scanner with UI, integrates with less than ten lines of code.
    * Html5Qrcode — Powerful set of APIs you can use to build your UI without worrying about camera setup, handling * permissions, reading codes, etc.

Format Kode yang didukung

Membaca kode yang dapat dilakukan yaitu menggunakan library Zxing-js. Di sini saya berikan beberapa code yang dapat di baca:

1D product1D industrial2D
UPC-ACode 39QR Code
UPC-ECode 93Data Matrix
EAN-8Code 128Aztec
EAN-13CodabarPDF 417
ITFMaxiCode
RSS-14
RSS-Expanded *
https://github.com/zxing-js/library

Implementasi

Kita langsung saja implementasi kasus. Di sini kita akan mengerjakan projek untuk membaca barcode menggunakan webcam. Kamu buat sebuah form untuk pencarian kode barang. Di sini saya berikan contohnya.

<div class="input-group">
    <input type="text" name="kode_barang" id="kode_barang" class="form-control" placeholder="Cari Kode Barang/ Barcode">
          <div class="input-group-append">
                <button class="btn btn-primary" id="btnsearch" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                width="20" height="20"
                viewBox="0 0 50 50"
                style=" fill:#000000;"><path d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"></path></svg>
                </button>
         </div>
</div>

Maka akan tampak seperti ini:

Form input ini akan berfungsi untuk menampilkan kode yang telah kita scan sebelumnya.

Selanjutnya kita gunakan library html5-qrcode. Untuk menggunakan library tersebut kamu harus menggunakan kode JavaScript.

<script>
const html5QrCode = new Html5Qrcode("qr-reader");
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
    /* handle success */
    console.log(`Scan result: ${decodedText}`, decodedResult);
    document.getElementById('kode').value=decodedText;
    // ...
    html5QrcodeScanner.clear();
};
const config = { fps: 10, qrbox: 250 };

// Select front camera or fail with `OverconstrainedError`.
// html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);
html5QrCode.start({ facingMode: { exact: "user"} }, config, qrCodeSuccessCallback);

}
</script>

Untuk menggunakan camera depan atau belakang kamu harus menggunakan kode di bawah ini:

Camera depan:

html5QrCode.start({ facingMode: { exact: "user"} }, config, qrCodeSuccessCallback);

Camera belakang

html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);

Dengan library ini, kita dapat dengan mudah membaca QRcode maupun barcode.

Demikian tutorial ini yang dapat saya sampaikan, semoga bermanfaat untuk kamu semua.

Terimakasih.

Previous Post

Implementasi Datatables di Laravel

Next Post

JavaScript Dasar Part 6 : If Else JavaScript

Next Post
if else javascript

JavaScript Dasar Part 6 : If Else JavaScript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Trending
  • Comments
  • Latest
Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

Tutorial CodeIgniter 4 part 1 ~ RESTful API JWT Authentication

June 2, 2022
Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

Codeigniter 4 ~ Membuat Notifikasi Menggunakan SweetAlert

June 8, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

May 30, 2022
REST API Login dan Register Node.js dengan JWT

REST API Login dan Register Node.js dengan JWT

July 28, 2022
Tutorial Codeigniter 4 ~ Login dan Register

Tutorial Codeigniter 4 ~ Login dan Register

5
Rekomendasi tempat belajar pemrograman

Rekomendasi tempat belajar pemrograman

3
Menghilangkan Public dan Index.php dari URL Codeigniter 4

Menghilangkan Public dan Index.php dari URL Codeigniter 4

2
Membuat Sitemap Otomatis Codeigniter 4

Membuat Sitemap Otomatis Codeigniter 4

1
Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022
WEB CRUD LocalStorage Menggunakan JavaScript

WEB CRUD LocalStorage Menggunakan JavaScript

September 22, 2022
DOM dan GOM Javascript

Perbedaan BOM Dan DOM Pada JavaScript

September 20, 2022
Teman Ngoding

Teman Ngoding tempat berbagi tutorial pemrograman
Read more

Categories

  • Berita
  • C++
  • Codeigniter
  • Events
  • Flutter
  • Golang
  • Java
  • Javascript
  • Laravel
  • MongoDB
  • News
  • Node JS
  • Pemrograman
  • PHP
  • Problem Solution
  • React JS
  • SQL
  • Tutorial
  • TypeScript
  • TypeScript
  • Video Codeigniter
  • Video Git
  • Video Laravel
  • Video Tutorial

Tags

ajax belajar golang belajar reactjs blog browser seluler Cara mendapatkan Uang dari Blog codeigniter codeigniter 3 codeigniter 4 codeigniter4 embed html Error Handling flutter flutter vs react native golang golang dasar html infinite scroll javascript javascript tutorial laravel laravel 8 laravel9 laravel 9 load more ajax Menggunakan Multiple select2 dan menyimpan dengan format json mongodb nodejs pdf pemrograman ajax pemrograman golang pemrograman php reactjs reactjs tutorial reactjs vs react native rest api rest api codeigniter 4 tutorial codeigniter 4 tutorial golang tutorial javascript tutorial laravel tutorial laravel 8 tutorial nodejs tutorial reactjs uang dari blog

Recent News

Access MongoDB With Node.JS

Akses MongoDB Dengan Node.JS

September 26, 2022
Teorema Structured Control

Basic Programming – Structured Control Theorem

September 23, 2022

© 2022 Teman Ngoding.

No Result
View All Result
  • Home
  • Tutorial
    • Laravel
    • Codeigniter
    • PHP
    • Golang
    • Java
    • Javascript
    • React JS
    • SQL
    • Problem Solution
  • Video Tutorial
    • Video Laravel
    • Video Codeigniter
    • C++
    • Video Git
  • Events
  • Berita
  • Donate
  • Indonesia
    • English

© 2022 Teman Ngoding.

Login to your account below

Forgotten Password?

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • English
  • Indonesia