Draw With Your Face

Development BLOG - about

Draw With Your Face is a game for Google+ Hangouts created by Aaron Meyers and OKFocus. Some of the mechanics will be familiar to players of other drawing games: players take turns trying to get other players to guess a word with a drawing.

As the name suggests, Draw With Your Face adds a new twist: using face tracking, players create their drawings hands-free using just their face! Its fast-paced and funny. And fun!

Draw With Your Face is a part of Google’s Hangouts Hackathon.

a Google+ Hangouts API experiment by Aaron Meyers & OKFocus

    5 / 25

  1. Saving Images with HTML5 Canvas and App Engine’s Blobstore API

    So while we’re busy making the best hands-free, sound-activated drawing tool ever we figured saving your creations to share with your friends would be pretty important. I took some time yesterday morning to set our App Engine instance up with some image saving capabilites which I’ll share in this post. We’re doing some cool stuff here like sending an encoded image from an HTML5 canvas cross-domain and then saving it to the App Engine Blobstore (an experimental feature).

    Let’s start with our face drawing tool. The high-level mechanics of the tool are quite simple: we take data from the Hangouts API about face position and apply that data to a HTML5 ‹canvas› element about five times a second. You can draw to your heart’s content but that data will never get saved unless we do something about it. So here’s what we did about it: Once a drawing is complete, we stop the canvas from updating and save it with the native toDataUrl() method. Finally, we send it off to our Google App Engine instance for safe keeping.

    The below JavaScript is pretty simple. We’re just grabbing a canvas element, encoding it to a base64 PNG, and then sending that off to a server with the help of jQuery.

    https://gist.github.com/2783870

    What’s happening on our App Engine instance is a little more interesting. We use the Blobstore API, which allows us to create and serve data objects, called blobs. The Blobstore creates a blob from a file’s contents and returns a reference to the blob, called a blob_key, which can be used to serve the blob. Check out the UploadHandler class in the code snippet below, this is where everything gets blobby.

    https://gist.github.com/2783865

    You’ll note that we’ve set cross origin resource sharing header to accept data from wherever. This is potentially hazardous, although is suitable for our testing in development. On line 27 to 29 you’ll see we take the “imgdata” parameter from our JavaScript post request, parse it so we grab just the image data, and finally decode the encoded string.

    The next few lines (32 to 42) are where all the Blobstore API stuff happens. On line 32 we create a PNG and then in the following “with” statement we open the Blob that was just created and pipe in our decode image data. When that is complete, we finalize the file. I don’t really know what is happening here at a lower level, although I can take a guess. My guess is that a Google engineer takes a look at my code and laughs at my Python literacy with his buddies. After the file has been finalized we are safe to get the file’s blob key and save it to our App Engine datastore. We do this by creating a new Drawing object with our image’s blob key. In the very last bit of code in this method (lines 45 and 46) we simply respond to our JavaScript with the location of the image.

    I hope this sheds some light on how to use base64 data from a canvas and save it to an App Engine instance. All in all, I found the Blobstore API pretty easy to work with once I understood what was going on conceptually and technically. Its flexibility is pretty cool and could address a bunch of usecases, including drawing with your face.

    Jonathan Vingiano — @jgv

    4 notes

    Notes:

    1. fuk-the-rest reblogged this from okfocus
    2. okfocus1 reblogged this from drawwithyourface