Skip to content
A cross platform HTML5 QR code reader
Branch: master
Clone or download

Latest commit

mebjas Merge pull request #11 from AmauriC/patch-1
Typo on jquery filename
Latest commit 587efb9 Mar 6, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
minified Updated code, readme and screenshots Feb 28, 2020
screenshots Added link to blog article on how to use the library Feb 28, 2020 Typo on jquery filename Mar 4, 2020
html5-qrcode.js Updated code, readme and screenshots Feb 28, 2020
jsqrcode-combined.js library added Oct 28, 2015 Updated demo link and license. Feb 28, 2020

HTML5-QRCode jQuery

A cross-platform HTML5 QR code reader as a jQuery plugin.

Description - View Demo

This is a cross-platform jQuery library to create a QRcode reader for HTML5 compatible browser. It comes with the option to scan QR Code, Stop scanning, Switch Camera and get info on camera.

How to use?

Add an element you want to use as placeholder for QR Code scanner

<div id="reader"></div>

Add jQuery library, jsqrcode-combined.js and html5-qrcode.js (or their minified versions).

<script src="./jquery.js"></script>
<script src="./jsqrcode-combined.js"></script>
<script src="./html5-qrcode.js"></script>

To get a list of supported cameras, query it using

  function (devices) {
     * devices would be an array of objects of type:
     * { id: "id", label: "label" }
    if (devices && devices.length) {
      var cameraId = devices[0].id;
      // .. use this to start scanning.
  }, function (error) {
    // handle errors

Once you have the camera id from, start camera using

  function (qrCodeMessage) {
    /* do something when code is read */
  }, function (errorMessage) {
    /* show read errors */
  }, function (errorMessage){
    /* the video stream could be opened */
  { fps: 10 });

To stop using camera and thus stop scanning, call



For more information

Check this article on how to use this library


screenshot Figure: Screenshot from Google Chrome running on Macbook Pro

Figure: Screenshot from Google Chrome running on Android-based Pixel 3


Following methods are available in this library

 * Initializes QR code scanning on given element.
 * @param: cameraId (int) - which camera to use
 * @param: qrcodeSuccessCallback (function) - callback on success
 *              type: function (qrCodeMessage) {}
 * @param: qrcodeErrorCallback (function) - callback on QR parse error
 *              type: function (errorMessage) {}
 * @param: videoErrorCallback (function) - callback on video error
 *              type: function (errorMessage) {}
 * @param: config extra configurations to tune QR code scanner.
 *          Supported fields:
 *           - fps: expected framerate of qr code scanning. example { fps: 2 }
 *               means the scanning would be done every 500 ms.
html5_qrcode: function(
  config) {}

 * Stops streaming QR Code video and scanning.
html5_qrcode_stop: function() {}

 * Gets the count of number of available cameras.
 * @param onSuccessCallback (Function) called when camera count is available.
 *              type: Function (Array [{ id: String, label: String }]) {}
 *              This argument is required.
 * @param onErrorCallback (function) called when enumerating cameras fails.
 *              type: Function (String)
html5_qrcode_getSupportedCameras: function(
  onSuccessCallback, onErrorCallback) {}


The decoder used for the QRcode reading is from LazarSoft

You can’t perform that action at this time.