PWA Barcode scanner using HTML5_QRCodeScanner

I got HTML5_Qrcodescanner library to work in a pwa using Basic code. It uses a Javascript library that is included in your project, allowing the user to scan a barcode/qr code.

Unlike pic2scan, which requires exiting your app to run pic2scan and restarting after scanning, HTML5Scanner remains in your app and returns the scan result.

How to…

Download "html5-qrcode.min.js" from HTML5 QR Code scanning with javascript - launched v1.0.1 | Minhaz’s Blog into your project folder and put the file name, “html5-qrcode.min.js”, in the project manifest.

In your project extraheaders put…
<script src="html5-qrcode.min.js"></script>

On a form named ScanCodeForm place a container with the name "qrreader"
You’ll need a button somewhere to call StartBarCodeReader()

This is my code…

Function StartBarCodeReader()
  sessionStorage.GVS_LastBarCodeResult = "No code" 'referenced later if no code is found
  h = window.innerHeight
  w = window.innerWidth
  ScanCodeForm.Width = w
  ScanCodeForm.Height = h
  x = w * 0.8
  t = Int((h - x) / 2)
  l = Int((w - x) / 2)
  config = {fps: 100, qrbox: { width: 300, height: 150 },rememberLastUsedCamera: True}   
  html5QrcodeScanner = new Html5QrcodeScanner("qrreader", config)
End Function

Function onScanSuccess(decodedText, decodedResult) 
  console.log("Code scanned = " & decodedText)
  'beeps to notify user when code scanned successfully
  sessionStorage.GVS_LastBarCodeResult = decodedText
End Function

ScanCodeBackgroundLabel is a label I placed on ScanCodeForm taking up the full screen with backgroundColor set to rgba(0,0,0,0.2), that shades out the previous form. If the user taps on that, then exit the scanner.

Function ScanCodeBackgroundLabel_onclick() 
End Function

Function ExitBarCodeScan()
  'return to your code to with "decodedText" or sessionStorage.GVS_LastBarCodeResult
End Function
1 Like

Great solution! Thanks for posting this.

Haven’t had a chance to try this yet but will when time permits. Being able to avoid leaving and then returning to the app is great.

Plus, embedding the code in the app will protect against an external app like pic2scan from causing issues should it have a mind to change in the future. This is my biggest gripe about the current state of web programing, so many places code can change out of your control. I have a program I wrote in DOS many years ago that still works (32 bit version OS required) and until recently still used it on a daily basis. I keep a Virtual Windows 7 just for this purpose. Same for VB6, compile it once, run forever, bugs and all.

Thanks for this code, John

I see the ScanCodeBackgroundLabel_onclick() and ExitBarCodeScan() do the same thing here. In my app they do different things but cut it down for this post.