Hey there Bubblers.
I’ve been searching in forum for a proper QR Code scanning functionality and I saw that there a lot of people waiting for that feature to come or at least to have a proper manual how to implement this.
So I’ve spent whole day and did “something”.
Disclaimer: this might looking not the most “optimized”, native or something else, BUT it does what need to be done.
This example might look overcomplicated but if you’ll get idea - you can handle many other scenarios.
So we need couple of plugin to make things working:
- Toolbox - * Toolbox - Toolbox Plugin | Bubble
- LOADERR: Load JavaScript Libraries - LOADERR: Load JavaScript Libraries Plugin | Bubble
- Generate/Scan QR Code - Plugins | Bubble
It might be some that all of those plugins will be not necessary in your case and you can found “programmable” workaround but yet still.
Proof of concept idea is: Scan QR Code of entity (Part) and attach it to Current User - Current AirPlane field.
- First we need to generate QR Code that we will scan after. Make sure your database entity holds Image field. In my case it will be: Entity: Part QRCode: Image
- Just create button - Generate and add Step 1 - Create New Part - Step 2 - Change entry that we created in Step 1 and add QR Code based on ID
- For a testing purpose I’m assigning Create part in Step 1 in Page State and then Displaying generated QR code right away
OK So we have something to scan. Let’s create another page which will be using for scanning.
Since we’re be scanning with our mobile phone - let’s make mobile focused design.
-
Switch your page to Mobile width
-
Add HTML element with this code.
<video id="preview"></video>
This element will hold our preview image from the front camera. -
Add LOADERR KW plugin and JavaScript to Bubble ellements. Don’t worry - they won’t be vissible on your page.
-
Click on LOADER KW ellement and add this link to Script URL - https://rawgit.com/schmich/instascan-builds/master/instascan.min.js and Set Execution on page load to No
-
Now click on Javascript to Bubble element and name it for example: Results. So your variable will be called - bubble_fn_result. Make sure you’re remember it. Check box right next to Publish Value. This element will hold our scanning results so make sure you’re set proper Data Type of what your’re scanning. In our case this entity - Part, but in your case it might be anything else.
-
Now add Scan button and go to Workflow
-
On first step we’re Loading remote js file and on Step 2 we’re adding 1000 time out so that our script would loud.
Sure we can pre-load this script on page load but I’m trying to use thing only when those are really needed -
On Step 3 we’re adding JavaScript that will handle scanning itself and will push scanned value to our Javascript to Bubble variable
let scanner = new Instascan.Scanner({ video: document.getElementById(‘preview’), mirror: false});
scanner.addListener(‘scan’, function (content) {
// Adding scanned content to Javascript to Bubble variable in Step 5
bubble_fn_result(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 1) {
scanner.start(cameras[1]);
} else {
console.error(‘No cameras found.’);
}
}).catch(function (e) {
console.error(e);
});
This script is scanning cameras on your phone and if founds front camera - switches to it without mirroring and pushes image to our HTML VIDEO element
- Now we’re creating separate Workflow that will wait for our Javascript to Bubble value appear and do something with that
- It might look like this
After value in JavaScript to Bubble element appears Do something with that. In our case: I will add scanned Part to Current User Part
- So next just browse this page with your mobile phone, accept dialog box after you click Scan (one time action) and scan generated QR COde.
So that’s it. After that you can do whatever you want to do: navigate user to a different page, hide preview screen or anything else.
Since I was not able to stop camera from scanning (even though there is documented how to stop it - GitHub - schmich/instascan: HTML5 QR code scanner using your webcam I couldn’t made it. So the workaround is to either refresh page or navigate user to a different page. But I’m sure workaround will be found here very fast.
Thanks for reading. I hope this tutorial will help to achieve your goals.
P.S. I’m not sure if this works on iOS devices since I don’t have one to test.