Getting Ready

First, a word about the technology stack: a little bit of Java6/Java EE will be used for the server-side work (Red5 is written in Java), ActionScript2/Adobe Flash CS6 will be the primary tool for the client side development, and OS X Mountain Lion is my operating system.

Red5 Server comes with the set of sample applications that provide the source code for about everything you may want to achieve. The primary challenge is to unleash the power of it, since the samples fall extremely short of documentation! The "fitcDemo" application will serve as a base for all our customization.

Originally I made all the development in Red5 RC 1.0 version where fitcDemo was present. Unfortunately, when I downloaded the latest Red5 1.0.1 release yesterday it was simply not there! The source code was still in the repo, just outdated and not working. Well, I did all the work for Red5 team, so you can just download fitcDemo.war from my repo and drop it into the "webapps" directory of Red5 1.0.1 installation - and you are good!

The goal is to make our Red5 conference look as neat as Google Hangout.

Sleek Subscribers

Default video conference has five subscribers statically positioned on the stage. It's way more fun to have the subscribers added and removed on the fly as they connect to the server. So let's do that! I have the complete tutorial code based on Red5 1.0.1 The final version is in my Github repo, so I will be explaining parts of it further. Open videoConference.fla in Flash. I used CS6 for all the FLA/ActionScript editing in the tutorial.

Edit the VideoConference clip in the Library, to remove everything in it and add a ScrollPane with the following properties:

Edit the VideoPool clip, to remove everything in it as well and drag a Broadcaster clip to the top left corner:

Broadcaster and Subscriber clips should be modified too and have only the video component visible. You may look into the complete source code for details. Don't forget to change the Publish Settings to Flash Player 8; ActionScript2 and publish.

Modify Connector.as to point to the Red5 server. It is important to specify the IP address of the host machine rather than just "localhost", so other computers can join the hangout over network.

Get rid of all the default Subscriber variables in the class and change configUI():

private function configUI():Void
{
subscriberList = [];
}

Open VideoPool.as and modify getVideoContainer() so that every subscriber will be dynamically created and positioned on stage. The row will have 4 streams with the broadcaster stream (your computer's camera) being the first in the first row, and more rows will be created in the scroll pane to accommodate more streams.

If the subscriber is added, at some point it may need to be removed! Add removeSubscriber() function that will delete the disconnected subscriber and reposition all the other subscribers and invalidate ScrollPane.

Finally open VideoConference.as. This is a controller class, the Red Queen of all the above classes! It manages all the incoming subscribing streams and the broadcasting stream. When your computer is ready to broadcast, the camera is up and the broadcasting stream received its id, VideoConference sends requests to get all the publishing streams to the url on the server and process them as the subscribers.

Stylish Spotlight

The "Spotlight" component is the larger video of the "talking" person that shows up when one of the smaller previews is clicked. simpleSubscriber.fla is the ideal base for this component:

Subscriber and Broadcaster will respond to the "click" event and call JavaScript function with the video stream name as a parameter. The video stream name is just a string like "videoStream_12" denoting the 12th stream accepted by "fitcDemo" application.

By the way the -version 8 flag for mtasc was added specifically to compile ExternalInterface, otherwise, these libraries would not be found.

Chat in the absence of Sound

One thing I really appreciate about the Google Hangout architecture is that it does not just make the whole page a bulky <embed> or <object> and lock everything into the external component. I love how they use the familiar and friendly JavaScript and HTML to add some interactive features. That's why I decided to break the single VideoConference component into pieces as well and tie them together on a web page.

The original conference had its audio support commented out with the note about performance issues. Bummer! This will surely need to be addressed, but for now I decided to use the existing chat and make it separate. Create a blank document chat.fla and drag Chat clip from the VideoConference Library to the stage.

Remove any reference to VideoConference and VideoPool from Chat.as, create its own GlobalObject and Connection and paste the sound settings from VideoConference.as:

And enjoy chatting with yourself for a while in different browser tabs:

Final result

After a bit of styling and herding my test participants, here is what I got:

Questions, questions

There are problems to be addressed yet.

First, there is no audio. It's commented out in the original code with the note about performance issues. Silence may be golden, but the grimace-enhanced chat experience is totally not acceptable for production!

Second, the whole performance talk brings up the other important questions: How many subscribers can this setup handle? Is it possible to achieve the better video quality? Why is the video stream choppy at times?

Finally, every application needs a mobile presence. Will it be possible to port the client to mobile devices using AIR? How to port to iPads and iPhones?

The flash source code in its entirety is located in my Github repo. Please, keep in mind, that the code is not perfect, and the logic can be better organized between classes with event handlers. The demo application can be found here. MTASC compiler and MX libraries for compilation are available here.

I would love to hear your feedback on this!

13 comments:

Anonymous
said...

Hello Marina! I want thanks you for your work)

you see, i must pass my diploma in this year, and summary of my diploma is :'Video chat using RoR+REd5'

can you tell me how i can integrate Red5 in RoR application?Thanks a lot)

First of all, I landed in your blog after googling for "red5 two way". I was looking for quality tuts for red5 and when asking for help in StackOverflow, I found nothing but cynicism. I read both your posts on red5. And regarding audio you can use Xuggler to do stream merges, I found the following link: https://groups.google.com/forum/#!msg/xuggler-users/s6zUCwYy98k/5J-YIkCSaEIJ.

Had a very bad time with setting up red5 until I stopped working on it for a few months.

The bug I posted got accepted in red5 main page but never saw any action.https://code.google.com/p/red5/issues/detail?id=350

Cant thank you enough. I will surely update you with my progress and share some code as well :)

Hi, I have a simple question. what software I need to send signal tv live, any live videos, from computer studio tv to red5 server?. In others words, live streaming with source signal in another computer.

Hello Marina - this is really cool! I recently installed Red5 on a CentOS server, with the goal of streaming my DJ sessions live on my web page. I've got all the components I need installed on my server - JDK, Red5, JWplayer - and Adobe Flash Media Live Encoder to broadcast - however, due to my noobishness, I am not able to get a connection to my server thru FMLE - I'm looking for a pro such as yourself to help finish the job, and I would of course pay you for your time - is this something that would interest you? If so, please contact me at 'djkfunk' AT 'gmail' DOT 'com'. Thanks, Kevin.

Can you please help me out with the workflow?I've downloaded all of the files from https://github.com/ftert/red5-flash . I opened the videoconference.fla that has the new elements on stage (your file that is). The next step would be to alter the as files according to the tutorial in the "red5-flash\trunk\classes\org\red5\samples\livestream\videoconference" folder? Those files are the classes that are referenced from within the videoconference.fla? So by publishing the .fla the swf will hold the changes? I should then use the mtasc utility to make it all compatible with red5? Please help me couse i'm getting crazy over this. :-)