The PeepCode iOS App

From the It Just Makes Sense department

As a bootstrapped company, it’s not always clear what the next step is, but an iOS app for viewing PeepCode videos has been one of the longest standing requests we’ve received. Which makes sense! It’s almost as if these devices were perfectly designed for watching PeepCode videos. The new iPhone 5 is the right dimensions for displaying HD video, which is what all our new videos have been filmed in since the end of last year (and some before that).

So we (finally) took the plunge and built an iOS app. We worked with expert iOS developer (and PeepCode author) Alex Vollmer of Radiant Capsule, and while he did most of the heavy lifting we certainly put in a lot of work and learned a lot along the way.

Solving the Progress Bar Problem

Download progress shows both percentage and remaining MB.

Desiging a good progress bar is famously difficult. Given that our audience is technical and speaks MB and GB, we settled on a great solution that works specifically for the content we’re delivering.

We decided to combine a standard progress bar with a numerical percentage. This works well for any videos under 100MB. But large videos might appear to be stalled if we can only show 100 points of progress. If a video is 500MB, it might take a minute or more to download 1/100th of it (5MB) and show progress.

So we also show you the number of MB remaining. This gives visual feedback that’s useful for videos larger than 100MB. The end result is that for any video you’ll download, progress is frequent and keeps you updated.

Delivering Instant Gratification

The UI shows progress in two steps.

One of the things we find frustrating about video streaming applications is all the waiting.

Starting an HTTP video stream can involve an API call, requests for 2 metadata files, and another request for a media file…all before you see a single frame of video.

We wanted to improve on that by showing you some progress along the way. So you’ll see an initial spinner when you click the “Play” button on the cover. When the first API call has completed, you’ll be taken to the video player where the video will start to stream.

Splitting progress into two visual steps makes the application feel more responsive than it would if we just sent you directly to the video player where you would have to wait for 5 or 10 seconds. It’s part of the attention we’ve put into the UI of this application to make it enjoyable to use.

Note: Video streams start at low quality while the device figures out what bandwidth is available. If you have a good Internet connection, you’ll see better quality video after a few seconds. We’re working on adding full HD streams to videos, too.

The Value of a Flaky Development Server

It’s not easy to bootstrap a multimedia application that requires client, server, and media.

Due to misbehaving third-party libraries, our first implementation of a video streaming server would sometimes monopolize 100% of the server’s CPU and hang, or never return a response at all. This was bad news for the iOS client application since it couldn’t get the data it needed to start streaming a video.

Or was it? The early flakiness forced Alex to add more error checking code to the iOS client, and better error messages for the user. And it forced us to write the server code to look for timeouts or blank API responses. Overall, it made our code more robust.

And yes, we rewrote the server so it doesn’t use 100% CPU anymore. In fact, it’s been smooth sailing since the launch.

Keeping it Simple

We’ve launched version 1.0 with a simple but straightforward feature set: PeepCode Unlimited subscribers can download or stream any video we’ve published in the last two years. We’re starting with only PeepCode Unlimited subscribers so we can fine-tune our streaming infrastructure and determine what mirrors we need around the world for a top notch download and streaming experience. So far everything has been running very well.

Anyone with a PeepCode account of any kind can use the app to stream previews of current videos.

Interesting Features

• The app will remember the playback time of each video you’ve watched. If you have iCloud, it will sync that across all your devices. So you can watch part of Play by Play with Aaron Patterson and Corey Haines on your iPhone, then resume watching on your iPad at the same time in the video.
• We’ve done extensive testing, literally all around the world (Seattle, Melbourne, Kauai, San Francisco). We hope to add video streaming mirrors for an even better experience.
• Stream to your AppleTV with AirPlay. Play by Play looks fantastic on an HDTV.
• Smart download doesn’t drain your battery if you leave the app. It resumes when you’ve re-launched the app and are back in Wi-Fi range. (Our developer tested this by walking down the street until he was out of range).
• Download full quality videos or stream up to half resolution. Our new HD videos look amazing on the iPhone 5!
• We built a custom, self-contained Sinatra server for streaming video. This will make it easier for us to deploy extra streaming or download servers around the world or whenever needed.
• A series of command line scripts together with remote APIs makes it a breeze to encode video for all the necessary formats and copy it to our servers.

Try it!

We’re proud of this application, our first shipping iOS application. For a 1.0, it covers most of what’s needed for a great mobile experience.

Possibly the best evidence of how useful this application is was how much we started using it in-house! On the bus, at home streamed to an Apple TV, or on a plane. The last three months of rigorous testing and refinement have been a lot of fun.

Try it out with any PeepCode account. Or upgrade to PeepCode Unlimited for full-length streaming!

Did you know…if you’ve ever had a PeepCode Unlimited subscription, you can renew now for only $109! Or tell your employer to contact us for a business subscription.

Watch on the iPad, too!