Christian Heilmann

A $40 photobooth for your event – powered by WebRTC and MaKey MaKey

Tuesday, November 13th, 2012 at 12:52 pm

If you’ve been at Mozfest in London, you might have seen me stand next to a weird contraption of cables, tinfoil-covered squares and my computer. Here is what it looked like in action:


This was the so-called Interaction cam and here are the photos people took with it. This is how it works:

  • You put your hand on the pad on the left – this should stay there the whole time
  • You shoot a photo of yourself touching the pad on the right
  • If you like it, you touch the second pad from the right
  • Or you can discard it by touching the second pad to the left

You can also use the camera with more than one person. If one of you puts his hand on the left pad and the other on the right shaking hands, high-fiving or hugging would trigger the camera:


The camera stores the photos on the hard drive if you are offline or you can upload them to immediately.

You can have the Interaction Cam for your event. All you need is a computer with a camera and one of the new browsers (Chrome, Firefox Nightly – Opera coming soon). Out-of-the box you can use the Space bar to take a photo, and the arrow right and left keys to upload or take another photo.

In order to make the pads work (and you can use anything that is an electrical conductor – fruit, water, vegetabless…) you need a MaKey MaKey and connect the appropriate parts of the MaKey MaKey (left, right, space and grounding) to the pads.

Your own cam – step by step

Here’s the step by step to have the camera for your event:

  • Have a laptop with a camera and Chrome or Firefox Nightly
  • Make sure to enable WebRTC in Firefox by typing “about:config”, saying yes that you want to make changes, finding the “media.navigator.enabled” entry and setting it to true
  • Make sure you have a PHP enabled local server if you want to keep the photos offline and not rely on uploading to the web (MAMP for Mac or XAMPP for Window – Linux folk know what to do)
  • Download the Interaction Cam code and unpack it to the htdocs folder of your local server
  • Replace the mozfest.png file with your own event logo – this should be 600×104 pixels and use some transparency for more awesome (for other sizes you can alter the settings in interactioncam.js around “/* Branding */”
  • Go to your browser and open your install of the camera app – in my case http://localhost:8888/interaction-cam/
  • Grant the browser access to the camera – you should see it playing.
  • Press space to take a photo and store it by hitting the right arrow
  • On your hard drive, you should now have a file in the “copies” folder that is your photo

When all that works, add the MaKey MaKey:

  • Connect the MaKey MaKey via USB
  • Go through the recognition process of MaKey MaKey (like any other USB keyboard)
  • Lay out your pads/connectors and connect the cables to the appropriate parts of the MaKey MaKey (make sure they don’t touch)
  • Go back to your browser
  • Reload the Interaction Cam
  • Profit

That should do it – just upload the photos in your copies folder at your leisure later on and when you are connected to the web with a non-flaky connection.

Things that can go bump

Electricity, cables, computers and software are not natural and therefore hate humans. So things can go wrong. Here are a few things I found:

  • If the camera doesn’t start running make sure you have the latest Chrome or Firefox Nightly and have WebRTC turned on
  • If it still does nothing, you might need to reboot the computer (I had to a lot with the MacBook Pro)
  • If your computer has the power cable connected to it (which is a good idea as WebRTC is hungry to the battery) it can happen that just touching the “take photo” pad already triggers that. Just hide the leftmost pad then as it is not needed any longer. If someone doesn’t trigger the shooting, tell them to touch the left one, too.

Happy shooting! I am off to MozCamp Asia where I will put up the cam. And my friend Marc Thiele is planning on setting it up at Beyond Tellerrand, too.

Share on Mastodon (needs instance)

Share on Twitter

My other work: