July 29, 2004

Flash video screen captures with vnc2swf

How-tos have always been the backbone of computer documentation. Users must be able to read and understand the steps spelled out in a how-to document for it to be effective. Sometimes the steps can get pretty complicated. In such cases, a three- to 10-minute streaming real-time screen capture video that actually shows a user how to do something can be extremely helpful. Here's how you can build a Flash-based video using the vnc2swf screen recording program, a VNC desktop session, and some HTML code.

VNC, or Virtual Network Computing, is an application that lets you remotely control one computer from another. It requires server-side software running on the host and client software running on the client. A good place to find installation and operational information on the VNC family of programs is on the RealVNC or TightVNC Web sites. Most Linux distributions include some version of VNC that you can install. It may already be loaded on your machine.

We need to get a VNC session started before we can capture video. The VNC server doesn't have to be on your localhost. You could start one up on another machine and run vnc2swf on your local machine. Of course, you should note the IP address and that X desktop number (remember the :4 above) of the server machine.

After you've installed the VNC software, execute this command as a regular user:

vncserver -depth 16 -geometry 800x600

You'll get back a response similar to this:


     New 'X' desktop is curley:4
     Starting applications specified in /home/rreilly/.vnc/xstartup
     Log file is /home/rreilly/.vnc/curley:4.log

If you don't specify a desktop number, the VNC server will just issue a new one. In the example above it's :4. The 800x600 parameter specifies the screen resolution. This size displays well on a variety of Web browsers and helps keep the size of the file we'll capture in line.

Now that we have a VNC server running we can turn our attention to vnc2swf.

Using vnc2swf

Vnc2swf captures everything that happens on the screen of a VNC desktop session and spits it out to a Flash-formatted video file. Flash is cross-platform compatible and appears on all flavors of PCs, Macs, and the Web. Browsers, in order to display your Flash video, must have the Flash plug-in installed.

Not the only game in town
vncrec can record screen videos, but you can only view the result when you run your video file back through the program with the -play option. An external program has to be used to convert the internal vncrec format to something usable, like MPEG, AVI, or animated GIF. All of those would work for video, but they require more steps and are more complicated to produce.

To get started with vnc2swf, download and build the program from the latest tar.gz file. You'll also need to download and build Ming-0.2a for Flash encoding. To view the video, make sure that you have the Flash plug-in installed for your browser. Once you've installed all the programs, start vnc2swf with a command like:

vnc2swf -startrecording -geometry 800x600 -depth 16 -framerate 5 rob1.swf 192.168.2.40:4.0

Let's break that command down:

  • To start recording, you must include -startrecording. It seems to me that this should be the default, but it's not.
  • The -geometry should match the screen resolution you used when you started up the VNC server.
  • You can adjust the frame rate to suit your application. Frames seem to be recorded only when there is movement on the screen.
  • Next comes the file name in which you want to store the recorded video.
  • Finally, there is the VNC server machine IP address and display number. For our example, the display number should be expressed as :4.0, with the .0, or it won't record.

Vnc2swf will start up a new desktop on your monitor and you'll be able to move around with the mouse. If everything is properly set, you'll see the frame number recorder in the upper left corner of your new desktop. The number will increase every time you move the mouse or when anything on the screen changes.

The capture can be stopped by closing the VNC desktop window, at which point you'll return to the command line with some vnc2swf recording session statistics.

Add a touch of HTML code

Before anyone can view your Flash video masterpiece you'll need to embed it in an HTML file. Put a title and introductory text at the top of the Web page to let everybody know what the video is about.

I lifted my HTML code from Dann Washko's vnc2swf demo videos and made some modifications for my system. Actually, I played one of the videos on that page and grabbed the code in my browser source code viewer window. Cut and paste this into your file, then make your mods:


**************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<strong>
Data from Screen Capture - Rob1<strong>
<br>
<div style="position: relative; top: 0px; left: 0px: width: 800px: height: 600px:">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="600">
<param name="movie" value="rob1.swf">
<param name="quality" value="high"> <param name="LOOP" value="false">
<embed src="rob1.swf" width="800" height="600" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</embed>
</object>
</div>
</body>
</html>

******************************************

Make adjustments to the width and height to match your VNC server and vnc2swf settings. Also make the [filename].swf entries match the .swf file name in the vnc2swf command. Finally, transfer the .swf and .htm files to your Web server.

To view the video, simply browse to the .htm file on the Web server. If you want to stop the video, move the mouse over the picture, right-click, and uncheck "play" on the menu, or just go to another Web address.

My test video files were roughly 300KB per minute of video at 5 frames per second with a 800x600 display size. The longest video I've produced was about 10 minutes. I also tried 1000x700 screen size, and it worked fine too, although it had to be scrolled in my browser window.

Rob Reilly is a professional technology writer and consultant whose articles appear in various Linux media outlets. He offers professional writing and seminar services on Linux desktop applications, portable computing, and presentation technology.

Click Here!