Home » Code Samples, FMS, Flash, Tutorials

FMS (Flash Media Server) Video Chat

21 August 2008 | 12,478 views | View 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 doesn’t matter what you 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 app 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 definitely 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

Share |
  • bbman
    Derek, Thank you so much for this article. The code is very elegant and easy to understand. Here is my problem. I've stayed away from flash because I"m not a graphics or a UI kind of guy. I've recently decided to make a video conferencing application so I've been researching. I can read the action script and understand it easily. When I open the .fla's in Flash CS5, There are 3 layers. I know this is a complete newbie question but can you please explain why you have these three layers and what they are used for? As I said, I'm a programmer so the code is easy to understand but the "designer" side of it makes no sense what so ever. Any explaination of the 3 layers would be greatly appreacted. I'll definalty be retweeting this post.

    Thanks again,
  • Sure, Layer 1 contain the Actionscript code, Layer 2 holds the video objects, and Layer 3 is where I put a 1px outline around each of the video objects. Layers in Flash are used much like Layers in Photoshop or Illustrator. Whenever a layer is above another in the timeline, it is also displayed in that order on the Stage.
  • Ademkose37
    Hi

    This application How can we create a connection between two computer user?
  • VM
    HI
    We are using PresenterChat2.0 (http://influxis.com/) and get lots of troubles regarding delay, sincronisation and video flow.
    We have already made a consult about this problem, and IFLX adviced us to increase bandwith from 256 to at least 512. We have increased it to 1 mb but it seems like the problems got worse.
    Delay is more than a minute.
    Our upstream speed is 7,5mb.
    We are using an I7 processor on our machine with 6 GB ram. We have tried also a core 2 duo machine and have the same problem. We are sharing the same internet connection and at both machines the difference in delay-time is huge (at one machine there is no delay, at the other is more than 1 minute). Also the remote users get the same problems.
    Do you have any advice?
    Another question: if the remote users have a 256mb connection, can we expect also that their quality is low?
    Thanks!
  • Dan Trumble
    Thank you so much for your knowledge. I am having similar trouble to ones mentioned in two other posts. It works locally, but not when the SWF is uploaded to a server. I modified my main.asc to output a trace("user connected") when the app is accessed. As soon as I publish locally from Flash, my FMS Live Log immediately detects a connection. When the same SWF is uploaded to a server, I do not get a connection (whether opening SWF or the html in browser). I use influxis and network solutions
  • JB
    I don't have a "main.asc" file. Can someone post what is in theirs?
  • mmsiva
    Hi

    Thanks Lot Friend....

    Can you Tell Me good FMS Domain Server Name.I have plan to take and I need Your Help....
  • I would recommend http://influxis.com as a good FMS hosting company.
  • SandraMillhouse
    Why only two people?
  • This small chat app was meant to be just a starting point. There is even larger potential to creating multi-user apps with Stratus now, compared to when this article was written.
  • here you can find my flash chat source it is combined with PHP and JS It can be improved
    It is pure AS3 code compilable with swfc from swftools.org
  • Pimager
    Hi, could you tell me what class are "cam_feed" and "live_feed"?
    I don't know how to declare these two variables.

    Thank you
    Pimager
  • cam_feed and live_feed are the instance names of the two video objects on the stage. They do not reference any classes directly.
  • 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