Video Screen Capture

I’ve been experimenting with different ways to produce video screen captures for software demos. Among my constraints for this task are the following:

First try: WINK

WINK is a free (but not open-source) screen capture tool with lots of interesting features. It generates Flash output, and also has tools for editing and annotating captured movies. Under Parallels, however, I had difficulty synchronizing audio, and the captured animation was too jumpy. For captures of software with less animation and audio, the annotation tools would probably make this an excellent choice. It might also work better on a “real” PC, rather than a virtual one.

Second try: CamStudio

CamStudio is free and open-source. Like WINK, it generates Flash output, but will also generate AVI files, which many people might find easier to edit. Furthermore, the step that converts AVI to Flash (SWF) files is a separate component, which could prove useful in other circumstances.

CamStudio also has annotation features, including the ability to overlay another video (e.g., from a webcam) as annotation. WINK does not have this feature, but from my limited experimentation, WINK’s other annotation features might give it a slight edge if annotation were critical. For my purposes, however, it isn’t.

Both CamStudio and WINK add basic player controls and loading feedback to their Flash output, though configurability is somewhat limited. I suspect separating out the video and adding alternate controls for the swf file is a trivial matter for those with Flash skills.

For capturing my application, CamStudio produced slightly better audio synchronization and less jumpy animation. Quality degraded somewhat later in the capture. Running on OSX in Parallels, I had to install the (free) LineIn utility to route system audio output into system audio input.

Third Try: Snapz Pro X

Ambrosia Software’s Snapz Pro X is $69, with a 30-day free trial. It only generates QuickTime movies — no direct Flash support. It also runs in the background, with no dock icon, and is accessed through an obscure key combination. I find this to be mildly annoying.

Making up for the price, limited output format, and mildly annoying UI is the fact that it generates beautiful output: No performance degredation, perfectly synchronized audio, and jitters or artifacts on the animation. This was true whether capturing the application running in OSX or running in Windows under Parallels.

Snapz Pro X does not include any annotation features. There are presumably other ways of annotating the QuickTime output (possibly even iMovie?), but I haven’t explored these yet.

The next step was to figure out how to get the output from QuickTime format into Flash. Scott Yang has provided a nice overview using ffmpeg, flvtool2, and flowplayer.

Modern Linux distributions are likely to include the ffmpeg program “out of the box”. It is also relatively easy to build this under OSX. Stephen Jungels’ FFMPEG on Mac OSX How-to describes the process in detail. One note: I used the “fallback” approach described in the how-to, and had to change one of the flags to configure, from --enable-libmp3lame to --enable-mp3lame. Hence the full configure command looked like:

    ./configure --enable-mp3lame --enable-shared \
        --disable-mmx --disable-vhook

OSX includes ruby, so flvtool2 builds and installs easily.

Recapping, here are the basic steps (once ffmpeg is installed):

1) Use ffmpeg to convert the video from QuickTime (mov) to Flash video (flv) format. For video of screen captures, you probably do not want to make any changes to scaling or sampling. Screen captures have lots of straight lines, so compression will introduce artifacts. There may be ways to get ffmpeg to generate smaller files without significantly hurting quality, but assuming that file size is not a huge constraint, the -sameq flag will tell ffmpeg not to try anyting too fancy:

ffmpeg -i -sameq CaptureTestScreenSnapz001.flv

(Leaving -sameq off produced a movie with lots of fuzziness and other artifacts.)

2) Update the metadata using flvtool2. As Scott’s notes mention, you can get by without this, but it is painless and improves the user experience a little:

/usr/bin/flvtool2 -U CaptureTestScreenSnapz001.flv

Note that flvtool2 will update the file in-place, unless you specify a different file name for the output.

3) Embed FlowPlayer in your web page, pointing it at your flv file. One addendum to Scott’s notes: For videos of screen captures, you will likely want to adjust the size of the embedded FlowPlayer object such that the video is not squeezed. This is less of an issue for video captured from TV or a video camera, where a few pixels of scaling won’t matter.

The FlowPlayer howto page helpfully provides the heights of different versions of the controls. For example, the default FlowPlayer controller is 22 pixels high. From the output of ffmpeg,

    Seems that stream 0 comes from film source: 1000.00 (1000/1) 
        -> 10.00 (10/1)
    Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '':
      Duration: 00:00:57.5, start: 0.000000, bitrate: 1160 kb/s
      Stream #0.0(eng): Video: qtrle, rgba32, 919x581, 10.00 fps(r)
      Stream #0.1(eng): Audio: adpcm_ima_qt, 22050 Hz, mono

i see that the captured video is 919 x 581, so the embedded size should have width of 919 and height of 603.

The FlowPlayer controls are quite nice. Tastes will vary, of course, but I personally find it both cleaner and more functional than the default controls provided by WINK or CamStudio.

Here is a stripped down (and silent) example, showing some interaction with one of the prefuse demo apps: prefuse demo movie.

UPDATE: As an alternative to using ffmpeg, the (free) media conversion service at seems to do a nice job of converting QuickTime output from Snapz Pro to Flash Video.





Copyright 2007 - Philip Isenhour