Html5-QRCode

Lightweight & cross platform QR Code and Bar code scanning library for the web

Use this lightweight library to easily / quickly integrate QR code, bar code, and other common code scanning capabilities to your web application.

Key highlights

• 🔲 Support scanning different types of bar codes and QR codes.

• 🖥 Supports different platforms be it Android, IOS, MacOs, Windows or Linux

• 🌐 Supports different browsers like Chrome, Firefox, Safari, Edge, Opera ...

• 📷 Supports scanning with camera as well as local files

• ➡️ Comes with an end to end library with UI as well as a low level library to build your own UI with.

• 🔦 Supports customisations like flash/torch support, zooming etc.

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.

Support for scanning local files on the device is a new addition and helpful for the web browser which does not support inline web-camera access in smartphones. Note: This doesn't upload files to any server — everything is done locally.

Demo at scanapp.org	Demo at qrcode.minhazav.dev - Scanning different types of codes

We need your help!

Help incentivise feature development, bug fixing by supporting the sponsorhip goals of this project. See list of sponsered feature requests here.

Documentation

The documentation for this project has been moved to scanapp.org/html5-qrcode-docs.

• Getting started
• Supported frameworks
• Supported 1D and 2D Code formats
• Detailed API documentation

Supported platforms

We are working continuously on adding support for more and more platforms. If you find a platform or a browser where the library is not working, please feel free to file an issue. Check the demo link to test it out.

Legends - Means full support — inline webcam and file based - Means partial support — only file based, webcam in progress

PC / Mac

|

Firefox |

Chrome |

Safari |

Opera |

Edge | --------- | --------- | --------- | --------- | ------- | || | | |

Android

|

Chrome |

Firefox |

Edge |

Opera |

Opera Mini |

UC | --------- | --------- | --------- | --------- | --------- | --------- | || | | | |

IOS

|

Safari |

Chrome |

Firefox |

Edge | --------- | --------- | --------- | --------- | || | |

* Supported for IOS versions >= 15.1

Before version 15.1, Webkit for IOS is used by Chrome, Firefox, and other browsers in IOS and they do not have webcam permissions yet. There is an ongoing issue on fixing the support for iOS - issue/14

Framework support

The library can be easily used with several other frameworks, I have been adding examples for a few of them and would continue to add more.

Html5	VueJs	ElectronJs	React	Lit

Supported Code formats

Code scanning is dependent on Zxing-js library. We will be working on top of it to add support for more types of code scanning. If you feel a certain type of code would be helpful to have, please file a feature request.

Code	Example
QR Code
AZTEC
CODE_39
CODE_93
CODE_128
ITF
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
DATA_MATRIX
MAXICODE*
RSS_14*
RSS_EXPANDED*

*Formats are not supported by our experimental integration with native BarcodeDetector API integration (Read more).

Description - View Demo

See an end to end scanner experience at scanapp.org.

This is a cross-platform JavaScript library to integrate QR code, bar codes & a few other types of code scanning capabilities to your applications running on HTML5 compatible browser.

Supports: - Querying camera on the device (with user permissions) - Rendering live camera feed, with easy to use user interface for scanning - Supports scanning a different kind of QR codes, bar codes and other formats - Supports selecting image files from the device for scanning codes

How to use

Find detailed guidelines on how to use this library on scanapp.org/html5-qrcode-docs.

Demo

Scan this image or visit blog.minhazav.dev/research/html5-qrcode.html

For more information

Check these articles on how to use this library:

• QR and barcode scanner using HTML and JavaScript
• HTML5 QR Code scanning — launched v1.0.1 without jQuery dependency and refactored Promise based APIs.
• HTML5 QR Code scanning with JavaScript — Support for scanning the local file and using default camera added (v1.0.5)

Screenshots

Figure: Screenshot from Google Chrome running on MacBook Pro

Documentation

Find the full API documentation at scanapp.org/html5-qrcode-docs/docs/apis.

Extra optional configuration in start() method

Configuration object that can be used to configure both the scanning behavior and the user interface (UI). Most of the fields have default properties that will be used unless a different value is provided. If you do not want to override anything, you can just pass in an empty object {}.

fps — Integer, Example = 10

A.K.A frame per second, the default value for this is 2, but it can be increased to get faster scanning. Increasing too high value could affect performance. Value >1000 will simply fail.

qrbox — QrDimensions or QrDimensionFunction (Optional), Example = { width: 250, height: 250 }

Use this property to limit the region of the viewfinder you want to use for scanning. The rest of the viewfinder would be shaded. For example, by passing config { qrbox : { width: 250, height: 250 } }, the screen will look like:

This can be used to set a rectangular scanning area with config like:

let config = { qrbox : { width: 400, height: 150 } }

This config also accepts a function of type

/**
  * A function that takes in the width and height of the video stream 
* and returns QrDimensions.
* 
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
    (viewfinderWidth: number, viewfinderHeight: number) => QrDimensions;

This allows y