When I started the project html5-qrcode, my goal was to make it easier to implement QR code scanning in web applications. I wanted to abstract the inner details of how the camera is accessed in HTML5 and how it’s connected with a scanning library. Some developers started to adopt the library and use it in their products. In general, the adoption trend seemed to be users trying to replicate the demo code. The library was stateful and required a series of steps to connect it with UI. In the latest version, I have implemented another wrapper called Html5QrcodeScanner which enable developers to integrate QR Code scanning with ~5 lines of code. No more statefulness!

Another key reason I implemented this end to end wrapper was: I started getting requests on how the library could be used with popular frameworks like VueJs or Webpack. Having an end to end layer makes it much easier to modularize this as a stand-alone component and plug it in inside the existing application. In the future, I plan to extend examples for other frameworks like React and Angular.

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

  • Inline scanning using a video feed from Camera or webcam
  • Local Image scanning
  • Scanning media captured from the camera on mobile devices

To show the ease of use, I have embedded the QR scanner in next section.

Please note this article is based on Jekyll, written in markdown.

Demo: embedded qr code scanner.

How to use Html5QrcodeScanner

Checkout the full example at - mebjas/html5-qrcode/examples/html5

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);

If you wonder what has changed, check out this article on how to use Html5Qrcode

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.

Essentially the idea is to wrap the library’s behavior in a component and use it in the app.

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);
    }
});

This component can then be added to HTML as

<qrcode-scanner
    v-bind:qrbox="250" 
    v-bind:fps="10" 
    style="width: 500px;">
</qrcode-scanner>

I don’t know if this is the right way to do things in Vue, but this works FWIW.

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:

  • If you find compatibility issues with certain browser, create an issue here.
  • 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.