QR-Code scanner library for JavaScript based on ZBar and zbarjs, compiled with emscripten. However, any types of code other than QR Codes are disabled, so QRScanJS runs faster than zbarjs and is therefore more suited for lower-end systems.
You can try out QRScanJS without downloading
Download QRScanJS and include qrscan.js in your HTML:
<script type="text/javascript" src="QRScanJS/qrscan.js"></script>Add a video element to your HTML:
<video autoplay="true" id="webcam" width=320></video>In your JavaScript, you have to initialize QRScanJS by calling
QRReader.init(selector, baseurl);
selector is the querySelector of the video tag. baseurl is the path to QRScanJS from the working directory of your JavaScript. If you just cloned QRScanJS into your project next to the HTML / JavaScript code, you can use:
QRReader.init("#webcam", "QRScanJS/");
Invoking QRReader.init() will likely request permissions for camera usage from the user. If multiple cameras are found (e.g. on mobile phones) and the browser doesn't provide a way to choose between them, QRScanJS will use the environment-facing camera (back-facing camera on smartphones).
In order to initiate a scanning process, call
QRReader.scan(function (result) {
console.log(result);
});
Callback() will only be called once. If you want to scan for multiple QR Codes, you have to call QRReader.scan again.
QRScanJS is on Bower. You can install it using
bower install qrscanjsThis is the minimal example file adopted to work with bower. Mind that both the script src URL has changed as well as the second parameter to QRReader.init:
<!DOCTYPE html>
<html>
<head>
<title>QRScanJS Bower</title>
<script type="text/javascript" src="bower_components/qrscanjs/qrscan.js"></script>
</head>
<body>
<h1>My Bower project using QRScanJS</h1>
<video autoplay="true" id="webcam" width=320></video>
<ul id="list"></ul>
<script type="text/javascript">
QRReader.init("#webcam", "bower_components/qrscanjs/");
function scan() {
QRReader.scan(function (result) {
var list = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode(result));
list.appendChild(li);
setTimeout(scan, 200);
});
}
scan();
</script>
</body>
</html>decoder.js and decoder.min.js are compiled from the ZBar source code. You can generate these files yourself by following these steps:
- Install emscripten, you will need
emconfigure.emmakeandemcc - Log out and back in if emscripten wasn't already installed
- Get the latest ZBar source code:
git clone https://github.com/ZBar/ZBar; cd ZBar - Copy the
templatesdirectory and thegenerate-decoder.shscript from this project into the ZBar source code directory - Execute the
generate-decoder.shscript and wait until finished. You might want to edit the script in order to support different kinds of codes. - Minify the generated
decoder.jsfile with your favorite JavaScript minifier and copydecoder.jsand the minifieddecoder.min.jsto the QRScanJS directory
This library wouldn't have been possible without Yury Delendik's work on zbarjs, the barcode scanner for Firefox OS. My work is mostly based on his zbarjs project and his instructions on how to compile zbar to JavaScript. He licensed (most of) his code under the LGPL.
QRScanJS is licensed under the GNU Lesser General Public License, version 2.1. This means (for short) that you can use this library in both open source and commercial applications. See the LICENSE file for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent