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)
qrreader.resize(l,t,x,x)
config = {fps: 100, qrbox: { width: 300, height: 150 },rememberLastUsedCamera: True}
html5QrcodeScanner = new Html5QrcodeScanner("qrreader", config)
html5QrcodeScanner.render(onScanSuccess)
End Function
Function onScanSuccess(decodedText, decodedResult)
console.log("Code scanned = " & decodedText)
html5QrcodeScanner.clear()
PlayTone(900,35)
'beeps to notify user when code scanned successfully
sessionStorage.GVS_LastBarCodeResult = decodedText
ExitBarCodeScan()
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()
html5QrcodeScanner.clear()
ScanCodeForm.hide()
End Function
Function ExitBarCodeScan()
html5QrcodeScanner.clear()
ScanCodeForm.hide()
'return to your code to with "decodedText" or sessionStorage.GVS_LastBarCodeResult
End Function