Html5QrcodeScanner — End to end QR Code scanner for web, not just a library

Html5QrcodeScanner running on Android 10, Chrome

What’s new?

Introduced Html5QrcodeScanner class for adding end to end QR code scanning in your existing web application. It is written on top of the existing Html5Qrcode class, which anyone can continue to use with their application's user interface. Html5QrcodeScanner supports all features of Html5Qrcode like

  • Local Image scanning
  • Scanning media captured from the camera on mobile devices

How to use Html5QrcodeScanner

Include library and placeholder HTML element

<div id="qr-reader" style="width:400px"></div> 
<! — include the library — >
<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>

Initialize in javascript

Now you can setup the scanner with these 4 lines of code.

function onScanSuccess(qrCodeMessage) { /** decoded message */ }
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

Integration with other frameworks

In general, I believe this library can be plugged into the format different frameworks expect. I started with VueJs based on the feature request #49.

Using with VueJs

I am not a VueJs expert but I tried implementing the library as a Vue component. Check mebjas/html5-qrcode/examples/vuejs for full reference.

Vue.component('qrcode-scanner', {
props: {
qrbox: Number,
fps: Number,
},
template: `<div id="qr-code-full-region"></div>`,
mounted: function () {
var $this = this;
var config = { fps: this.fps ? this.fps : 10 };
if (this.qrbox) {
config['qrbox'] = this.qrbox;
}
function onScanSuccess(qrCodeMessage) {
$this.$root.$emit('decodedQrCode', qrCodeMessage);
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-code-full-region", config);
html5QrcodeScanner.render(onScanSuccess);
}
});
<qrcode-scanner
v-bind:qrbox="250"
v-bind:fps="10"
style="width: 500px;"> </qrcode-scanner>

Future plans

  • Add examples for React integration
  • Add exmaples for Angular integration
  • Add examples for using with webpack — #54
  • Add details on how to use with Android Webview — #58, #57
  • Fix most of open issues at — mebjas/html5-qrcode/issues

How to contribute

If you are excited or interested you can contribute to this project by:

  • Raising issues for bugs faced, at Github issue page for the project. Feel free to add some related interesting discussions which could be taken up as work-item.
  • Sending a Pull Request for bugs fixed by you.
  • Rating the project with stars and shares.

Full demo

If you are interested in a web based QR Code or barcode scanner try out: https://scanapp.org (it’s based on this project).

Related articles

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Minhaz

Minhaz

Senior Software Engineer @Google. Leading team democratising computational photography for masses. Writes about programming generics & specifics.