On one of the first dates I went on with my wife Hannah we stopped at a photobooth and snapped a collection of silly pictures. Those pictures are still some of my favorites we’ve taken together. Eight years later and we still try to stop at photobooths whenever we see them. But I always have one feature request when I use a photobooth, I wish they could deliver the pictures directly to my phone. Thankfully, we live in a world where the power to create new user experiences is quickly shifting to software people and it is no different with photobooths. We’re going to build a browser based photobooth that implements the one feature I’ve always wanted – it will deliver photos to our phone via MMS. All thanks to the power of JavaScript, PHP and Twilio. You can see the final product in action here.

Prerequisites

There are couple things we’ll need to set up before we start building our application:

A Twilio account – We’ll use Twilio to send our MMS message. Sign up for a free Twilio account!

A web server running PHP

We’ll be using a handful of other technologies as we build our application but we’ll walk you through setting up each one throughout this post:

getUserMedia – this will allow us to capture the camera stream from our browser.

Google’s Adapter.js

Bootstrap – To make things a little prettier.

jQuery

Twilio-php library – to easily send our MMS from PHP.

Mirror Mirror On The Wall

Before we start building, let’s talk a bit about WebRTC. WebRTC (Web Real-Time Communication) makes it easy for developers to build peer-to-peer native browser video, audio and data applications using JavaScript APIs. Since we’re not connecting peers in the application we’re building today wouldn’t be considered a WebRTC application. But we’ll be using the getUserMedia JavaScript API which is one of the building blocks of WebRTC.

Now the party starts and it’s time to build our app. Make a new directory on your PHP server called photobooth. We’ll be writing all of our code in the photobooth directory. Let’s start by building out our initial HTML in index.html: