Html5QrcodeScanner — End to end QR Code scanner for web, not just a library
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.
This article is imported from original article at blog.minhazav.dev/qr-code-scanner-end-to-end/
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
Check the demo at blog.minhazav.dev/research/html5-qrcode.
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);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.
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
Originally published at https://blog.minhazav.dev on June 27, 2020.
