Halloween Photo Booth

I’m crazy about Halloween. I have a party every year and in recent years it has become a pretty big production. My wife and I come up with a theme for the year and decorate the entire house in that theme.

This year’s theme was prison.

For this year's prison themed Halloween party, my wife had the great idea that we should have a registration area where you have to surrender your belongings and get a mug shot. I thought the mug shots had great potential for a lot of fun.

As we discussed the idea, I told her we could just run the windows 8 camera app and people could just take their own mug shots as they go by. We were going to use the built in timer in the app and somehow have a keyboard or a mouse handy so that our guests could activate the camera.

As we started really digging into the idea we realized several problems with the idea:

  • I don’t think the 3 second timer is quite enough time for people wearing costumes to get situated for a picture.
  • I don’t want to have a mouse or keyboard available because I don’t want them closing the application and accessing my computer. I also want it to feel more official when you're getting your picture taken.
  • What if we want to review the pictures before the end of the party?

These are hard problems to solve, but at least we had an idea of what we did want now. It was clear that we wanted to have the guest come up, hold a card in front of them, push a button, and have it take a photo. They could take more if they wanted to. We also wanted to be able to view those photos during the party.

After looking on the Windows Store for photo booth applications it was clear that there really wasn’t going to be anything that would be helpful to me. I decided to write my own Windows 8 application to do it. How hard could it be, right?

I did not have much time to develop it, but it actually turned out to be pretty simple.

I created a blank XAML project and did a little design until I could get it to look like this:

Photo Booth UI

Once I got the basic UI out of the way I needed to get access to the camera. I used the MediaCapture class to initialize my default camera and start showing it.

private async void PageLoaded(object sender, RoutedEventArgs e)
{
    await _captureManager.InitializeAsync();
    CapturePreview.Source = _captureManager;

    await _captureManager.StartPreviewAsync();
    await SetResolution();
}

That last line was some code the internet was gracious enough to give me. I was having issues where my resolution was very low. It was configured to take pictures at the lowest resolution my camera could support. This was because it was using the first resolution it found in my camera, so I had to write a method to set the resolution to the highest my camera could do.

public async Task SetResolution()
{
    var resolutions = _captureManager.VideoDeviceController.GetAvailableMediaStreamProperties(MediaStreamType.VideoPreview);
    int maxResolution = 0;
    int indexMaxResolution = 0;

    if (resolutions.Count >= 1)
    {
        for (int i = 0; i < resolutions.Count; i++)
        {
            var vp = (VideoEncodingProperties)resolutions[i];

            if (vp.Width > maxResolution && vp.Subtype.Equals("YUY2"))
            {
                indexMaxResolution = i;
                maxResolution = (int)vp.Width;
            }
        }

        await _captureManager.VideoDeviceController.SetMediaStreamPropertiesAsync(MediaStreamType.VideoPreview, resolutions[indexMaxResolution]);
    }
}

Once I had the camera working and I did some uninteresting work on getting a countdown timer working, I had to deal with the problem of saving. At first I just saved to a file. This was simple using the KnownFolders class off of Windows.Storage like this:

var photoStorageFile = await KnownFolders.PicturesLibrary.CreateFileAsync(fileName, CreationCollisionOption.GenerateUniqueName);
var properties = ImageEncodingProperties.CreateJpeg();

await _captureManager.CapturePhotoToStorageFileAsync(properties, photoStorageFile);

This was great and I was super excited to have images being saved at all, but saving files in a Windows Store application is a bit limited. It's really sandboxed and I can't access any file or folder that I want, which meant that I couldn't go out to a network drive or anything like that. Saving under the known folders pictures library was just saving locally.

This was going to be a problem, because now I had a vision for what I wanted this photo booth to do. I thought it would be a great experience for my guests to take their mug shot when the come in the door, then by the time they navigate around the house and make it to my bar for a drink I wanted their photos to be available and cycling through in a slideshow so that everyone at the party could see.

Saving to SkyDrive

To do this I looked to SkyDrive. I thought that if I could send the photos to SkyDrive then I could pick those files up and view them on my TV in the bar.

I started researching sending photos to SkyDrive and found that it's more complicated than I wanted it to be. I never felt that this application would live past Halloween, so I didn't want to create an application in my account and tie authentication to it and all that crap that pretty much every API wants you to do to connect to their services.

I'm pretty involved in the Microsoft ecosystem. I have a Windows Phone too and all of my photos get pushed up to SkyDrive when I take them. Then, I can view them or post them from my Windows 8 computer if I want to. They're just always there and I don't have to think about syncing them. I really just wanted that experience for my photo booth.

So I decided to play dirty...

Because I use the automatic SkyDrive sync on my Desktop, I have a SkyDrive folder on my computer. Whenever I put something in those folders it just magically makes its way to SkyDrive. All I need to do is save my photos to a SkyDrive folder on my local machine!

The problem with that is that we already know you can't just pick your folder directory like that in Windows Store apps. It just always goes to your pictures library. Fortunately, you can change where the libraries are looking. I do this a lot because I have multiple drives and I want to see all my photos from all of my drives when I go to the library. You can change this by going to the properties of your pictures library and adding the location of your SkyDrive folder. Then set that folder as the save location.

Now when I saved new photos with the same code, it was adding it to that SkyDrive directory and in a few seconds it would make it to SkyDrive.

This is one of those moments as a developer when you stand back and say... "I win."

I made some finishing touches on the application like showing the picture that I just took back to the guest so that they know it was taken. Then I was pretty much done with the application. It was rough around the edges but incredibly functional!

Creating the Input Device

Now all I had to deal with was the input. I had the code detecting a key press to activate the timer and eventually take the picture. I really was considering just putting a mouse on the table, but I felt that I could be a little bit more creative.

I'm a gamer from way back. If it's vintage, I probably owned it at one point. So it should be no surprise that I'm building my own arcade cabinet for my bar. I have a feeling that topic will be the subject of a few posts coming up, but in the process of building that cabinet I have purchased many things. Among those things is a fantastic kit from XArcade to build your own control panel. While I'm still setting that up, I have all these buttons! They're pretty fun to play with and they all end up connecting to a USB cable that emulates a keyboard. I thought this would be a great way to provide a safe input device for my mug shots. I had some MDF board from templating some of my arcade cabinets so I decided to build a box to house a button. Here's how I built it.

Photo Booth Button

I used the Player 1 wiring which emulates pressing the 1 key on the keyboard. I then had to go change my application to support pushing the 1 key. Once I had the box ready to go, all I had to do was plug it in since it's considered a keyboard and it was ready to go. Now I had a great input and it's sending my mug shots to SkyDrive.

I was ready to put my photo booth in place. My prison theme was decorated in a way that the prison was meant to look outdated. This meant that my photo booth technology needed to look outdated too. That's a strange problem to have when my whole tech life has taught me to be on the latest and greatest everything. I used an old cart with a CRT monitor and a giant vintage camera on the top to make it look like that's what was taking the photos. On the other side where the photos were being taken, I wrote the height lines on a white cloth to give the appearance of backdrop of a mug shot. Finally, I made a sign for people to hold with their inmate number on it.

Here is what the deployment looked like:

Photo Booth Deployment

The day of the party, my guests loved the photo booth. I mean, really loved it. Most guests took multiple shots and even came back through the night to take more. The other half of this project is how I got it to show up on the bar TV when people walked in. I'll cover that in a later post. That part was the real wow factor for my guests.

It looks like I'm going to need to keep this application around and enhance it for whatever theme I come up with next year. People were even telling me that I should polish it up and submit it as an app to the store. Maybe I should...

MugShot1

MugShot2

MugShot3