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

Html5QrcodeScanner running on Android 10, Chrome

What’s new?

  • Inline scanning using a video feed from Camera or webcam
  • 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

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

Integration with other frameworks

Using with VueJs

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

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

4.2K Followers

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