Red5 + BlazeDS = Realtime Video Chat Tutorial Part 3: Red5 video streaming

Hi, today i will show you how to enhance the application that we build in Tutorial part 1 and part 2, let add some video and voice to make things a little bit interesting. This tutorial continues part 1 and part 2 so take this parts first before reading this part.

So let's continue...

First we need to know a little about NetConnection and how to attach video and audio to the RTMP connection that we made in the last part of this tutorial. NetConnection comunicates with the server establishing a full duplex open connection in both the server and the client so it's perfect for use with the RTMP protocol.

Let's make some changes in the UI so we can add our camera, open Red5_BlazeDS_Flex.mxml and change the following (some update are made so we can use Flex 4.5 new components)

Red5_BlazeDS_Flex.mxml

<s:states>
        <s:State name="login"/>
        <s:State name="main"/>
    </s:states>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Group verticalCenter="0" horizontalCenter="0" includeIn="login">
        <s:Form>
            <s:FormItem label="Username">
                <s:HGroup>
                    <s:TextInput id="txtUsername"/>
                    <s:Button id="btnConnect" label="Login" click="btnConnect_clickHandler(event)"/>
                </s:HGroup>
            </s:FormItem>
        </s:Form>
    </s:Group>
    <s:HGroup width="100%" height="100%" includeIn="main">
        <s:VGroup width="30%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10"
                  paddingTop="10">
            <s:Form width="100%">
                <s:FormItem label="Broadcast" >
                    <s:HGroup>
                        <s:TextInput id="txtBroadcast"/>
                        <s:Button id="btnBroadcast" label="Broadcast" click="btnBroadcast_clickHandler(event)"/>
                    </s:HGroup>
                </s:FormItem>
            </s:Form>
            <mx:UIComponent id="outVideoWrapper" width="300" height="200"/>
            <s:Form>
                <s:FormItem label="Subscribe">
                    <s:HGroup>
                        <s:TextInput id="txtSubscribe"/>
                        <s:Button id="btnSubscribe" label="Subscribe"/>
                    </s:HGroup>
                </s:FormItem>
            </s:Form>
            <mx:UIComponent id="inVideoWrapper" width="300" height="200"/>
        </s:VGroup>
    </s:HGroup>
    <s:TextArea id="txtLog" width="100%" height="100" color="red" bottom="0"
                editable="false" includeIn="main"/>

This code add to our user interface 2 UIComponent this components will be the video wrappers in our application.

Now let’s attach the video, for make this possible we must do some steps:

1. Make the  connection (done in the last step)
   
2. Create the streams in/out
   
3. Setup  the devices
   
4. Create the video.

First we declare the variables:

In our Red5_BlazeDS_Flex.mxml in after the <s:Script>:

            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.managers.PopUpManager;
            private var connection:NetConnection;          
            private var userWindow:UsersWindow;
            private var timer:Timer;
           //Streams             
           private var inStream:NetStream;             
           private var outStream:NetStream;             
           //Devices             
           private var camera:Camera;             
           private var microphone:Microphone;             
           //Video             
           private var inVideo:Video;             
           private var outVideo:Video;

Then we need to add click event to our Broadcast button and then write a click handler function has follow:


           protected function btnBroadcast_clickHandler(event:MouseEvent):void {
                if(txtBroadcast.text.length > 3){
                    txtBroadcast.errorString = "";
                    //setup devices
                    camera = Camera.getCamera(); 
                    microphone = Microphone.getMicrophone();
                    //setup the streams
                    outStream = new NetStream(connection);
                    outStream.attachAudio(microphone);
                    outStream.attachCamera(camera);
                    outStream.publish(txtBroadcast.text);
                    //setup out video
                    outVideo = new Video(300,200);
                    outVideo.attachCamera(camera);
                    outVideoWrapper.addChild(outVideo)
                }else{
                    txtBroadcast.errorString = "Put a valid broadcast name";
                }
            }

Now add click event to our Subscribe button and then write a click handler function has follow:

           protected function btnSubscribe_clickHandler(event:MouseEvent):void
            {                 
                    if(txtSubscribe.text.length > 3){
                          inStream = new NetStream(connection);
                          inStream.play(txtSubscribe.text);
                          inVideo = new Video(300,200);
                          inVideo.attachNetStream(inStream);
                          inVideoWrapper.addChild(inVideo);
                }
            }

Now run your application, write a text to Broadcast and then test this in a different browser client open the same application put in the subscribe textinput the name of your broadcast and voila!! you will have the following:

 

That's all and of course here is the complete code, If you found any error or have any suggestion, please let me know.