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 https://cozmo.github.io/jsQR/
Demo available at https://mauntrelio.github.io/demos/qrcode-reader/
Include files from the dist folder:
<!-- qrcode-reader core CSS file -->
<link rel="stylesheet" href="css/qrcode-reader.min.css">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- qrcode-reader core JS file -->
<script src="js/qrcode-reader.min.js"></script>qrcode-reader initialization should be executed after document ready, for example:
HTML:
<input type="button" id="openreader-btn" value="Scan QRCode"/>Javascript:
$("#openreader-btn").qrCodeReader();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.
<input type="text" id="target-input"/>
<input type="button" id="openreader-btn"
data-qrr-target="#target-input"
data-qrr-audio-feedback="false"
value="Scan QRCode"/>HTML:
<textarea id="target-input"></textarea>
<input type="button" id="openreader-btn" value="Scan QRCode"/>Javascript:
$("#openreader-btn").qrCodeReader({
target: "#target-input",
audioFeedback: true,
multiple: true,
skipDuplicates: false,
callback: function(codes) {
console.log(codes);
}
});qrcode-reader provides the following options:
// single read or multiple readings
multiple: false,
// only triggers for QRCodes matching the regexp
qrcodeRegexp: /./,
// 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 tentative
repeatTimeout: 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 readings
skipDuplicates: true,
// color of the lines highlighting the QRCode in the image when found
lineColor: "#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) {} The $.qrCodeReader object gives access to the defaults settings.
E.g.:
$.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 = "https://www.example.com/jsQR/jsQR.js";The same for the beep feedback sound (you can replace it with your preferred audio clip):
$.qrCodeReader.beepPath = "https://www.example.com/audio/beep.mp3";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
$.qrCodeReader.instance.open.call(this);
}
});- Give feedback on ignored duplicate readings
- Improve examples page
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent