Home » Code Samples, FMS, Flash, Tutorials

FMS (Flash Media Server) Video Chat

21 August 2008 | 28,630 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 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

  • 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

    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….

  • takis

    hello thank to sharing your knowledge.
    i have a question. with what program can i change those codes?

  • takis

    hello thank to sharing your knowledge.
    i have a question. with what program can i change those codes?

  • http://www.derekentringer.com/ Derek J Entringer

    @takis

    You can use the provided code with Adobe’s Flash CS4. The trial is available here.

  • http://www.derekentringer.com Derek J Entringer

    @takis

    You can use the provided code with Adobe’s Flash CS4. The trial is available here.

  • http://www.derekentringer.com/ Derek J Entringer

    @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.

  • http://www.derekentringer.com Derek J Entringer

    @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.

  • 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.

  • 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.

  • Prem

    Hello Derek,
    Can we store the chat audio in our server using FMS?
    How can we do that?
    Thanks a lot.

  • Prem

    Hello Derek,
    Can we store the chat audio in our server using FMS?
    How can we do that?
    Thanks a lot.

  • http://www.derekentringer.com/ Derek J Entringer

    @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.

  • http://www.derekentringer.com Derek J Entringer

    @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.

  • 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

  • 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

  • http://www.derekentringer.com/ Derek J Entringer

    @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! ;)

  • http://www.derekentringer.com Derek J Entringer

    @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

    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 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

  • http://www.wtlgmedia.com/ Mike

    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.

  • Haja Mohideen

    Yes… it is good… thanks for ur guide.. take of urself..

  • mukesh

    I did this but user2 video comes frame by frame.how can i made the video motion smooth

  • 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?

  • http://www.derekentringer.com Derek J Entringer

    @Yuriy

    As long as they have Flash installed, and have an available web cam, the provided example should work ok.

    If they are able to see themselves in the left video preview, their stream will be correctly published.

  • http://www.derekentringer.com Derek J Entringer

    @Prem

    Recording streams will require server side code. Have a look at the Adobe documentation here for more information on how to record a stream using Flash Media Server.

    http://livedocs.adobe.com/fms/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000789.html

  • http://www.derekentringer.com Derek J Entringer

    @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.

  • http://www.derekentringer.com Derek J Entringer

    @mukesh

    You can adjust the quality settings by editing the mycam.setMode and the mycam.setQuality.

  • http://www.derekentringer.com Derek J Entringer

    @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.

  • 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

  • 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

  • SandraMillhouse

    Why only two people?

  • http://twitter.com/jean__michel jean-michel gens

    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

  • mmsiva

    Hi

    Thanks Lot Friend….

    Can you Tell Me good FMS Domain Server Name.I have plan to take and I need Your Help….

  • http://www.derekentringer.com Derek J Entringer

    I would recommend http://influxis.com as a good FMS hosting company.

  • JB

    I don't have a “main.asc” file. Can someone post what is in theirs?

  • 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

  • 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,

  • http://www.derekentringer.com Derek J Entringer

    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.

  • http://www.derekentringer.com Derek J Entringer

    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.

  • http://www.derekentringer.com Derek J Entringer

    cam_feed and live_feed are the instance names of the two video objects on the stage. They do not reference any classes directly.

  • 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!

  • Ademkose

    How can we create a connection between two computers?

  • Ademkose37

    Hi

    This application How can we create a connection between two computer user?

  • Caplan Diego

    please, send me an email and epxplainme how does it works.. it doesnt to me. plz , thnks

  • Websysmail

    Many thanks to the author, but not respect.
    It was hard to write that test, main.asc file (Flash Media Server -> applications / app / main.asc) may contain:
    application.onConnect = function(client) {
    application.acceptConnection(client);
    }

  • http://www.derekentringer.com Derek J Entringer

    The main.asc file is not needed for this example to work correctly.

  • http://www.derekentringer.com Derek J Entringer

    I’m thinking of posting another example that is much more robust than this simple example. Who would be interested in that? I’ll move on it depending on responses.

  • Mike

    I’d like to see it very much!

  • Luke

    I would definitely like to see that, and even the Multi casting functionality would be nice.

  • 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.

  • sankar

    Please answer my question?

  • 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.

  • Chris

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

  • Lamoni

    Thank you for this rad tutorial.

  • dl

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

  • Ali_37

    What is code for “main.asc”?

  • Tommy

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

  • Xmenn

    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

  • 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)

  • 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

  • pAwAn Singh

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

  • Azlina

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

  • 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

  • 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?

  • http://www.derekentringer.com Derek J Entringer

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

  • 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.

  • Guest

    what about a straight peer to peer without FMS

  • 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….

  • Jayasugumar

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

  • Jayasugumar

    what can i do to create my own server

  • 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

  • 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?

  • 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

  • Red07home

    10x so much!!!

blog comments powered by Disqus