Implementing QR Code Detector in Open Event Organizer App
One of the main features of Open Event Organizer App is to scan a QR code from an attendee's ticket to validate his/her entry to an event. The app uses Google's Vision API library, com.google.android.gms.vision.barcode for QR code detection. In this blog, I talk about how to use this library to implement QR code detection with dynamic frame support in an Android App. The library uses a term barcode for all the supported formats including QR code. Hence in the blog, I use the term barcode for QR code format. We use Google's dagger for dependency injections in the app. So all the barcode related dependencies are injected in the activity using the dagger. Basically, there are these two classes - BarcodeDetector and CameraSource. The basic workflow is to create BarcodeDetector object which handles QR code detection. Add a SurfaceView in the layout which is used by the CameraSource to show preview to the user. Pass both of these to CameraSource. Enough talk, let's look into the code while moving forward from here on. If you are not familiar with dagger dependency injection, I strictly suggest you have a look at some tutorial introducing dagger dependency injection. So we have a barcode module class which takes care of creating BarcodeDetector and CameraSource. @Provides BarcodeDetector providesBarCodeDetector(Context context) { BarcodeDetector barcodeDetector = new BarcodeDetector.Builder(context) .setBarcodeFormats(Barcode.QR_CODE) .build(); return barcodeDetector; } @Provides CameraSource providesCameraSource(Context context, BarcodeDetector barcodeDetector) { return new CameraSource .Builder(context, barcodeDetector) ... .build(); } You can see in the code that BarcodeDetector is passed to the CameraSource builder. Now comes preview part. The user of the app should be able to see what is actually detected. Google has provided samples showing how to do that. It provides some classes that you can just add to your projects. The classes with the links are - BarcodeGraphic, CameraSourcePreview, GraphicOverlay and BarcodeGraphicTracker. CameraSourcePreview is the custom view which is used in the QR detecting layout for preview. It handles all the SurfaceView related stuff with the additional BarcodeGraphic view which extends GraphicOveraly which is used to draw dynamic info based on the QR code detected. We use this class to draw a frame around the QR code detected. BarcodeGraphicTracker is used to receive newly detected items, add a graphical representation to an overlay, update the graphics as the item changes, and remove the graphics when the item goes away. Override draw method of BarcodeGraphic according to your need of how you want to show results on the screen once barcode is detected. The method in the Organizer app looks like: @Override public void draw(Canvas canvas) { if (barcode == null) { return; } // Draws the bounding box around the barcode. RectF rect = new RectF(barcode.getBoundingBox()); ... int width = (int) ((rect.right - rect.left)/3); int height = (int) ((rect.top - rect.bottom)/3); canvas.drawBitmap(Bitmap.createScaledBitmap(frameBottomLeft, width, height, false), rect.left, rect.top, null); ... canvas.drawRect(rect, rectPaint); } The class has a Barcode field which gets updated on barcode detection. In the above method, the field rect gets dimensions…