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<br></br>apt-get install liba52-dev libdts-dev libfaac-dev libgsm1-dev liblame-dev libogg-dev libvorbis-dev libtheora-dev <br></br>libxvidcore4-dev libx264-dev libavcodec-dev libavformat-dev liboggflac++-dev liboggflac++2c2 liboggflac-dev <br></br>liboggflac3 libtheora-dev libtheora0 ffmpeg2theora<br></br>

Compile and install xvidcap:

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

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    <br></br> -oac mp3lame -lameopts abr:br=56 -srate 22050 -ovc lavc    <br></br> -lavcopts vcodec=flv:vbitrate=500:mbd=2:mv0:trell:v4mv:cbp:last_pred=3<br></br> -lavfopts i_certify_that_my_video_stream_does_not_use_b_frames<br></br>

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"?><br></br><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" styleName="plain" creationComplete="initVars()"><br></br><mx:Script><![CDATA[<br></br>     // Declare bindable properties in Application scope.<br></br>     [Bindable]<br></br>     public var flvFile:String;<br></br>     <br></br>     // Assign values to new properties.<br></br>     private function initVars():void {<br></br>        flvFile = Application.application.parameters.flvFile;<br></br>     }<br></br><br></br>     import mx.controls.HSlider;<br></br>     import mx.controls.VideoDisplay;<br></br>     private function update():void {<br></br>	videoDisplay.playheadTime = hSlider.value;<br></br>	videoDisplay.play();<br></br>     }<br></br>  ]]></mx:Script><br></br>  <mx:ApplicationControlBar dock="true" height="30"><br></br>    <mx:Label <br></br>       text="{Application.application.parameters.flvTitle}" <br></br>       fontFamily="Verdana" fontWeight="bold" fontSize="12"<br></br>       /><br></br>    <mx:Spacer width="100%"/><br></br>    <mx:HSlider change="update()" click="update()" mouseDown="videoDisplay.pause()" showDataTip="false" id="hSlider" width="90%" minimum="0" maximum="{videoDisplay.totalTime}" bottom="10" horizontalCenter="0"/><br></br>    <mx:Button label="Play" click="videoDisplay.play();" fillColors="[0xd5270c, 0x7e0c0c]" fillAlphas="[1, 1]" color="0xFFFFFF" textRollOverColor="0xf6e80f"/><br></br>    <mx:Button label="Pause" click="videoDisplay.pause();" fillColors="[0xd5270c, 0x7e0c0c]" fillAlphas="[1, 1]" color="0xFFFFFF" textRollOverColor="0xf6e80f"/><br></br>    <mx:Button label="Stop" click="videoDisplay.stop();" fillColors="[0xd5270c, 0x7e0c0c]" fillAlphas="[1, 1]" color="0xFFFFFF" textRollOverColor="0xf6e80f"/><br></br>    <!--mx:ProgressBar id="loadProgress" label="" mode="event" minimum="0" maximum="100" source="{videoDisplay}" trackHeight="15"/--><br></br>  </mx:ApplicationControlBar><br></br>  <mx:VBox width="100%" height="100%"><br></br>    <mx:VideoDisplay id="videoDisplay" playheadUpdate="hSlider.value=videoDisplay.playheadTime" source="{flvFile}" height="100%" width="100%"/><br></br>  </mx:VBox><br></br></mx:Application><br></br>

Here is how it is used in html:

<br></br><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br></br><head><br></br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br></br><title>Load test</title><br></br><script type="text/javascript" src="swfobject.js"></script><br></br></script><br></br></head><br></br><body><br></br><br></br><div id="zone1">&nbsp;</div><br></br><script type="text/javascript"><br></br>// <![CDATA[<br></br>var z1 = new SWFObject("play_flv.swf", "zone1", "1012", "730", "9", "#000000");<br></br>z1.addVariable("flvFile", "http://www.len.ro/screencasts/test.flv");<br></br>z1.addVariable("flvTitle", "Test screencast");<br></br>z1.write("zone1");<br></br>// ]]><br></br>	</script><br></br></body><br></br></html><br></br>

Result

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