Home » Code Samples, Flash, FMS, Tutorials

FMS (Flash Media Server) Video Chat

21 August 2008 | 66,010 views | 80 Comments

Here’s a quick way to setup a Flash Media Server chat room. This process only allows for two users to video chat over Flash Media Server, and was the start of a larger project that I was involved with.

Setting Up the Flash Media Server Application

It really what you are going to use in terms of either a FMS hosting company, or your own. Most of the FMS hosting companies use the same techniques when setting up their servers for users, but that might not always be true. In general, you simply need to make sure that you setup a new Application so that the chat has somewhere to store the published stream, and so that other flash files connected to the same Application can find that stream.

I use the hosting service provided by Influxis.com. It’s not as powerful as hosting my own FMS installation, but it definately does the trick for anything small or for testing.

If you use Influxis, or are going to after reading this article, here’s how to setup an Application on your server. As I mentioned, this may vary from host to host, but it’s generally the exact same process.

1) Login to your account, and choose the “File Admin” tab.
2) Click “Add New Application”.
3) Give your application a name. This can be anything you want.
4) You can leave “Include the standard main.asc file” turned on.
5) Hit Continue.
6) Copy and paste the rtmp address into the NetConnection connect portion of both of our users fla files.

client_nc.connect("rtmp://fms-server/app-name/");

You will need to replace “rtmp://fms-server/app-name/” with the rtmp address that the Influxis interface has provided you with. If you don’t use Influxis, you probably already know how your server is setup, and how to reference your new Application folder.

Now, I have two flash files that connect to the same application on the FMS. Each one publishes to a stream called “live”. There are two video objects on the stage that act as a preview of yourself, and the live camera from the other user. (The small video object on the left is your preview, and the larger on the right is the person you are talking to.)

Here is the code for the “user_1” swf file:


stop();

//setup the camera and mic for streaming
mycam = Camera.get();
mycam_audio = Microphone.get();

//control the cameras mode and quality
mycam.setMode(320,240,30);
mycam.setQuality(10000,100);

//attach a live preview of the camera to the 
//video object that is setup on the stage
cam_feed.attachVideo(mycam);
cam_feed.attachAudio(mycam_audio);

//connect to the Flash Media Server
client_nc = new NetConnection();
client_nc.connect("rtmp://fms-server/app-name/");
cam_ns = new NetStream(client_nc);

//attach our camera video and audio to the net stream
cam_ns.attachVideo(mycam);
cam_ns.attachAudio(mycam_audio);

//publish to our Flash Media Server as a 
//live stream called user_1
cam_ns.publish("user_1", "live");

//bring in user_2's video/audio
in_ns = new NetStream(client_nc);
in_ns.play("user_2");

//attach user_1's published audio and video
//so we can see them in the larger chat window
live_feed.attachVideo(in_ns);
live_feed.attachAudio(in_ns);


And here is the code for the “user_2” swf file:


//setup the camera and mic for streaming
mycam = Camera.get();
mycam_audio = Microphone.get();

//control the cameras mode and quality
mycam.setMode(320,240,30);
mycam.setQuality(10000,100);

//attach a live preview of the camera to the 
//video object that is setup on the stage
cam_feed.attachVideo(mycam);
cam_feed.attachAudio(mycam_audio);

//connect to the Flash Media Server
client_nc = new NetConnection();
client_nc.connect("rtmp://fms-server/app-name/");
cam_ns = new NetStream(client_nc);

//attach our camera video and audio to the net stream
cam_ns.attachVideo(mycam);
cam_ns.attachAudio(mycam_audio);

//publish to our Flash Media Server as a 
//live stream called user_2
cam_ns.publish("user_2", "live");

//bring in user_1's video/audio
in_ns = new NetStream(client_nc);
in_ns.play("user_1");

//attach user_1's published audio and video
//so we can see them in the larger chat window
live_feed.attachVideo(in_ns);
live_feed.attachAudio(in_ns);



You’ll notice the only difference between the two is how the streams are being published. User_1’s stream publishes to “user_1” and User_2 publishes to “user_2”. Each then streams in the others live stream while also showing their own stream as a preview for the other user.

Upload the user_1 and user_2 folders to your server (it doesn’t matter where they go on your server, just be sure you know how to get to them using your browser), and browse to them in two separate tabs, or windows. You will then get the same results that I have in the screen shot below.

So by creating an application folder on your FMS server, you can instantly chat with anyone. It’s not extremely robust, but with a little more work, it could turn into a full application.

Here’s a screen shot with me chatting with myself ūüėČ to give you an idea of what we are accomplishing.

Download the source

  • Uck123

    Hi, Derek.

    The article is great. a

    Join Sly_Ripper, about the translation of your code in action script 3. I can not see the camera a second user.

  • Sly_Ripper

    Any chance you can update this for AS3? I’ve tried myself but I can’t get the second cam to show, it’s just blank. No compile errors/warnings.

  • Edward Doderlein

    Hi, i implemented your code on my site and it works very good! Thanks for taking the time on writing this tutorial! I’m a total noob when it comes to actionscript and flash, so i need some pointers and advice on the following. If user1 has the chat app running but user2 has not, how do you find out? I want a to notify user1 through the app when user2 is available for chat.

  • Red07home

    10x so much!!!

  • Senhennen

    I am also¬†beginner¬† for flash development,¬†particularly in using actionscript, please help me how to creat audio/video chatting that¬†perfectly¬†works¬†… thanks in advance God Bless

  • alex c

    I am interesting on seeing this. I have a question: Instead of FMS I am trying to use the Adobe Cirrus service (rtmfp://p2p.rtmfp.net/). Do you think that your example can work with that?

  • JD_WF1

    Hi Derek this is JD from wakefield first of all thanks for a great tutorial really enjoyed it. I have install FMS on my local PC running alongside IIS7 under two differant IP addresses I have put the FMS IP and app name in the flash files. and then look for the files  user_1 and user_2 and I get this result, please see attached pic. Any help with this would be a blessing Thanks again Derek.
    Kind regards JD

  • Jayasugumar

    what can i do to create my own server

  • Jayasugumar

    can i get java code to see my face..i.e. to access webcam . please guide me..

  • Jayasugumar

    hi …
    i am a beginner. i have your source code for user1 and user2 . but i dont know how to connect to server. please guide me….

  • Guest

    what about a straight peer to peer without FMS

  • Anonymous

    Hi.. I am having problem in the above code. My problem is user 1 is showing in both the computers but i am not able to see the user 2. Please help.

  • Anonymous

    Hi.. I am having problem in the above code. My problem is user 1 is showing in both the computers but i am not able to see the user 2. Please help.

  • Thx Eli, yes, I specialize in Flash Streaming. You can also check out http://flvplayer.com. I co-founded and developed that player.

  • Eli Roberts

    Man you have cool coding skills. i really appreciate how you commented on every thing to help walk people thru the process step by step. Let me ask you …do you still code with flash streaming solutions?

  • Azlina

    already got solution to connect the video. my problem is I can see the camera of mine, but the person I chat, the camera is not working.. can u help me to solve it… huhu

  • Azlina

    good post.. but i wan to ask u , if im using cpanel hosting, how i want to connect the video file…

  • pAwAn Singh

    Thanks dude ..it’s great tutorial ..and thanks a lot for uploading the source ..

  • Austinepp

    <3 THIS!!! Got me to sign up for that service. Seriously. They should pay you XD!!!! Now looking to make the video higher than 1fps…. =P

  • Strangedk

    Hello, nice example. I’m from Ukraine, but find it))
    so, i’m use it in my training, and convert to AS3.

    Thank you)

  • Jasilkm

    Hi ..Nice Example… do you have any idea to change codec for live streaming… i know we can use FMLE for Encode any other web version

    advanced Thanks

  • Xmenn

    thank you

  • Tommy

    would defo love a new tutorial, if you can do it using cirrus eevn better

  • Ali_37

    What is code for “main.asc”?

  • dl

    does that work even with the Flash Media Streaming Server without server side code ?

  • Lamoni

    Thank you for this rad tutorial.

  • Chris

    Very interested.. 1 to 1 and 1 to many needed here..

  • Sankar

    Dear mate

    First of all thanks for this stuff

    i recorded this chat.while i try to play both video in sync manner i am facing problem right now is

    1) Sync is not happened due to both videos streaming independently.

    If there is any possible to record this both video in single flv.Please answer me i tried my best.I can’t find solution.And also till now nobody is answered for this question. i asked this question in all major forums.

  • sankar

    Please answer my question?

  • Sankar

    i know i can record this chat.But can i play this in sync manner.Problems i am facing right now is

    1) Sync is not happened due to both videos streaming independently.

    If there is any possible to record this both video in single flv.Please answer me i tried my best.I can’t find solution.And also till now nobody is answered for this question. i asked this question in all major forums.