Home » Code Samples, FMS, Flash, Tutorials

FMS (Flash Media Server) Video Chat

[21 August 2008 7,277 views 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

  • T
    Hey Derek, I figured I'd just use your source files to check how they worked, got myself an Influxis account, and uploaded the SWFs to my webserver... and it isn't working. No errors, no crashes, it just shows my preview... The URLs are correct, allowed domains are correct, appname is correct... Any ideas?
  • @T

    If you are just testing by yourself, you have to open up the user_1 and the user_2 swf's or directories in two separate browser windows/tabs. Then you will see both streams. Alternatively, you can have a friend browse to one of the url's and you will be able to video chat with one another.
  • mukesh
    I did this but user2 video comes frame by frame.how can i made the video motion smooth
  • @mukesh

    You can adjust the quality settings by editing the mycam.setMode and the mycam.setQuality.
  • Haja Mohideen
    Yes... it is good... thanks for ur guide.. take of urself..
  • Derek, I download the source code and try to use i but is not working. When I connect the two computers where are not seeing each other. I use the a main.asc file. Can you send me the main.asc that will correlate with the source code. Thank you.
  • @Mike

    There's no external classes included in this small example. All of the code is right within the timelines in both of the fla's.
  • Antonio Sipinola
    Thanx a lot, Derek

    Its a nice simple solution. I thought there was something else involved. when I finished my project I will let you know the outcome.

    Cheers buddy
  • @Antonio

    Just as a general idea, you could make the "user_1" and "user_2" variables dynamic.

    cam_ns.publish(your_variable, "live");
    in_ns.play(another_variable);

    By using FlashVars, you could setup a dynamic published stream based on a generated user id using php. Then you would have a unique published stream and playable stream for each of your windows/visitors to your website.

    In other words, each time someone visits your site, a unique id is generated for that visitor that can be used as the live stream name when they open the chat window.

    Hope that helps! ;)
  • Antonio Sipinola
    Hi Derek,

    Thanx for posting a wonderful tutorial. It's been really useful for most of us. I'd like to use it on my community website. However I have one question for you: I'd like to have multiple two-way conversation instances in which each of the instance would be running on its own private popup window. Eg. user_1---->user_2, user_3---->user_4,..... Please give me an idea on to accomplish this because I'm a PHP programmer and very new to FMS issues.

    Cheers man
  • @Yuriy

    Glad to help out :)
    Setting up the ability to test a camera and microphone on the client side would require a bit of more development. I'd be able to help you out further in developing those requirements if you are still looking for help. Send me an email in the contact section and lets talk further about your needs.


    @Prem

    Flash Media Server does allow you to store audio on the server. You can also record video and store it on the server. Adobe does have some example applications that do exactly that. You can find those resources here: http://entr.in/ger/y

    If you need any help getting your requirements setup, contact me, and lets talk further about your development needs.
  • Prem
    Hello Derek,
    Can we store the chat audio in our server using FMS?
    How can we do that?
    Thanks a lot.
  • Yuriy
    Hi Derek,
    I found your articles very helpful, thanks a lot.
    Would you be able to help with this task, please: do you know how to set testing facilities in order to test clients' camera, speakers and micro? Let's say client tests his/her side prior to join video conference and making sure his/her equipment is OK.
    Thanks a mil.
  • takis
    hello thank to sharing your knowledge.
    i have a question. with what program can i change those codes?
  • @takis

    You can use the provided code with Adobe's Flash CS4. The trial is available here.
  • Suresh J David
    Hi
    First hearty thanks to sharing your knowledge,m

    But its working good in local FMS only, In the client FMS (influxis - (Bandwidth 1 mbps)), Its not working,

    I'm newbie, So I cant get the solution, Please give me the solution....
  • @Suresh J David

    What kind of errors are you getting exactly? I've tested using Influxis, and didn't have any trouble. If you can provide me with some more information, I might be able to help you out.
blog comments powered by Disqus