Project to explore QR code scanning in Capacitor testing on iOS and Android.
This project is based on the create-react-app typescript template. It uses the @capacitor-community/barcode-scanner plugin which implements QR code scanning on iOS and Android (but not on the web).
The QR code scanner is implemented as a Formik form field compatible with the
main FAIMS app. It renders as a button which when clicked starts the QR code
scan. While scanning we need to make the app transparent so that the camera
view is visible. The approach I've taken is to use ReactDOM.createPortal
to insert a container <div> as a child of the body of the page. This allows
me to then set visibility: hidden on the rest of the page so that there is
nothing behind my new div. The div is mostly transparent but shows a message,
a cancel button and a target square. This need to hide the main app makes it
a bit hard for this to be a plugin.
The position of the target square is not calibrated - it's where it seems to be on my Android phone. I've not done much checking of this, it may be different on e.g. a tablet device.
We need to get permission to use the camera. In this example I've made the call to check permssions in the start scan action. In the main app we'd most likely have done this already so the call would succeed.
No changes are needed to the Android project for this to work.
Create iOS project:
yarn add @capacitor/ios
npx cap add iosNeed to add a description to the request for camera permissions. Edit
ios/App/App/Info.plist and add:
<key>NSCameraUsageDescription</key>
<string>This app uses the camera to scan a QR Code.</string>