Unreal Expectations

About two years ago before my daughter was born I talked my wife into the value of having a video camera to record all those wonderful moments that kids are supposed to have. At the time I was a fan of Sony products and we ended up purchasing the Sony HDR-SR5 High Definition Camcorder. I have actually had no complaints with the operation of the camera itself and didn’t give much thought to the need to pull video off the camera and what I would do with it once I did pull it off.

My daughter came and we filmed various moments early on and my first attempt to pull the video off the camera did not go so well. I had a copy of Adobe Premiere Elements 4 or something. It was purchased along with Adobe Elements that I mainly use for organizing all the digital photos of my daughter. Much to my dismay, I quickly discovered that Premiere Elements did not support AVCHD, Sony’s format format for encoding video on their camcorders. While I liked Sony hardware and they offered some software for dealing with AVCHD, I don’t care for OEM software included with hardware as it is often feature limited with a horrible user experience and included purely to ensure there is some way to access the content the user has created. I don’t envy the developers who have to put those applications together as they are probably given next to no time to work on it and lack adequate numbers of competent developers to get it complete.

So eventually the disk on the camcorder was starting to get full and I needed to pull the video off of the drive. I had purchased a Mac Mini for use in the kitchen to play DVDs, iTunes Videos, and access recipes off the web. I finally discovered that iMovie ‘08 has support for AVCHD and could import the videos off the camera. Initially it was more about getting the videos off the camera and freeing the camera’s hard disk more than making them available in any sort of way to anyone.

On a recent client engagement for work we are working with a music company that is rebuilding their eCommerce platform from the ground up. Part of the solution we designed and built incorporated videos that are streamed using Akamai fronted by Flow Player. We ran into some of the oddest issues with missing files and integrating the Akamai streams.
As I was setting up nginx recently to get this site running, I revisited the details that nginx has built-in support for FLV HTTP Streaming. This doesn’t provide any real protection of the stream, but does provide an ability for users to quickly start watching the video and forward to any point in the video without needing to download everything up to that point. In thinking about the possibility of incorporating this, I finally found a reason to do something fun with the videos and make them available to family to view. The following is a list of the steps I did to get this enabled.

1. Importing the Video From Camera

This was a pretty simple process with iMovie. The only problem I ran into is that it seems iMovie needs to be up and running when the camera is set to computer mode otherwise iMovie doesn’t seem to recognize it as a camera. When not running, the camera would connect in MacOS X and appear as a hard drive that could be opened and have images pulled from, but when iMovie started, it does not see it. What tripped me up most before I realized this is that I tried it on a Mac Book Pro (with iMovie running) and it came right up for importing, but when I tried with my Mini (without iMovie running) it did not appear.

So step one was to connect the camera while iMovie was running and import the appropriate clips into an iMovie event.

2. Create the Movie

I won’t get into the details on how to create the project from the imported movie, but suffice it to say, iMovie makes it easy to select parts or all of the imported video and create titles and transitions and apply effects to the movie. Once the project is ready, go to Share>Export Movie… to open a dialog. I exported the movie as Medium and time yet will tell if that is too large for friends and family to view.

One additional point before leaving iMovie is the creation of still image to use as title slide before the movie starts. When the flash video player loads, it doesn’t start playing the movie unless the user actively clicks the play button. It can be configured to start automatically, but I personally find sites that do that annoying as I am sure many other people do as well. Since the player doesn’t start loading the video automatically, there is no way for the player to present a frame of the video as place holder. To provide a better experience to users, a still frame should be produced and provided to the flash player to use at startup. With it specified, the player will present the image with a play button in place.
To generate the a still image from iMovie is not the most obvious thing to do, though once the process is understood, it is not difficult to do. I eventually found the information on how to do this here. The short information on the process is to create a project with a small clip including the frame you want to capture and then use Share>Export using Quicktime.

This will bring up the “Save export file as…” dialog box with two drop downs. In the first, Export, choose “Movie to Image Sequence”

In the second drop down, make a choice on how the export should occur and image format used with the export.

Depending on how long the clip is and how many frames per second are set on export, a few images will be generated that need to be sifted through to find the right one.

3. Convert to Flash Video

Once the movie is exported, the next step is to convert it into flash video. In order to perform this transcoding I used ffmpegx that provides a graphical user interface to several utilities that perform the actual encoding. The download page has all the details on how to install and initially configure the application. There are specific notes on the page on how to enable the FLV encoding.

Once it was up and running it was nearly as dragging and dropping the source movie, choosing the output encoding, and clicking Encode. The only added effort was making changes to the output size and settings. Once set, click Encode and wait for the computer to do the dirty work.

ffmpegX is licensed as shareware. So far I have only encoded a small number of videos but could easily see doing more and paying the shareware fee.

4. Enable nginx Flash Streaming

The video is encoded as flash video and now it is time to ensure nginx is configured to stream the file over HTTP. In the server block for the given virtual host, just adding an additional location block is all that is needed.

    location ~ \.flv$ {
      root   /home/mleo/www/public/;
      flv;
    }

The flv directive ensure the necessary meta data is sent with an flv file response and incoming requests with file seek data are handled properly and the data is sent back as requested.

5. Embed the Flash Video in Page

I’ll skip over the step on copying the flv file from local computer to the server and move on to the final step of configuring a flash video player to consume the video, splash image, and stream via http. In my case I chose to use JW Player which offers a non-commercial license which can be used on sites with no advertising (like this one). Once the package is downloaded and installed on the server, minimally consisting of the swfobject.js, player.swf and some supporting files, one can use the setup wizard to initially configure the settings. Most of the defaults are fine, but the most immediate settings to change include:

• height: The video dimension height
• width: The video dimension width
• file: The path to the flv file
• image: The path to the splash image
• provider: Set to “http” in order to enable http streaming

The following is the sample code for the video embedded below.

These few settings are all that is needed to embed the video player and have it function. JW Player offers all sorts of additional plugins and skins, but for simple video sharing that isn’t really needed.

<script type='text/javascript' src='/media/swfobject.js'></script>

<div id='mediaspace'>This text will be replaced</div>
 
<script type='text/javascript'>
  var so = new SWFObject('/media/player.swf','mpl','640','360','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','/media/SampleVideo.flv');
  so.addVariable('image','/media/SampleVideo.png');
  so.addVariable('provider','http');
  so.write('mediaspace');
</script>

Sit back and enjoy streaming video

The following video is of my daughter’s day care holiday show. It is the first of my videos to be imported, encoded, and streamed.