qrcode-reader is a jQuery plugin implementing a browser interface for the cozmo jsQR QR code reading library.
jsQR is designed to be a completely standalone library for scanning QR codes: the current plugin redistributes the standalone jsQR.js browser script under the Apache 2.0 license. In principle a different library (which should provide the same interface) could be used.
qrcode-reader implements a web GUI to make use of the webcam available to the browser client in order to scan QR Codes, based on the example provided by jsQR at
Demo available at
Include files from the dist folder:
qrcode-reader initialization should be executed after document ready, for example:

Please note that, in order to use the client’s webcam, some browsers may require the content to be served over HTTPS (Chrome requires that).
qrcode-reader binds the click of the jQuery target element to the opening of the QRCode reader widget interface. The plugin keeps a single instance of the widget across the page, resetting the options according to the clicked bound element.
Options can be specified via data-attributes (with data-qrr-* prefix) on the target element, or at runtime, when binding the element. Runtime options have precedence over the data-attributes options.
Example of options in data attributes

Example of options at runtime

$(“#openreader-btn”).qrCodeReader({  target: “#target-input”,  audioFeedback: true,  multiple: true,  skipDuplicates: false,  callback: function(codes) {    console.log(codes);  }});
Available options and defaults
qrcode-reader provides the following options:
// single read or multiple readingsmultiple: false,  // only triggers for QRCodes matching the regexpqrcodeRegexp: /./,  // play “Beep!” sound when reading qrcode successfully audioFeedback: true,  // in case of multiple readings, after a successful reading,// wait for repeatTimeout milliseconds before trying for the next lookup. // Set to 0 to disable automatic re-tries: in such case user will have to // click on the webcam canvas to trigger a new reading tentativerepeatTimeout: 1500,  // target input element to fill in with the readings in case of successful reading // (newline separated in case of multiple readings).// Such element can be specified as jQuery object or as string identifier, e.g. “#target-input”target: null,  // in case of multiple readings, skip duplicate readingsskipDuplicates: true,   // color of the lines highlighting the QRCode in the image when foundlineColor: “#FF3B58”, // In case of multiple readings, function to call when pressing the OK button (or Enter), // in such case read QRCodes are passed as an array. // In case of single reading, call immediately after the successful reading // (in the latter case the QRCode is passed as a single string value)callback: function(code) {} 
Overriding defaults
The $.qrCodeReader object gives access to the defaults settings.
$.qrCodeReader.defaults.repeatTimeout = 2000;
allows you to set the default repeat timeout globally, in case you have different qrcode-reader widgets associated with different buttons.
Since the library itself does not include directly the jsQR script, but it loads it dynamically on initialization, you may need to re-address the path to it.
$.qrCodeReader.jsQRpath = “”;
The same for the beep feedback sound (you can replace it with your preferred audio clip):
$.qrCodeReader.beepPath = “”;
Advanced bindings
In some special cases you may want to re-bind your button conditionally (e.g. you may want the click on the button to open the qrcode-reader widget only if the target input is empty): to do so you have to unbind the click.qrCodeReader event and re-bind the click with a conditional call:
  $(“#openreader-btn”).qrCodeReader({    target: “#target-input”,    callback: function(code) {    // do something with the read QRCode    }  }).off(“click.qrCodeReader”).on(“click”, function(){    var qrcode = $(“#target-input”).val().trim();    // if a value is already in the target input    if (qrcode) {     // do something with the value already present in the input    } else {      // otherwise open a qrcode reader widget      $;    }  }); 

Give feedback on ignored duplicate readings
Improve examples page

GitHub Repo