Creating screencasts should be an easy task. After some trial and error I realised it’s more a question of luck.

Target

Create a web based screencast using only linux tools.

Install xvidcap

Install required packages:

apt-get install libglade2-dev libXmu-dev
apt-get install liba52-dev libdts-dev libfaac-dev libgsm1-dev liblame-dev libogg-dev libvorbis-dev libtheora-dev 
libxvidcore4-dev libx264-dev libavcodec-dev libavformat-dev liboggflac++-dev liboggflac++2c2 liboggflac-dev 
liboggflac3 libtheora-dev libtheora0 ffmpeg2theora

Compile and install xvidcap:

tar xvfz xvidcap-1.1.5.tar.gz 
cd xvidcap-1.1.5/
./configure 
make
make install #will install in /usr/local/bin

Creating the screencast

Using the gui it’s easy to create a screencast but you have several choices related to the format. I tryied several ways:

• creating directly a flv (works ok)
• creating a divx mpeg4 and then converting to flv (also works ok)

mencoder solis-001ok.mpg -o solis-001ok.flv -of lavf    
 -oac mp3lame -lameopts abr:br=56 -srate 22050 -ovc lavc    
 -lavcopts vcodec=flv:vbitrate=500:mbd=2:mv0:trell:v4mv:cbp:last_pred=3
 -lavfopts i_certify_that_my_video_stream_does_not_use_b_frames

The problem

After testing everything on my Dell D820 with a Nvidia card I decided to do the same things on a Dell I6400 with an ATI card (also feisty-fawn) using the fglrx driver. First everything seemed ok but the succes rate was less than 50%. After installing XDamage and enabling it in xvidcap the success rate goes up to 90% but the result is still bad when scrolling windows only part of the screen gets updated. After loosing almost 2h with xvidcap compilations and xorg.conf I gave up. Could not conclude in any way if this is ATI related or not.

Putting everything on the web

Choice 1.

Use the flv flayer from here: http://www.jeroenwijering.com/?item=Flash_video_Player this works fine but it’s not free for commercial use

Choice 2.

Write my own player. I’m not a very big fan of flash but I recently learned about flex and that I could use it in linux so here is the result, a small flex application which does the same thing in a more crude way.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" styleName="plain" creationComplete="initVars()">
<mx:Script><![CDATA[
     // Declare bindable properties in Application scope.
     [Bindable]
     public var flvFile:String;
     
     // Assign values to new properties.
     private function initVars():void {
        flvFile = Application.application.parameters.flvFile;
     }

     import mx.controls.HSlider;
     import mx.controls.VideoDisplay;
     private function update():void {
	videoDisplay.playheadTime = hSlider.value;
	videoDisplay.play();
     }
  ]]></mx:Script>
  <mx:ApplicationControlBar dock="true" height="30">
    <mx:Label 
       text="{Application.application.parameters.flvTitle}" 
       fontFamily="Verdana" fontWeight="bold" fontSize="12"
       />
    <mx:Spacer width="100%"/>
    <mx:HSlider change="update()" click="update()" mouseDown="videoDisplay.pause()" showDataTip="false" id="hSlider" width="90%" minimum="0" maximum="{videoDisplay.totalTime}" bottom="10" horizontalCenter="0"/>
    <mx:Button label="Play" click="videoDisplay.play();" fillColors="[0xd5270c, 0x7e0c0c]" fillAlphas="[1, 1]" color="0xFFFFFF" textRollOverColor="0xf6e80f"/>
    <mx:Button label="Pause" click="videoDisplay.pause();" fillColors="[0xd5270c, 0x7e0c0c]" fillAlphas="[1, 1]" color="0xFFFFFF" textRollOverColor="0xf6e80f"/>
    <mx:Button label="Stop" click="videoDisplay.stop();" fillColors="[0xd5270c, 0x7e0c0c]" fillAlphas="[1, 1]" color="0xFFFFFF" textRollOverColor="0xf6e80f"/>
    <!--mx:ProgressBar id="loadProgress" label="" mode="event" minimum="0" maximum="100" source="{videoDisplay}" trackHeight="15"/-->
  </mx:ApplicationControlBar>
  <mx:VBox width="100%" height="100%">
    <mx:VideoDisplay id="videoDisplay" playheadUpdate="hSlider.value=videoDisplay.playheadTime" source="{flvFile}" height="100%" width="100%"/>
  </mx:VBox>
</mx:Application>

Here is how it is used in html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load test</title>
<script type="text/javascript" src="swfobject.js"></script>
</script>
</head>
<body>

<div id="zone1">&nbsp;</div>
<script type="text/javascript">
// <![CDATA[
var z1 = new SWFObject("play_flv.swf", "zone1", "1012", "730", "9", "#000000");
z1.addVariable("flvFile", "http://www.len.ro/screencasts/test.flv");
z1.addVariable("flvTitle", "Test screencast");
z1.write("zone1");
// ]]>
	</script>
</body>
</html>

Result

A complete screencast done just on linux from the screen to the web. Check the solis screencasts which are done using this method.

Be Sociable, Share!

•