Creating a Barcode Scanner using Firebase MLKit

This story is third in the part of the series, MLKit for Mobile Developers.
If you’re not quite caught up, you can start here:

Creating a Credit Card Scanner using Firebase MLKit

Series Pit Stops

• Creating a Google Lens clone using Firebase ML Kit
• Creating a Credit Card Scanner using Firebase ML Kit
• Creating a Barcode Scanner using Firebase ML Kit (You are here)
• Identifying Places in a provided Image using Firebase ML Kit
• Building a “Pokédex” clone using Firebase ML Kit and TensorFlow Lite
• Implementing Smart Replies in an app using Firebase ML Kit
• Recreating Google Translate using Firebase’s ML Kit and Cloud Translate API
• Building a real-time object detection app using Firebase ML Kit
• Creating an offline translation app using Firebase ML Kit
• Blink detection in Android using Firebase ML Kit

Following up from the earlier articles on Image Labelling and Text Recognition APIs, in this post I’ll be covering the third API, i.e. the Barcode Scanner API and how you can build powerful features in your app around it.

The Barcode Scanner API, allows us to read data encoded using most of the barcodes we encounter in our daily lives.

Before we get started, here are some screenshots from the app which showcase the end result :

Contrary to the 2 APIs we covered earlier, there is no cloud variant of this API albeit, all the processing happens on the device itself.

Hence as a result, this API is free of any cost!
Yes, you heard me right, there is no charge for using this API whatsoever since all the processing happens on the device itself.

One more thing about this API is that it also works when your device isn’t connected to the internet! #buildingForTheNextBillions

The code for the sample app above can be found over here, feel free to fork it and follow along :

the-dagger/MLKitAndroid

So without any delay, let’s get started!

• Setup Firebase in your project and add the vision dependency
  This is a simple one, simply setup firebase in your project. You can find a good tutorial here.
  In order to use this API, you also need to add the following dependencies.

• Implement Camera functionality in your app
  The Vision API needs an image to extract the data from, so either create an app that lets you upload images from the gallery or create an app that uses the Camera APIs to click a picture and use it instead.
  I found this library to be pretty handy and easy to use instead of the framework Camera APIs so this is what I end up using.
• Use the Bitmap to make the API call
  If you used the library above, it directly provides you with a Bitmap of the captured image which you can use to make an API call.

In the above code snippet, we first create a FirebaseVisionImage from the bitmap.

Followed by that, we create an instance of FirebaseVisionBarcodeDetector which is used to recognize barcodes in a supplied Image.

Lastly we pass the Image to the detectInImage() method and let the detector detect text from the image.

We have a success and a failure callback which contains a list of FirebaseVisionBarcode objects containing all the detected barcodes and an exception respectively.

Further, we can loop over the above list and get information contained in each and every Barcode that was detected.

This API can also detect the type of data contained in the scanned Barcode which you can use to handle every type of barcode differently.

For example, you may want to open a browser in case the Barcode contained a URL and make a call if it contained a phone number.
You can refer to the code pasted below to see this in action.

All the available types are outlined in the BarCodeValueType Interface.

If you want to play around with the app shown in the screenshots, you can build it from the GitHub repository I linked above and it should work well after adding it to your Firebase Project.

And that’ll be all for this one, I’ll be off to exploring the remaining MLKit APIs so expect articles for them soon enough!

Thanks for reading! If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment 💬 below.
Have feedback? Let’s connect on Twitter.