Currently we have in-built QR code scanner in Salesforce. But problem with this scanner is that it only supports salesforce mobile app and some clients wants to use scanner through desktop browser which can scan QR Code using any camera attached to the desktop.
So I have found a custom solution for this so that you can scan QR code either by uploading image file or by scanning file through camera.
Let’s jump to the solution now. Download js file from here and upload it in static resource and name it as ‘Html5QRCode’.
Now create a visualforce page by pasting below code-
<apex:page >
<head>
<title>Html-Qrcode Demo</title>
<apex:includeScript value="{!$Resource.Html5QRCode}"/>
<script>
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
docReady(function() {
var resultContainer = document.getElementById('qr-reader-results');
var lastResult, countResults = 0;
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 });
function onScanSuccess(qrCodeMessage) {
alert(qrCodeMessage);
window.location = '/' + qrCodeMessage;
}
// Optional callback for error, can be ignored.
function onScanError(qrCodeError) {
// This callback would be called in case of qr code scan error or setup error.
// You can avoid this callback completely, as it can be very verbose in nature.
}
html5QrcodeScanner.render(onScanSuccess, onScanError);
});
</script>
</head>
<body>
<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>
</body>
</apex:page>Currently I am redirecting user after successful scanning QR code. Based on scan success or failure, you can write your own logic in onScanSuccess and onScanError function as shown in above code.
Preview:
Reference: https://blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1/
SFDC Arjuna 