Building a photo booth for Droidcon NYC
Heads up, we’ve moved! If you’d like to continue keeping up with the latest technical content from Square please visit us at our new home https://developer.squareup.com/blog
A month ago, my team at Square released the Reader SDK. We had the opportunity to show a demo at Droidcon NYC. How could we make payments cool?
We set up to build SquickPic, a fun Android photo booth: pay a dollar 💳, choose a filter, smile, Snap! 📸 The photo booth prints the picture and tweets it 🐦 (@SquickPic).
We decided to open source SquickPic (sources on GitHub). In this blog, we’ll go over the most interesting parts of the code:
- Face detection
- Kiosk experience
- Taking payments
- Printing with Google Cloud Print
- Tweeting 🐦
App flow
Face detection
The first step was building out face detection. We used Google Mobile Vision API and checked out the FaceTracker sample app. Nothing like copy pasting and removing what you don’t need to get to working code quickly!
The most tricky part was figuring out scaling and reversing: face detection runs on the camera bitmap and provides coordinates in that referential. The camera bitmap gets scaled up to the display, so we have to scale up our filters:
Kiosk experience
The photobooth was set up in a public space, so we locked the tablet on the photobooth app with startLockTask():
We also set the relevant activities to fullscreen:
Taking payments
This was the most important part for us! Also the simplest, just a few lines of code 💪.
Printing with Google Cloud Print
PrinterHelper makes it easy to print bitmaps by showing a system UI to select a printer, configure attributes, and then send the print job. This is great for consumer devices but not so much for a photo booth where we expect pictures to print automatically.
We bought a Selphy CP1300 and connected it to Google Cloud Print. Unfortunately, the Cloud Print Android API also shows a UI, and the HTTP API documentation left out details that we had to figure out.
Our first step was to obtain an OAuth token. We used AccountManager to request an OAuth token:
Next, we defined a Retrofit interface to list printers and send a print job:
Retrofit is backed by OkHttp, so we set up an OkHttp interceptor to add the Cloud Print OAuth token to our requests:
We converted the bitmap into a JPEG byte array and sent it as a multipart message:
Tweeting 🐦
We set up Twitter Core and used a TwitterLoginButton to authenticate via the Twitter app. Tweeting a picture requires uploading it first, and then attaching it as a media to a status update:
That’s it! We had a ton of fun building this and taking goofy selfies with Droidcon NYC attendees. Don’t hesitate to check out the sources on GitHub!
