Membaca QR dan Barcode Menggunakan Webcam dengan html5-qrcode

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.

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:

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.