Generate QR Scanner In Laravel

Generate QR Scanner In Laravel

Friends, in today’s date, a QR code scanner has become so important that today we make payments only through QR code. Our PhonePe, Google Pay, our courier system, everything works on the basis of QR code.

So in today’s tutorial we will learn to make a QR code scanner with the help of JavaScript and Laravel so that with its help we can scan any QR code and get the code or information hidden inside it and get our work done.

  • Download html5-qrcode scanner library from github
  • Paste it inside public folder in laravel
  • Create a blade template for qr code scanner and paste this code:
<script src="{{ URL::asset('QR/node_modules/html5-qrcode/html5-qrcode.min.js'); }}"></script>

<style>
.result{
background-color: green;
color:#fff;
padding:20px;
}
.row{
display:flex;
}
</style>
<div class="row">
<div class="col">
<div style="width:500px;" id="reader"></div>
</div>
<div class="col" style="padding:30px;">
<h4>SCAN RESULT</h4>
<div id="result">Result Here</div>
</div>
</div>

<script type="text/javascript">

function onScanSuccess(qrCodeMessage) {
document.getElementById('barcode').value = qrCodeMessage;
html5QrcodeScanner.clear();
}
function onScanError(errorMessage) {
//handle scan error
}

var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 });

html5QrcodeScanner.render(onScanSuccess, onScanError);

</script>

Leave a Reply