QR and Barcode Scanner Using Webcam with html5-qrcode

Hello, how are you all friends, back again with mantan programmer. This time we will discuss how to read QR and barcodes using a webcam. Saya di sini menggunakan library html5-qrcode to read it.

This barcode scanner really helps us when creating applications to read barcodes on products. Scanners are usually used to make it easier to sell products and speed up sales transactions.

There are a few that we will cover:

1. What is html5-qrcode?
2. Advantages of html5-qrcode
3. Supported Code Formats
4. Implementation

And you can also study the tutorial below:

Implementation of Datatables in Laravel

Login and Registration Workflow with JWT

Javascript Tutorial: Convert time am pm to 24 Hours

What is html5-qrcode?

html5qrcode is a library for reading and integrating QR codes, barcodes, and other common code scanning capabilities into your web applications. And this library supports webcams, so it’s easier when we make transactions using mobile though.

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

Advantages of 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, integrate 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.

Supported Code Formats

Reading the code that can be done is using the library Zxing-js. Here I provide some code that can be read:

https://github.com/zxing-js/library

Implementation

We’re just implementing the case. Here we will work on a project to read barcodes using a webcam. You create a form to search for item codes. Here I give an example.

<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>

Then it will look like this:

This input form will serve to display the code that we have scanned before.

Next we use the html5-qrcode library. To use the library you must use JavaScript code.

<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>

To use the front or rear camera you have to use the code below:

Front camera:

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

Back camera

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

With this library, we can easily read QRcodes and barcodes.

Thus this tutorial that I can convey, may be useful for all of you.

Thanks.