Simple Two-Way Audio/Video Chat Application With FMS3

In this post I will explain how to make a simple Two-Way A/V Chat Application with FMS3.

As we know that FMS3 application is the reference name we use in RTMP URL while connecting to FMS3 server. It's the folder name we create on server side. The chat application say "simplechat" will have two modules. An application can have several modules. Let's say we have two modules name Test1 and Test2. Both Test1 and Test2 will share the same FMS3 application and will connect to server. Both modules will receive the streams of each other when connect to server.

Below are the steps to start with chat application-

1: Create a new Flash File and name it to Test1.fla

2: In the Document Class text box in the Property inspector of flash document, write Test1

The simple interface of this application could be-



3: Create an ActionScript 3.0 file and name it to Test1.as and write the following lines in it.

package
{
import flash.media.Camera;
import flash.media.Microphone;
import flash.media.Video;
import flash.events.NetStatusEvent;
import flash.display.Sprite;
import flash.net.NetConnection;
import flash.net.NetStream;

public class Test1 extends Sprite{

private var netConnection:NetConnection;
private var rtmpStr:String;
private var nsSubscribe:NetStream;
private var nsPublish:NetStream;
private var camera:Camera;
private var microphone:Microphone;
private var user1Video:Video;
private var user2Video:Video;

public function Test1 (){

rtmpStr="rtmp://localhost/simplechat"; //localhost can be replaced with your LAN IP or remote server IP points to FMS server.

attachCamera();
attachMicrophone();
attachVideoObjects();

netConnection=new NetConnection();
netConnection.addEventListener (NetStatusEvent.NET_STATUS,checkForConnection);
netConnection.connect(rtmpStr);

}

private function checkForConnection(event:NetStatusEvent):void{

event.info.code == "NetConnection.Connect.Success";

if (event.info.code){
nsPublish=new NetStream(netConnection);
nsPublish.attachAudio (microphone);
nsPublish.attachCamera (camera);
nsPublish.publish("user1","live");
nsSubscribe=new NetStream(netConnection);
nsSubscribe.play("user2");
user2Video.attachNetStream(nsSubscribe);
}
}

private function attachCamera(){

camera=Camera.getCamera();
camera.setKeyFrameInterval (9);
camera.setMode (240,180,15);
camera.setQuality (0,80);
}

private function attachMicrophone(){

microphone=Microphone.getMicrophone();
microphone.gain=80;
microphone.rate=12;
microphone.setSilenceLevel(15,2000);
}

private function attachVideoObjects(){

user1Video=new Video(camera.width,camera.height);
addChild(user1Video);
user1Video.x=25;
user1Video.y=35;
user1Video.attachCamera(camera);
user2Video=new Video(camera.width,camera.height);
addChild(user2Video);
user2Video.x=(user1Video.x+ camera.width +15);
user2Video.y=user1Video.y;
}
}
}

4: Save the Test1.as file and then publish Test1.fla to generate swf, html and JavaScript file.

5: Repeat the step 2, 3 and 4 with little change. In the Document Class text box in the Property inspector of flash document, write Test2
Now the .fla file will be named as Test2.fla and .as file will be named as Test2.as.

The changes in the Test2.as file will be-

public function Test2() in place of public function Test1()

nsPublisher.publish("user2","live"); in place of nsPublisher.publish("user1","live");

nsSubscriber.play("user1"); in place of nsSubscriber.play("user2");

6: Save the Test2.as file after these changes and publish the Test2.fla file to generate swf, html and JavaScript file.

Test the application with two users on two different computers with Mic and Camera. One user will open Test1.html file and other user will open Test2.html file and both will see each other's video as given in below picture.


This was the simplest two-way A/V chat application with FMS3. The following classes were used in this tutorial.

Camera
Microphone
Video
NetStatusEvent
Sprite
NetConnection
NetStream

You can read more about these API from the LiveDocs.

You can also extend this example to work with server side script as well.