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

Html5QrcodeScanner running on Android 10, Chrome

What’s new?

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

How to contribute

Full demo

Related articles

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

https://t.me/Twenty22bot?start=r00797471960

Better Code: Generics in Typescript — Monkey Work, Baboon Chop

Using stripe payment service with React Native and fetch.

React JS and DRF — CRUD request to Django Rest Framework.

Is “React Native” is good choice for mobile app development ?

5 crucial concepts for learning d3.js and how to understand them

Assignment (due 10/6):

Angular search autosuggest with Observables

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.

More from Medium

How the Web Works: A Primer for Newcomers to Web Development (or anyone, really)

React JS Frameworks For Developers

Debugging JavaScript using Snippets in Chrome Developer Tools

Top JavaScript Skills Earnest for Developers to Include in Their Arsenal