Aft’noon / mornin / evenin,
I’ve just released another new plugin because, ya know, why not? This is my QR Code Scanner plugin (to complement my Colour QR Generator plugin), because I was using Javascript to perform this but it’s so much easier with a plugin!
This plugin enables you to scan QR codes using any camera on your device.
To use the plugin you need to add the QR Code Scanner element to the page wherever you want your video preview window for the QR scanner. In the editor of this plugin you can change the following options:
- Camera Type (Manual / Back / Front)
- Manual Camera ID
- Background Scan (whether to continue scanning when the tab is no longer active)
- Mirror Image (whether to flip the image horizontally - useful for front selfie cameras)
- Detection Beep
- Stop on Detection
- Rescan Period (amount of seconds between rescans of same QR code)
- Scan Period (period in frames between scans)
- Save Image to DB (whether to save the image frame used to decode the QR to the db)
- Filename
Once the QR Scanner becomes active on the page it will enumerate a list of cameras on your device and this can be accessed via the Cameras state. You can used the cameras index (starting at 0) in this list to set it as a Manual Camera ID. Eg. Your cameras have been enumerated to the Cameras state as:
- Front
- Back
- External
To start the Front camera you would set the Manual Camera ID to 0; the Back camera would be 1; and the External camera would be 2 (etc.). I have included an example of a way to select this within the app on the demo app
You can start / stop the scan easily in the workflow via an Element Action.
You can view a demo of this plugin in action @ https://qr-code-scanner.bubbleapps.io/
The plugin page can be viewed @ https://bubble.io/plugin/qr-code-scanner-1593701658260x162495678044438530
It’s FREE so give it a whirl and let me know how you get on!
Stuart B