Thursday, July 9, 2009

Adobe Flex: Recording a video stream with Red5

In this post I will show how simple it is to create an Adobe Flex client to record a video stream to a server running Adobe Media Server or Red5. Not only that I will also provide you with the code that you need to play the stream after you record it

Step 1

Connect to the Adobe Media Server or Red5 using NetConnection.connect()

private function connect():void {
nc = new NetConnection();
nc.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
nc.connect("rtmp://localhost/vmspeak");
...
}

In the case above we added an event listener to the NetConnection. Whether we are able to connect or not the method netStatusHandler is called. This method checks if the connection attempt is succcessful and enables/disables the record button based on that.

/**
* When the connection is successful we can
* enable the record button.
*
*/
private function netStatusHandler(event:NetStatusEvent):void
{
trace(event.info.code);
if(event.info.code == "NetConnection.Connect.Success")
{
this.recordButton.enabled=true;
}
else {
mx.controls.Alert.show("Failed to connect!");
}
}

Step 2

Request access to the web camera and microphone:

mic =Microphone.getMicrophone();
mic.setUseEchoSuppression(true);
mic.setSilenceLevel(0);
cam = Camera.getCamera();

When executing this code Flash will show you a popup window requesting permission to access the video and microphone.

Step 3

To start recording you need to create a NetStream object using as argument the NetConnection you created in the step before.

var ns:NetStream = new NetStream(nc);

Step 4

Attach the video and the camera to the NetStream and start recording.
You can also attach the camera to a Video object in order to see what the
camera is capturing during the recording. To record a stream one calls ns.publish("stream-name","record"). It is also possible to create a live stream, and in that case one would call ns.publish(stream-name, "live");

ns.publish("test","record");
ns.attachAudio(mic);
ns.attachCamera(cam);
this.video.attachCamera(cam);

Step 5

To stop the recording just call:

ns.close();


Step 6

To play what you have just recorded:

private function playRecording():void {
this.ns.play("test");
this.video.attachNetStream(ns);
}


It looks really easy doesn't it? The hardest part is to configure the media server in the backend.

Source for Video recorder with Red5 example

P.S. Before you can try the example you need to change the rtmp url to point to your media server.

2 comments:

marcexx66 said...

Hello Armindo, congrats for the tutorial. The link for the source code isn't working tough.

Thanks!

Armindo Cachada said...

I was able to access the source code. Click on this link. Once the example is loaded, right click on the mouse button. You will see a pop-up menu. Choose "View Source"

 
Software