Screencasts of mobile devices with HDMI capture

When trying to post about behavior of web or mobile applications, a picture is worth a thousand words… but a video can be worth a thousand pictures. Videos can capture complex behaviors that are hard to fit into a screenshot, can be narrated, and show actual performance as well as the look of something.

Here’s a screencast of the upcoming Wikimedia Commons app importing a PDF from Keynote on an iPod Touch:

I’d stumbled upon some references to a performance monitoring tool called Eideticker that Mozilla’s using for the Android version of Firefox. This uses an HDMI video capture card to record live video output from a Galaxy Nexus or other phone, and can then mark timing of various on-screen events down to 1/60 second precision.

‘Blackmagic’, the company that makes the PCIe card Mozilla uses, also makes Thunderbolt-connected standalone widgets that are easier to connect to a MacBook Pro. I picked up the “Intensity Extreme“, which hides the (for me) unneeded analog video ports behind a breakout cable that I can stuff in a drawer.

See details on which devices I’ve gotten to work and more sample casts.

Limitations:

  • Capture works in their utility program and various high-end editing programs via plugin, but it doesn’t appear as a camera to other apps. So it’s not ideal for live screencasting on a Google Hangout or such, but could probably be pressed into service.
  • Captured video is uncompressed, so files are large!
  • No 1080p60 capture — they have a higher-end model that can do this, but I didn’t shell out the dough. Most devices I’ve tested output at 720p60 or 1080p30 though, so that’s not a problem.
  • No autodetection of the resolution — you have to pick the right resolution in the capture utility, possibly by trial-and-error.
  • No passthrough for the Thunderbolt connection.
  • Must purchase HDMI and Thunderbolt cables separately. :)