Angel’s Blog

Someone right now is looking pretty tired, staring at a laptop trying to get inspired…

extContent in action (part1)

Basic templates management. In the following video you will see how to split and organize the template of your future site

Content adding and editing:

Menus (templates, structure, usage)

Content Indexing and php tags options

Here you can find the final result :  http://dev.ajaxinside.de/projects/extcontent/


extContent concept

Application Environment (XFCE like TaskBar and Custom WindowManager)

Content Management

Menu’s Structures

Indexing of Content Tables

This is just a technology preview developed with extJS 3.0

You can find more detailed videos here

I am not planning a release in the near future.


SDB pre-release

Get the Flash Player to see the wordTube Media Player.

Used Technologie:
the ExtJS framework,
custom php to handle the server-side stuff,
a lot of patience and sleepless nights


Eclipse for web development

After some sleepless nights I succeed to pack up an Eclipse distribution that almost match all my needs.
It’s made for php, extjs (javascript) development with all the extra tools you will need like Zend Debugger, FTP / SSH client, SVN and etc.

Here a small list of everything extra added :

JRE is included but you can replace it with another one to match your arhitechture (jre folder). Currently there is a version for Windows. If i have some time i will added and one for Linux and OSX. Basically you can use the configuration and features folders and copy them over another eclipse build, but i never tried it.

I am not the author of anything ! I just combined some free plugins and features. If you care about licenses and etc., please take a look on the vendor’s sites. It’s all free software, but you never know …

This software comes with absolute no guarantee, so please use on your own risk.

Installation:

Unpack and start.

Download here


OC – new charts preview



Get the Flash Player to see the wordTube Media Player.

Used technologies:
ExtJS framework
ux.Media ChartPack 2 (extjs extension)
Fusion Flash Charts
… A lot of custom work :)


FLV steaming – server/client side

This is the shortest how-to ever. You won’t get any extra info, the idea is to install the whole scheme fast as possible and then spend some time reading docs for each separate module.
This is how to make HTTP FLV streaming using the JW FLV Media Player and the lighttpd web server.
Here we go:
1. Installation
Install the lighttpd server. I am using Ubuntu, so i will install it via the apt-get package system:

sudo apt-get install lighttpd

2. Configuration

The first we have to do is change the default listening port to 81 (optional if you are already using apache on the same host, or whatever you decide to use) and enable the needed for flv streaming modules (mod_flv_streaming and mod_secdownload ). Edit the following file : /etc/lighttpd/lighttpd.conf and change the server.modules and the server.port parameters:

  1. server.modules = (
  2. "mod_access",
  3. "mod_alias",
  4. "mod_accesslog",
  5. "mod_compress",
  6. #           "mod_rewrite",
  7. #           "mod_redirect",
  8. #           "mod_status",
  9. #           "mod_evhost",
  10. #           "mod_usertrack",
  11. #           "mod_rrdtool",
  12. #           "mod_webdav",
  13. #           "mod_expire",
  14.     "mod_flv_streaming",
  15.     "mod_secdownload", ## optional
  16. #           "mod_evasive"
  17. )
  18. flv-streaming.extensions = ( ".flv")

and

  1. ## bind to port (default: 80)
  2. server.port = 81

Then start the lighttpd server ( Ubuntu )

sudo /etc/init.d/lighttpd start

3.1 Converting regulat video clips into .flv

Before compiling the ffmpeg binary, you have to download and install some development libraries. Please install liblame-dev and libvorbis-dev and all their dependencies:

apt-get install liblame-dev

apt-get install libvorbis-dev

Then go to your favorite source folder and download there the current svn server of ffmpeg

cd /usr/local/src/

If you don’t have subversion installed:

apt-get install subversion

Download the source code:

svn checkout svn://svn.mplayerhq.hu/ffmpeg/trunk ffmpeg

Open the downloaded directory:

cd ffmpeg/

and compile the ffmpeg binary with the following keys

./configure –enable-shared –prefix=/usr –enable-gpl –enable-pthreads –enable-libmp3lame –enable-libvorbis

make

Wait a lot of time …

and finally install it :

make install

2. Converting movies
Lets create two separate folders for “ready to be streamed movies” and “unconverted movies”

mkdir /var/www/movies/

mkdir /var/www/movies/convert_me/

mkdir /var/www/movies/flv/

Copy a favorite movie or clip in /var/www/movies/convert_me/ and then execute:

ffmpeg -i /var/www/movies/convert_me/myclip.avi -s 320×240 -ar 44100 -r 12 /var/www/movies/flv/myclip.flv

3.2 FLV files

You have to prepare your flv for streaming. I am not really a video encoding/decoding guru, so i am sharing my solution to the problem, but i am not sure it is the best possible.

Install flvtool2:

sudo apt-get install flvtool2

Put some flv movie somewhere inside your DocumentRoot folder ( for example /var/www/path/clip.flv) and then use the flvtool2 to generate the needed for the server meta-tags inside your flv video.

flvtool2 -U -p /var/www/path/clip.flv

Here i am using two keys :
-U Updates FLV with an onMetaTag event
-p Preserve mode only updates FLVs that have not been processed before
another interesting switch for whole folders will be :
-r Recursion for directory processing

As you may notice, the flvtool2 don’t have so many options at all, so it will be good to make a little more research about the features of this tool.
You can test the generated meta tags using the debug command in flvtool2.

flvtool2 -D clip.flv

Be prepared for a lot of output… It looks like this :

  1. #1 Meta Tag (onMetaData): timestamp 0, size 7910, data size 7899
  2. #2 Audio Tag: timestamp 0, size 274, data size 263
  3. #3 Audio Tag: timestamp 26, size 274, data size 263
  4. #4 Video Tag (Keyframe): timestamp 38, size 39766, data size 39755
  5. #5 Audio Tag: timestamp 52, size 274, data size 263
  6. #6 Video Tag (Interframe): timestamp 71, size 5289, data size 5278
  7. #7 Audio Tag: timestamp 78, size 274, data size 263
  8. #8 Audio Tag: timestamp 104, size 274, data size 263
  9. #9 Video Tag (Interframe): timestamp 105, size 4334, data size 4323
  10. #10 Audio Tag: timestamp 130, size 274, data size 263

Now your clip.flv is ready to be streamed.

4. FLV Client Player

Download the JW FLV Media Player from http://www.jeroenwijering.com/ and unpack the archive somewhere in your www directory. Create a html file in the same directory as your player with the following source:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <title>JW Player for Flash</title>
  5. </head>
  6. <body>
  7.  <div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>
  8.  <script type="text/javascript" src="swfobject.js"></script>
  9.  <script type="text/javascript">
  10.   var s1 = new SWFObject("player.swf","ply","328","200","9","#FFFFFF");
  11.   s1.addParam("allowfullscreen","true");
  12.   s1.addParam("allowscriptaccess","always");
  13.   s1.addParam('wmode','opaque');
  14.   s1.addParam('flashvars','file=http://your_lighttpd_server.com:81/path/clip.flv&streamer=lighttpd');
  15.   s1.write("container");
  16.  </script>
  17. </body>
  18. </html>

Save it as test_stream.html and open it with your web browser ( http://your_lighttpd_server.com:81/path/mediaplayer/test_stream.html). If your paths are correct you will be able to watch your clip.flv with the flv player.
In this example i am using the same server (lighttpd) for hosting the flv player and the clip, but it is possible another webserver to be used. For example you can host your site on Apache and use lighttpd only for storing the streamed videos!

5. Some technical information to help you understand the idea
Let’s take more detailed view of the JW Player’s configuration:

  1. s1.addParam('flashvars','file=http://your_lighttpd_server.com:81/path/clip.flv&streamer=lighttpd');

Whe have two parameters:
file = link to the flv file we want to stream
streamer = lighttpd
With the second parameter we are activating the native flv stream support in the lighttpd server. After you start the playback of the video and forward to a spot that has not been downloaded yes, you will notice that another parameter will be passed to the flv file :
start = # of frame to start (here is where the meta tags we generated with flvtool2 are used to index the frames in the flv file). The lighttpd parse all the requests to the flv file and starts the streaming from the requested frame.

That’s all folks.

For more info, here is where i got the info for this mini-how-to from:

http://www.jeroenwijering.com/?item=JW_FLV_Media_Player
http://www.jeroenwijering.com/?item=HTTP_Video_Streaming
http://www.inlet-media.de/flvtool2
http://blog.lighttpd.net/articles/2006/03/09/flv-streaming-with-lighttpd


OC – beta 1 (preview)

Get the Flash Player to see the wordTube Media Player.

OC – Operatives Controlling Application

Developed with extjs 2.2 framework + custom php framework

Current status – Development + bugfixing


A little lesson in JS objects

  1. myobject = function(){
  2.     // defining a method_1
  3.     function method_1() {
  4.    
  5.         function sub_method_1() {
  6.             // defining some var (sum_method_1_var) that gonna be used only in the sub_method_1
  7.             var sub_method_1_var = 7;
  8.            
  9.             // accessing the (z) var thats defined in the method_1
  10.             // this is only possible because sub_method_1 is a sub method of method_1, where the z var is defined
  11.             return sub_method_1_var+z;
  12.         }
  13.        
  14.         // defining a var (z) that will be used in method_1 but accessible
  15.         // from each sub method in  method_1
  16.         var z = 1;
  17.        
  18.         // getting the sum of z + sum_method_1_var ( 1+7)
  19.         // output: 8
  20.         var something = sub_method_1();
  21.         return something;
  22.     }
  23.    
  24.     //defing a value with the result from the method_1
  25.     result = method_1();
  26.    
  27.     // all the method defined in return {} will be public and accessible for the "outside world"
  28.     return {
  29.         // defining a public method
  30.         public_method : function() {
  31.             return result;
  32.         }
  33.     };
  34. }
  35. // defining x as myobject
  36. x = new myobject();
  37. // accessing the public_method of myobject (x)
  38. final_result = x.public_method();
  39. // alert the result
  40. alert(final_result);

A very handy tool for testing pieces of JS source is the Execute JS Add-on for Firefox
It’s the fastest and painless way to execute JS and debug if needed :

I hope this example may help someone :)


Microsoft Script Debugger – Why the fuck IE have to suck so bad ?!

Some time before – maybe 10 years ago I was the biggest Internet Explorer fan ever… Now we have version 7 :) Let me share some of my thoughts about it :

  1. Totally fucked up interface… I need at least a minute to find where the History is (for example)
  2. Don’t have any idea what the dudes used for a render Engine, but it sucks
  3. Slow, slow and sometimes too slow
  4. Some kind of shitty debuger for JS / AJAX… don’t really tell you something useful about the error in the script..

And here my small tip to all web developers – If you want to debug something under IE, install the official Microsoft Script Debugger. It’s free, but it’s nothing compared to Firebug. At least you will get some error messages.


My latest child – Orange II

As I used to live in Bulgaria, I always had an own webserver at home. And now, after 5 years working on a local installed XAMPP on my Windows box or even worst – working on the fly on customer’s server, I got my own server again. Got the hardware from ebay.de :

Pentium 4 – 1 ghz, 128 + 256 RAM, 20 GB hdd SCSI + 2×500GB RAID (USB external storage) and etc.

The distribution is Ubuntu 8.04 Server Edition. I took me only about 4-5 hours to set everything – Apache, mySQL,php, Subversion. I can only recommend Ubuntu for small servers and other low-cost solutions :)


Next Posts »

 

July 2010
M T W T F S S
« Sep    
 1234
567891011
12131415161718
19202122232425
262728293031  

Angel’s Blog

This work is licensed under a Creative Commons 3.0 License.

Sade Theme - Created by o-kahn