Creating Screen Casts with ScreenCam

Monday, 29 September 2008 - Jochen Lüll
Get the Flash Player to see this player.
ScreenCam Video
ScreenCam is a small applications that records screen shots and turns them into a video. This tutorial shows how to record screen casts and how to enhance the recording by using FFmpeg.


S
creenCam is just a small tool, so it is not comparable with full sizes screen capture applications, but it should be sufficient for recording small screen casts.
One main advantage is the ScreenCam is platform independent so it runs on all platforms (e.g. Windows and Linux) capable of running Java.

The standard output format of ScreenCam is Quicktime (MOV) but if FFmpeg is installed an FLV file will be created in addition.
At the end of the tutorial I will describe how to tune the resulting movie files by reducing the framerate and adding sound.
 

Installation

ScreenCam Installation

Download Download ScreenCam.

After downloading ScreenCam and extrcating the ZIP file you can start it by double-clicking at the ScreenCam.jar File.

On Linux systems this might not work, because the working directory is not set properly.
In this case, open a shell, switch to the installation directory and start the program by taping java -jar ScreenCam.jar.

If everything goes well you will see the ScreenCam Window on the screen.

FFmpeg Installation

FFmpeg is the so called "Swiss army knife" of audio and video manipulation. It allows you perform various manipulations and best of all it's free.
Installation of FFmpeg is easy. Windows user can download a single Exe file and place it in the WebCast installation directory.
Linux users can install it by using the packet manager of their distribution.
In the case of Ubuntunt simply type

sudo apt-get install ffmpeg

in a shell window.

FFmpeg is needed to manipulate the resulting video files.

Using ScreenCam

Capturing Screenshots

After starting ScreenCam the main ScreenCam Windows will appear.
There are actually not many options to choose from. You can define the scaling of the resulting images, the output directory, the region of the screen to capture and if the mouse pointer should be visible or not.
ScreenCam Main Window
ScreenCam Main Window
Choosing the scaling and the output folder should be easy. The definition of the region to capture is a little bit more complicated, at least when using the tool the first time.
To select a region make sure the ScreenCam window is selected. Then move the mouse pointer to the upper left corner of the region to capture. Repeat this for the lower right corner.
Range selection
Area Selection
You should see the coordinates in the Ara text field. To check if the correct region has been selected you can press the Preview button, which will display an image of the selected region.
If you like the mouse to be displays, hook the Show Mouse check box. The mouse pointer can not directly displayed directory in the screenshot, so it will be substituted by a red rectangle which will be visible in the screenshots.

After you've done all the settings you can press the red recording button to start the recording.
The recordings automatically ends when the ScreenCam window is maximized.

Selecting Screenshots

After maximizing the window the application will resize the captured images. Depending on the number of the captured images, this might take a while.
When all images have been resized information about the number of images, frame rate etc. is displayed and a windows with all captured images is opened.
Now you have the possibility to delete unwanted images.

If you are satisfied with the images you can press the Continue button to start the video encoding.
After this is finished you can close the ScreenCam window.

Image Selection Windows  Image Selection Windows
ScreenCam Screenshots

Now you will find a MOV file and if FFmpeg is installed, also a FLV file in the output directory.

Enhancing the Output

If you are not satisfied with the resulting video files you can use FFmpeg to enhance the result.
The MOV file is very large and the FLV file is of low quality.

To get a FLV file with better quality, the following command can be uses:

ffmpeg  -sameq -i screencam.mov out.flv

You can of course als create a AVi file by changing the output file to out.avi or any other format supported by FFmpeg.

Fremerates are normally very low, but if you capture only a small portion of the screen they might be too high to produce small movies.
So it might be desirable to reducte the framerate. Doing this with FFmpeg is very easy:

ffmpeg -r <frame_rate> -i screencam.mov  <output_file>

Now that we have enhanced the video output, let's have a look how to add audio.


Adding Audio

Videos without sound are often boring.
If recording to a tutorial it is often desirable to add audio to video. Doing this with FFmpeg is very easy.
Record an OGG or MP3 file by using Audacity or whatever recording software and cut it to fit the length of the video.
After that all you have to do is to issue the following command:

ffmpeg -i screencam.flv -i <audio file> -vcodec copy <output_file>

Tha'ts it now your screencast should have the audio attached.

Putting it on the Web

As a last step, I'll show how to publish the video on a website.
It's preferable to use FLV as format, because there are free Flash players ready to use which support FLV.
In our case we'll use the JW Player.

Download it, extract all the files from the ZIP archive into a directory and save your FLV file at the same location.
Now create a HTML file with the following content:

        <div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
        var s1 = new SWFObject("mediaplayer/player.swf","ply","512","409","9","#FFFFFF");
        s1.addParam("allowfullscreen","true");
        s1.addParam("allowscriptaccess","always");
        s1.addParam("flashvars","file=screencam.flv&image=&bufferlength=1");
        s1.write("container");
    </script>

JW Player in Web Page

When starting the HTML you should see the media player embeded in the page.


So, that's it. Hope you liked the tutorial.
Have fun creating your own screen casts. Face smile
(joschi)

Version: 0.1
Author's e-Mail address: jochen [at] fun2code.de

 
Valid HTML 4.01 Transitional  Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.