We needed to implement QR code scanner functionality to confirm that users met with each other. Where one user shows QR code in their app and the other user needs to scan that QR code from the app.
To implement this we needed two things
QR CODE Generator (Which encode data)
QR CODE Scanner (Which decode data)
NOTE: Many times the scanner library does not scan QRs of all libraries. So you need to select a library accordingly.
Where we got stuck?
Once we got the requirement we decided to make POC for that. We followed the steps given in the library documentation and created a nice demo where we generate QR code with required encrypted data which was decode by the integrated QR scanner. We tested this after adding an app to the home screen and it worked.
Unfortunately we tested this in Android device and not in an IOS device. We knew IOS PWA supports camera features but were unaware that it does not support streaming in camera. Hence the QR scanning did not work in IOS PWA.
We had committed to deliver this feature to our client as we had tested the POC
We were able to catch and handle errors generated while the user tried to scan QR code in and IOS device. So we decided to handle this by checking QR supportiveness of the devices before the user reached that screen. If the user is on an unsupported device we would not show the user scan button, instead of that we show the user an OTP screen that they can ask to other users. The OTP screen for other users has a toggle switch between the QR code and the OTP screen to manage the flow accordingly.
How should you start?
1) First understand the requirements clearly. Make small POC or demo before committing anything in PWA as there are too many things that are still not supported in IOS devices.
2) Find out a workaround that fulfils the system requirement without bothering users.
3) Select libraries whose community is more active and supports the latest version of the technologies being used.