Building an online Photo Booth app with Aviary

A few weeks ago at SXSW I had the opportunity to meet Ari Fuchs, developer evangelist at Aviary. After a few rounds of birthday drinks (I had just turned 24), I slurred a promise to him that I would play around with Aviary’s API.

883382_10151279728036612_1373695968_o

Aviary provides an API that lets you put instagram-esque filters and all sorts of image editing capabilities to your web or mobile app. As an amateur instagrammer, I’ve always appreciated the ability to make an ordinary picture look good so this promise was actually one that I was excited to fulfill.

Inspired by Sendgrid’s Photo Booth at their SXSW party, I decided to build a virtual Photo Booth online.

fd17751a89b111e2895222000aaa0568_7

Game Plan:

  • Use OpenTok’s getting started tutorial to build a simple group video chat app.
  • When user clicks on a button, snap a picture of each video by calling getImgData
  • Use HTML5 canvas to stitch all the images together
  • Pass the stitched image into Aviary and let it do its magic!

OpenTok provides a live video chat API. I started with a base nodejs project that uses each url as a video chat room. publisher is a video object of myself, and subscriber is the video object of other people’s streams that I’m watching or listening to.

To snap a picture of publisher or subscriber objects, call their ‘getImgData’ method to return a base64 encoded image string. Here is a code snippet iterating through an array of subscribers, getting image data, and displaying them in image tags.

Screen Shot 2013-03-28 at 10.00.27 AM

To stitch the images together, draw each image onto a canvas and then retrieve a base64 string representation of the canvas. Since Aviary’s API requires an image element or the image element’s ID, I take the base64 image string from the canvas and put it into an image element.

Screen Shot 2013-03-28 at 10.08.28 AM

Using Aviary’s API is the simplest part of this process. First you initialize Aviary’s Feather editor. The required fields here are your apiKey and apiVersion. Everything else is included by default. I also defined an onSave function handler so I can display the processed image to the user and automatically close the editor.

Screen Shot 2013-03-28 at 10.12.33 AM

After initializing the Feather editor, simply launch it whenever some clicks on a button

Screen Shot 2013-03-28 at 10.21.48 AM

And just like that, OpenTok+Aviary Photo Booth was born. Try it out! The code is open sourced and available on Github, feel free to fork it and do cool things.

If you are available on the weekend of April 6th, 2013, we are proud sponsors of Photo Hack Day 4 and we would love to see you there at Facebook HQ in Menlo Park for a full weekend of Photo-Centric Awesomeness! We will be giving away Bit Coins for the best use of OpenTok API.

If you can’t join us at the hackathon, no worries. Fork our Photo Booth project and add something cool (or find a bug in our code and send a pull request) and we will mail you our very own TokBox Wristband so you can go fist-bumping!