Hi,
Anyone has tried to embed a QR Code reader in the block so that when a recordId has been read, it can trigger a form blocks submission?
The application is that once I scan the QR CODE, the record has update as USED.
Once a QR Code shown in front of the reader, then DONE.
Would like to seek advice from the experts.
Tks a lot.
Eric
Hey @twmeric,
Just adding this thread for you to check > QR Code Generator
Itâs not a full info about your use case but you can check a few comments that can be helpful.
If the QR Code Generator can somehow understand it and update it as Done, this will be great.
Hi Eric, I havenât had this specific use case but w have been experimenting with something similar.
I would look at QR code generation tools that create a log/record when the QR code is scanned and put that in one table and link it with the table that has the QR codes. You could say to the QR Code tool âWhen QR Code is scanned, create record in Log Tableâ, and do some automations to then update the QR code record to say âUsedâ. It wouldnât auto-update on the page without a refresh, but there could be some workarounds.
Just an idea!! Happy to brainstorm more if you want.
Hi @mscroggin @Suzie, u r showing me the correct path for no code solution. It is true that those who can generate must have the function to read. Let me give a trial and see how it can go.
However, referring to some reference like below, using the code could be more versatile.
Will try to work on it and keep u updated!
@Suzie I have done a study, but probably need some helps from you and other expert to really make it happen.
The logic is as below:
Use custom code to trigger the front camera to scan the QR Code instead of building a custom block carrying the scanner function.
Opening the QR Code, which is the designated page for record update, in Chrome Browser
Automatically press the button (the only button on screen), and trigger update function in modal page. Then, press the âconfirmâ button automatically to finish updating the hidden input.
Aftering showing the designated parent page for 5 seconds, the chrome tab closes and trigger the camera again to complete the loop.
I am using the ChatGPT to work out the code below, but not really working, probably, there is something need to be adjusted and hope that those expert can have a look and realize this workaround with only a simple set of custom code for a button.
document.addEventListener('DOMContentLoaded', function() {
// Step 1: Triggering the frontend camera to scan QR Code
function startQRScan() {
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(function (stream) {
var videoElement = document.querySelector('video');
videoElement.srcObject = stream;
videoElement.play();
scanQRCode();
}).catch(function (err) {
console.error(err);
});
}
function scanQRCode() {
// QR Code scanning
const video = document.createElement('video');
const canvasElement = document.getElementById('canvas');
const canvas = canvasElement.getContext('2d');
let qrCodeId;
let scanning = true;
function drawLine(begin, end, color) {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
.then(function (stream) {
video.srcObject = stream;
video.setAttribute('playsinline', true);
video.play();
checkQrCode();
})
.catch(function (err) {
console.error(err);
});
function checkQrCode() {
if (scanning) {
canvasElement.hidden = false;
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(
video,
0,
0,
canvasElement.width,
canvasElement.height
);
const imageData = canvas.getImageData(
0,
0,
canvasElement.width,
canvasElement.height
);
const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: 'dontInvert',
});
if (code && code.data !== qrCodeId) {
qrCodeId = code.data;
console.log('QR Code found: ' + qrCodeId);
stopQRScan();
openUrlInChrome(qrCodeId);
} else {
requestAnimationFrame(checkQrCode);
}
}
}
function stopQRScan() {
scanning = false;
}
function openUrlInChrome(qrCodeId) {
const url = qrCodeId;
window.open(url, '_blank');
}
}
// Step 2: Opening the QR code in Chrome browser
function openQRCodeInChrome() {
startQRScan();
}
// Step 3 and Step 4: Automatically pressing the button to open modal and confirming it
function openAndConfirmModal() {
const button = document.querySelector('.MuiButton-containedPrimary');
if (button) {
button.click();
setTimeout(function () {
const modal = document.querySelector('.modal');
if (modal) {
modal.querySelector('.css-1ozfax3').click();
setTimeout(function () {
location.reload();
}, 5000);
}
}, 1000);
}
}
// Invoke the above functions in sequence
openQRCodeInChrome();
setTimeout(openAndConfirmModal, 15000);
});
In the designated page, the following code need to be put on custom code header:
<script>
function openAndConfirmModal() {
const button = document.querySelector('.MuiButton-containedPrimary');
if (button) {
button.click();
setTimeout(function () {
const modal = document.querySelector('.modal');
if (modal) {
modal.querySelector('.css-1ozfax3').click();
setTimeout(function () {
location.reload();
}, 5000);
}
}, 1000);
}
}
setTimeout(openAndConfirmModal, 15000);
</script>
Hope to be able to achieve the automation process with simple coding in two pages.
@Suzie Finally, I have got a helping hand to get it done: https://www.couponly.io/qrscanner
For no coder, sometime, it is still necessary to get assistance from developer, for those would like to get a reliable one, feel free to drop Hari a line to check if he could help you out.
hari vanparia
h.g.vanparia@gmail.com
My personal experience is impressive and once you can precisely list out your specifications, he could make things happen in a reasonable cost and time!