Cara menggunakan barcode scanner javascript camera

  • What’s new in version 2.x.x
  • Using the library
  • Integrating code scanner using Html5QrcodeScanner
    • Install the library
      • Install using npm
      • Load latest library from unpkg or other CDNs
    • Add placeholder HTML element
    • Initialize in javascript
    • Demo
    • Notes:
  • Html5Qrcode interface
  • All supported formats
  • Future plans
  • How to contribute
  • Related articles

The little QR code scanning library I have been maintaining since 2015 has been getting more attention recently. And with power came responsibilities, bugs, and feature requests. Some of the key features requested by developers were more reliable scanning and the ability to scan different types of bar codes. With version 2.0.0 onwards developers can scan different types of 1D codes (bar codes) and 2D codes (like QR codes or AZTEC).

This article lists out everything new in version 2.x.x. I’ll also list out the new APIs and capabilities that developers can use to integrate a more powerful code scanning capability to their web pages or apps.

Here’s the library I am taking about: mebjas/html5-qrcode, checkout demo at qrcode.minhazav.dev

Star Fork Issue Discuss

What’s new in version 2.x.x

Latest:

Cara menggunakan barcode scanner javascript camera

  1. Ability to scan different kinds of 1D codes and 2D codes.
    • See all supported formats here.
    • Scanned format type and the name returned in the success callback.
  2. More reliable code scanning, fixing issues like issue#134, issue#63, issue#140.
    • Both (1) & (2) were achieved by migrating the decoding library from Lazarsoft's library to Zxing-js.
  3. [Minor] Library now reports more granular errors to reduce debugging time for developers.
    • For example, if the library is used in HTTP url, the exact issue will be reported.

Code health fixes

  1. Entire code migrated to Typescript for scalable & less error-prone development.

  2. Several code health issues fixed based on Codacy report and now we have grade A on Codacy - , tracking issue for this refactor

Check out changelog since Version 2.0.0 for more clarity.

Using the library

The library exposes two main classes:

  • Html5QrcodeScanner - Use this to set up end to end scanner with UI, built on top of Html5Qrcode.
    • Takes care of building full user interface
    • Supports scanning using a web-cam or camera on the device with real-time camera feeds.
    • Support scanning local images on the device.
  • Html5Qrcode - lower-level library, exposes APIs to build your code scanner.

Integrating code scanner using Html5QrcodeScanner

Follow the steps below to integrate QR code or barcode scanning capabilities into your web application:

Install the library

You could install the library using npm or load it directly using some CDNS like unpkg

Install using npm

npm install --save-dev html5-qrcode

Load latest library from unpkg or other CDNs



Add placeholder HTML element

Add a placeholder HTML element to your web page. The scanning UI would be rendered in this element. Give it appropriate stylings like width or height.

 id="qr-reader" style="width: 600px">

Initialize in javascript

Now you can set up the scanner with these 4 lines of code.

function onScanSuccess(decodedText, decodedResult) {
    console.log(`Code scanned = ${decodedText}`, decodedResult);
}
var html5QrcodeScanner = new Html5QrcodeScanner(
	"qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

Demo

Notes:

  • You can customize the scanner by passing a different config object - read more.
  • The success callback has the following interface (/src/core.ts)

/** Format of detected code. */
interface QrcodeResultFormat {
    format: Html5QrcodeSupportedFormats;
    formatName: string;
}

/** Detailed scan result. */
interface QrcodeResult {
    text: string;
    format: QrcodeResultFormat,
}

/** QrCode result object. */
interface Html5QrcodeResult {
    decodedText: string;
    result: QrcodeResult;
}

type QrcodeSuccessCallback
    = (decodedText: string, result: Html5QrcodeResult) => void;

Html5Qrcode interface

If you want to build your user interface, you can make use of the public APIs exposed by Html5Qrcode class:

class Html5Qrcode {
    constructor(elementId: string, config: Html5QrcodeFullConfig) {}

    /** Start scanning. */
    start(cameraIdOrConfig: Html5QrcodeIdentifier,
        configuration: Html5QrcodeCameraScanConfig | undefined,
        qrCodeSuccessCallback: QrcodeSuccessCallback | undefined,
        qrCodeErrorCallback: QrcodeErrorCallback | undefined,
    ): Promise<null> {}

    /** Stop scanning. */
    stop(): Promise<void> {}

    /** Clear the rendered surface. */
    clear(): void {}

    /** Scan a file. */
    scanFile(
        imageFile: File,
        showImage?: boolean): Promise<string> {}

    /** Returns list of cameras in the device, invokes permission request. */
    static getCameras(): Promise<Array<CameraDevice>> {}
}

All supported formats

These are the different code formats now supported by the library, with examples:

CodeExample
QR Code
Cara menggunakan barcode scanner javascript camera
AZTEC
Cara menggunakan barcode scanner javascript camera
CODE_39
Cara menggunakan barcode scanner javascript camera
CODE_93
Cara menggunakan barcode scanner javascript camera
CODE_128
Cara menggunakan barcode scanner javascript camera
MAXICODE
Cara menggunakan barcode scanner javascript camera
ITF
Cara menggunakan barcode scanner javascript camera
EAN_13
Cara menggunakan barcode scanner javascript camera
EAN_8
Cara menggunakan barcode scanner javascript camera
PDF_417
Cara menggunakan barcode scanner javascript camera
RSS_14
Cara menggunakan barcode scanner javascript camera
RSS_EXPANDED
Cara menggunakan barcode scanner javascript camera
UPC_A
Cara menggunakan barcode scanner javascript camera
UPC_E
Cara menggunakan barcode scanner javascript camera
DATA_MATRIX
Cara menggunakan barcode scanner javascript camera

Future plans

  • Major UI overhaul - issue#207
  • Remembering last used camera - issue#85, discussion#213
  • Support setting default facing mode in Html5QrcodeScanner - issue#65
  • Fix most of open issues at - mebjas/html5-qrcode/issues

How to contribute

If you are excited or interested you can contribute to this project by:

  • If you find compatibility issues with a certain browser, create an issue here.
  • Raising issues for bugs faced, at Github issue page for the project. Feel free to add some related interesting discussions which could be taken up as work-item.
  • Sending a Pull Request for bugs fixed by you.
  • Rating the project with stars and shares.
  • Demo: HTML5 QR Code scanner
  • HTML5 QR Code scanning with javascript - launched v1.0.1
  • Support for scanning the local file and using default camera added (v1.0.5)

Bagaimana cara memakai barcode scanner?

Buka browser pada HP Android..
Izinkan akses kamera scan barcode dan QR code..
Taruh kamera HP ke barcode atau QR code..
Pop up berupa informasi atau link tujuan akan muncul..

Untuk scan barcode pakai aplikasi apa?

Aplikasi scan barcode tersebut hadir dengan beberapa jenis, baik di platform iOS hingga Android..
QR Code Reader + QR Scanner. ... .
2. QR Scanner: Barcode Scanner. ... .
3. NeoReader QR and Barcode Scan. ... .
4. BarCloud. ... .
Scandit. ... .
6. i-Nigma Reader..

Bagaimana cara Apabila barcode tidak dapat di scanning?

Cara mengatasi tidak bisa scan barcode PeduliLindungi 1. Login atau masuk lalu logour (keluar) secara berluang-ulang. 2. Aplikasi akan memberi respons otomatis sehingga fitur QR Code akan berfungsi kembali. Cara yang kedua adalah rutin membersihkan data chace aplikasi agar ruang penempatan kembali kosong.