Welcome to End Point’s blog

Ongoing observations by End Point people

Streaming Live with Red5 Media Server

Are you excited about Google+ Hangouts? Would you be even more excited to implement live streaming yourself?
Today we will take a look under the hood of broadcasting and even start implementing our own mini hangout.

A bit of theory

Live streaming is based on RTMP protocol. It is able to transfer video, audio and generally any data in real-time over Internet between server and client.
The most popular combination for video/audio streaming is Adobe Flash Player as a client software and a proprietary Adobe Flash Media Server as a server software. Another option is Wowza Streaming solutions.
Luckily for us there is an open-source Red5 Media Server – the most popular if not the only one stable of all open-source media streaming servers. We will be leveraging Red5 to dive into RTMP world and the cutting edge streaming technologies.

Exploring Red5 Media Server

Download and install Red5 Media Server for your environment from here. Now it is time to implement a sweeping live stream between our two laptops.
Red5 comes with the set of demo applications that are very handy to base the development on. Demo applications can be installed via the Installer. For the purpose of this article we need to install the "oflaDemo" application.
After installation is complete, we can launch the demo for Simple Broadcaster application. In Simple Broadcaster we click "Connect" button, grant Flash Player permission to use camera and microphone, and  – voila! – we should now be broadcasting live via Simple Broadcaster application to oflaDemo application.
If we use another browser  to open Simple Subscriber application, or even another laptop with the IP  of the broadcasting computer, we will be able to stream the video live. It is quite noticeable that quality drops in Simple Subscriber.

In this example we also learned that rtmp://localhost/oflaDemo is the server communication point to where we publish and stream videos.

Customizing SimpleBroadcaster and SimpleSubscriber

Next comes the most interesting part - embedding SimpleBroadcaster and SimpleSubscriber into the web page.
We can't really use their default versions "as is". We want to remove input box, "Connect" button and Red5 connection indicator. We also want the streaming to start automatically.
It's more convenient to implement "Start" button in HTML and trigger the loading of SWF on "click", because then we can easily change it, while changing SWF requires a lot of effort.  You will be able to understand how exactly much effort it takes in a minute.
My plan is to use Flash CS5 to modify SimpleBroadcaster.fla and SimpleSubscriber.fla. Flash Builder 4.6 to modify ActionScript classes for SimpleBroadcaster and SimpleSubscriber. Finally I will use Flash compiler to generate SimpleBroadcaster.swf and SimpleSubscriber.swf from .as and .fla files.
Finally, some coding versus talking!
Red5 sources are conveniently available as a Google Code project. It comes in server-side and the most interesting to us flash-side

 > svn checkout red5

Step 1.
Let's open simpleBroadcaster.fla located in the very root of the download in Flash CS5.

and take a pick at the Library panel.

Let's double-click on the Embedded Video 1, open Window -> Properties panel and modify the size of the video to occupy the full documents area. Alternatively, we may change the document size to fit the video: right-click on the grey area, pick Document settings from the context menu and adjust dimensions. Either way, now we should drag the video rectangle to fit the document. We will save the document and repeat the same sequence of actions for simpleSubscriber.fla, because they are really no different.

Step 2.
Let's now open the "red5" directory that we checked out in FlashBuilder.

We immediately find the main class for simpleBroadcaster.fla org.red5.samples.livestream.broadcaster.Main in "classes" directory.
The key function here is "configUI".

private function configUI():Void   
    // setup the tooltip defaults  
    Tooltip.options = {size:10, font:"_sans", corner:0};  
    // setup cam  
    cam = Camera.get();  
    cam.setMode(480, 320, 15);  
    // setup mic
    mic = Microphone.get();  
    // get notified of connection changes  
    connector.addEventListener("connectionChange", this);  
    // set the uri  
    Connector.red5URI = "rtmp://localhost/oflaDemo";  
    // initialize the connector  

Let's look into Connector class org.red5.utils.Connector.

 // UI Elements:
 private var alert:SimpleDialog;
 private var connect:IconButton;
 private var disconnect:IconButton;
 private var light:ConnectionLight;
 private var uri:TextInput;
 public function configUI():Void 
  // instantiate the con  qnection
  connection  = new Connection();

  // register the connection with the light so it can add a listener

  // hide disconnect button
  disconnect._visible = false;

  // set the URI
  uri.text = red5URI;

  // setup the buttons
  connect.addEventListener("click", Delegate.create(this, makeConnection));
  disconnect.addEventListener("click", Delegate.create(this, closeConnection));
  connect.tooltip = "Connect to Red5";
  disconnect.tooltip = "Disconnect from Red5";

  // add listener for connection changes
  connection.addEventListener("success", Delegate.create(this, manageButtons));
  connection.addEventListener("close", Delegate.create(this, manageButtons));

 public function makeConnection(evtObj:Object):Void
  if(uri.length > 0) 
    var goodURI = connection.connect(uri.text, getTimer());
    if(!goodURI)"Please check connection URI String and try again.");

We will now make quick and dirty changes to get the proof of concept working. We will hide all the unnecessary UI elements, then convert the listener to the regular function, and call it from the configUI function.

public function configUI():Void 
  disconnect._visible = false;
  connect._visible = false;
  uri._visible = false;
  light._visible = false;

  connection  = new Connection();
  if (makeConnection(Connector.red5URI)) {
    dispatchEvent({type:"connectionChange", connected: true, connection:connection});

 public function makeConnection(uri:String):Boolean
  var result:Boolean = false;
  if(uri.length > 0) 
    result = connection.connect(uri, getTimer());
    if(!result) {"Failed to connect.");
  return result;

Done! After making these changes we are good with SimpleSubscriber as well, because both classes use the same Connector class.

Unfortunately Red5 is written in ActionScript 2. We can't really use any of the newer mxml compilers installed on our systems, because they compile ActionScript 3. Flex SDK is also only compatible with ActionScript 3.  I spent quite a lot of time searching for a simple and working AS2 compiler on the Internet, and luckily, found one called MTASC.
The compiler needs to be supplied with the correct MX Component libraries to compile Red5 classes. Flash CS6 has those libraries, but in case you don't have CS6 handy I put them on GitHub for you.

> export PATH="/path/to/mtasc-mx/bin:/path/to/mtasc-mx/std:$PATH"
> cd "/path/to/red5/classes" 
> mtasc -cp "." -swf ../simpleBroadcaster.swf -mx org/red5/samples/livestream/broadcaster/ -v
> mtasc -cp "." -swf ../simpleSubscriber.swf -mx org/red5/samples/livestream/broadcaster/ -v
The compiled swf's can be found in the root of the current directory.
At this point it is possible to create a broadcast and stream it just by launching the swf's, first broadcaster, then subscriber. However, we would like to be able to broadcast via network.

Are you ready to broadcast?

In order to enable broadcasting in our web application we will need to drop the compiled swf files into its public directory.
We will then download swfobject.js JavaScript library and drop it into the public directory of our web application as well.
We will create broadcast.html file.

 <title>Red5 Demo - Simple Broadcaster</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <script type="text/javascript" src="swfobject.js"></script>
 <script type="text/javascript">
<style media="screen" type="text/css">#myContent {visibility:hidden}</style>
 <div id="myContent">
 <h1>You need the Adobe Flash Player for this demo, download it by clicking the image below.
 <p><a href="">
<img src="" alt="Get Adobe Flash player"/>

Then we will create watch.html file.

  <title>Red5 Demo - Simple Subscriber</title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <script type="text/javascript" src="swfobject.js"></script>
 <script type="text/javascript">
<style media="screen" type="text/css">#myContent {visibility:hidden}</style>
 <div id="myContent">
 <h1>You need the Adobe Flash Player for this demo, download it by clicking the image below.
 <p><a href="">
<img src="" alt="Get Adobe Flash player"/>

At this point we are able to start a broadcast at http://localhost/broadcast.html and watch it at http://localhost/watch.html! In this case I am broadcasting from Macbook and streaming to Windows laptop.

Sweet! Next step is to implement the actual two-way hangout with Red5 Media Server!

Read on here: Streaming Live with Red5 Media Server: Two-Way


max.lapshin said...

Hey, come on. Red5 haven't developed for years =)

Jon Jensen said...

Red5 looks pretty interesting. Thanks for writing about it, Marina. In your later posts do you plan to show how to run it on Linux in a server environment?

The Apache OpenMeetings projects uses Red5 and looks like it could be really useful:

Marina Lohova said...

Max, their website has last updated in January, 2012, and their code base is working.
I'm not saying that we would use Red5 for production, but it will definitely work for a proof of concept startup.

Anonymous said...

Please note -
second command that makes simpleSubscriber.swf need to update.
It is calling broadcaster's file , it should all Subscriber's.

> mtasc -cp "." -swf simpleSubscriber.swf -mx org/red5/samples/livestream/broadcaster/ -v

should be -

> mtasc -cp "." -swf simpleSubscriber.swf -mx org/red5/samples/livestream/subscriber/ -v

Admin -

MJ said...

Actually, Red5 is currently the production server of choice for large corporations and hosting companies and private coding for HLS has already been done and is in use as we speak. The opens source version of HLS will hopefully arrive, though it's also been implemented and is working, though only through hands on configuration using ffmpeg and segmenter tools. It's such a viable choice for production, that Adobe has been forced to lower their price and broaden their licensing schemes and also post in their faqs why they believe their streaming server is better than opens source "clones" - that is to say Red5. Max, your problem is that you represent a competitor whose own website doesn't even have the demo working correctly and you blatantly violate the GNU license by stating that your "open source", cough, cough, cannot be used for commercial purposes. An overpriced license must be gotten from you. Sad, really. Very, ver sad.

Anonymous said...

Hi Marina,

thank you for your post. I have the RED5 server installed on Linux and working. For example oflaDemo works for me. But what I try to achieve is to have MP4 files in a separate directory and playable from FlowPlayer on a web client.

So, my only question is: how can I add a web application (similar to oflaDemo over RTMP) with my MP4 files inside WITHOUT installing the RED5 on my Windows and WITHOUT using Eclipse? Is it possible to create such web application directly on a Linux server intended for playing MP4 videos from outside?


Marina Lohova said...

Hello, Vlado,

as far as I understand, you would like to send your local MP4 files from Windows machine to RED5 installed on your Linux server, correct?

Perhaps, you can use Xuggler's ffmpeg version to do that. Here is a little tutorial on that:

Let me know if I understood your question correctly.

Anonymous said...

how do you link all needed classes and actionscript files for this application to work on a windows os? I downloaded the .fla demos and don't see how to edit what I need and then compile to shockwave. Please respond with contact info for further questions regarding this. Thanks!

Daniel Flores said...

Thank you Marina !, it works fine with some hacks in Windows 7 x64.

last @Anonymous you need to download the source from the svn repository and edit the files in the folder on classes\org\red5\samples\livestream\broadcaster, you can use a notepad. As well put the directory "mx" located on "mx2004/First Run/classes/" from the red5kit into the
"classes" directory of the downloaded sources, for compile fine with mtasc.

Romain said...

Hi Marina,

Thanks for your tutorial, that's very helpful.

Though I get this error when launching mtasc from the Terminal :

Red5Kit/bin/mtasc: Bad CPU type in executable

I use a MacBook Pro last gen, I believe that mtasc is not supported by recent CPUs ? Or is it a configuration problem ?
Did you work on a PowerPC or an Intel ?

Thanks for your help

Anonymous said...

Ciao Marina, thank you for your job.
I'm trying to apply this tutorial using Windows7,CS6.

Can you help about step 3?

Tnx in advance

Anonymous said...


I am java development.

Do you have some example of two people chating (videoconference)?

Thank you

24o7Network said...

We bought this server 3 days ago:
1 x 3.4GHz / 32GB
Intel E1240-V2 3.4GHz CPU
32GB ECC 1333MHz RAM
1 x 120GB SSD
10TB Data Transfer
100Mbps Premium IP

We are running a streaming server (Red5) here. It is being used to record user's webcam streams. We're facing huge frame drops onthis server, resulting in jerky videos.

Earlier we ran the setup on a domestic PC on a 1 Mbps line. We've successfully tested it from various locations throughout the world, including the US. We've recorded multiple videos without any frame drops, but no matter what connection speed, recording to your server gives us frame drops.

The set up on this server was copied as-it-is from our domestic PC. No changes were made, except the file paths.

What could possibly be the problem? Something on the Red5 part of things is dropping frames. The client side, a flash recorder is the same with the same recording settings.

We are using: Red5 0.8, Flash-VideoIO recorder on Ubuntu 12.04 LTS x64.

Anonymous said...

It sounds maybe a stupid question, but I can't figure it out. How do you get the source code of the actionscript in step 2? I downloaded the trial of Flash Professional and Flash builder, but I can't figure out how I to open the scripts in the fla file (simpleSubscriber.fla).

I Googled it, but non of the solutions worked so far :(

Marina Lohova said...


my trial has expired, so I can't recheck, but as far as I remember you should go the the Library panel in Flash CS6, right-click on the movie clip and choose "Edit Class".

Hope it helps!

Anonymous said...

Thanks a lot for the articles!!

Kim Hùng Lê said...

I have a error "Fatal error: exception Sys_error("simpleBroadcaster.swf: No such file or directo
ry")". Please help me.....

David Rehle said...

Same here :-(

Fatal error: exception Sys_error("simpleBroadcaster.swf: No such file or directory")

What to do now?

Please help...

David Rehle said...

ok, comiler says option -swf means update, so i've copied the original .swf to the classes folder, then it works

thx for this tutorial

Marina Lohova said...

Hello, guys,

I added simpleBroadcaster.swf to the repo and corrected the code in the blog post.

Thanks for pointing out the problem!

Anonymous said...

Hi Marina,
thanks for your article. I don't quite understand one thing. Where exactly does the encoding part of the video happen? Does the simple broadcaster take care of it? Can i setup specific bitrate at which the video will stream?
Thanks in advance for clarification

Ryan Maule said...

This works well!

The output of Subscriber is not the same as the input of Broadcaster. simpleBroadcaster shows my video feed in widescreen (macbook pro cam). simpleSubscriber seems to crop the video output.

Any ideas how to solve that Marina?

Aswin Sundaram said...
This comment has been removed by the author.
Mark said...

Hi, would you be able to share the modified versions of simpleBroadcaster.swf and simpleSubscriber.swf please?

akc said...

hey sweetie "Marina Lohova" beautiful pic of
ur.. i like that. And very good tutoiral too....

AnilKumar Kammari said...

Hey Marina,
I want to add the the broadcasting to my webapp. How to proceed. I have running red5 and your demos are working. But to embed this in a normal webpage running is some other server?
Thanks in advance

satya said...


I want to know does RED5 supports variable play or trip play of video like wowza has.

Syed.Salman Shah said...

How can Stream my web cam or any other video streaming device on red5

alejandro Romero said...

Hi Marina,
I'm trying to compile in Windows but I had this error: class not found:
I would appreciate your help!

bijil kuriakose said...

Can anyone guide me to create a virtual classroom please please please......

Fero Gachulinec said...

Very good guide Marina. I am sending a modified oflaDemo.swf with TV File Manager (use password: test) here: