[프로그래밍] Creating a Video Chat: Your First Macromedia Flash Communication Server MX Application

Creating a Video Chat: Your First Macromedia Flash Communication Server MX Application

Giacomo Guilizzoni

• Send feedback
  
• Get an e-mail update of new articles

Note: Macromedia Flash Communication Server MX and Macromedia Flash MX have been replaced by Flash Media Server and Flash 8, respectively. This article is retained for legacy purposes only.

With the advent of Macromedia Flash Communication Server MX, it is easier than it has ever been to quickly build a rich multiuser communication application. Through the use of pre-built components and a few lines of ActionScript, anyone can quickly build a chat, video conference, or any number of multiuser applications. In this tutorial, we'll show you how to build a simple chat application that also includes video support for users with a webcam.

The following image is a screenshot of the application that we will build in this tutorial:

Note: This tutorial focuses on the Windows version of the Macromedia Flash Communication Server 1.5

Prerequisites

Before you begin building the application, make sure the following software is installed on your system:

• Macromedia Flash MX
  
• Macromedia Flash Communication Server MX

Creating the application on Macromedia Flash Communication Server MX

When you installed Macromedia Flash Communication Server MX, a folder called flashcomapplications was created in the location where you in installed the program (probably C:Program FilesMacromediaFlash Communication Server MXflashcomapplications).

Using Windows Explorer, navigate to this folder and create a new folder called firstapp under your flashcomapplications folder. Using Dreamweaver MX (or any other text editor), create a text file called main.asc in the newly created firstapp folder.

The main.asc file only needs to contain the following line of code:

load( "components.asc" );

Be sure to save the main.asc file. This file tells the server to load all the server-side code for the Communication Components when the application starts. That's all you need to do on the server-side!

Creating the application in Macromedia Flash MX

After the server-side code is taken care of, we'll need to build the application interface in Macromedia Flash MX and hook the application to the server:

1. Open Macromedia Flash MX.
   
2. If it's not already visible, open the Components Panel (Window > Components).
   
3. Select Communication Components from the Component Panel pop up menu.
   
4. If it's not already visible, open the Property inspector (Window > Properties).
   
5. Save your new (and still empty) application as firstapp.fla, in the same folder you created (flashcomapplicationsfirstapp) for the server-side code.
   
6. Drag a SimpleConnect component from the Component Panel to the top-left corner of the stage.
   
7. Drag a SetBandwidth component to the stage and give it an instance name of bw_mc in the Property Inspector.
   
8. Drag a ConnectionLight component to the stage and give it an instance name of light_mc in the Property Inspector.
   
9. Drag a PeopleList component to the stage and give it an instance name of people_mc in the Property Inspector.
   
10. Drag a Chat component to the stage and give it an instance name of chat_mc in the Property Inspector.
    
11. Drag an AVPresence component to the stage and give it an instance name of av1_mc in the Property Inspector.
    
12. Drag a second AVPresence component to the stage and give it an instance name of av2_mc in the Property Inspector.
    
13. Your stage should now look similar to the image in this illustration.
    
14. Now is a good time to save your work.
    
15. Now click on the SimpleConnect component, and look at the Property Inspector.
    
16. Click on the Application Directory parameter and change rtmp:/app_default to rtmp:/firstapp.
    
17. Click on the Communication Components parameter and on the magnifying lens next to the Communication Components parameter. A Values pop-up window will appear as shown in this illustration.
    
18. Click on the plus sign 6 times until slots 0 through 5 are created.
    
19. Click on the first slot where it says defaultValue, and type bw_mc
    
20. Tab to the second slot and type light_mc
    
21. Tab to the next slot and type people_mc
    
22. Tab to the next slot and type chat_mc
    
23. Tab to the next slot and type av1_mc
    
24. Tab to the next slot and type av2_mc
    
25. 
    

    Your values window should now look like this:

    
    
26. Click OK and save your work.

All done! That's all it takes to create a simple video chat application using Macromedia Flash MX.

Publishing and testing your application

Now that the application is built, we'll want to publish the files required to view it and test it to make sure everything is working as expected:

1. Within Macromedia Flash MX, select File > Publish to create the HTML and SWF files that will be used to view the application in the browser. You can change the standard location of the files, e.g. if you wish to publish to a mounted webroot-directory at this point or publish your files to manually upload them to the webroot-directory.
   
2. In Windows, navigate to the folder you used for publishing the html and swf-files (e.g. flashcomapplicationsfirstapp) and double-click on firstapp.html to open the application in your default browser. Or enter the URL of the webserver you uploaded your files to.
   
3. Enter a name in the SimpleConnect component text field and click "Login".
   
4. Type some text in the chat to make sure it gets displayed.
   
5. If you have a webcam installed, click on Send Audio/Video to broadcast your image and audio (click Allow in the settings pop-up box).
   
6. To simulate multiple users connecting to the application, you can open another browser window to the same page.
   
7. If you have a web server installed and the flashcomapplicationsfirstapp folder is accessible from the server, invite a friend to join you in a video-conference by sending them the URL of your newly created application.

Debugging/Common mistakes

Did your application work correctly? If not, it may be because the client was not able to connect to the Communication Server. The easiest way to determine if the client has a connection to the Flash Communication Server is to watch the connection light.

If this doesn't turn green or yellow, there is a problem with the connection, which can be caused by several things:

1. Make sure the file "main.asc" is in the right location: A common mistake is to place the file "main.asc" in the wrong folder. Remember: For security reasons in a deployment situation you have a webroot where your client files (.swf and .html) are stored and an application directory, where the file "main.asc" belongs in.
   
2. Verify the rmtp path in the Application Directory settings for the Simple_Connect component (from within the Macromedia Flash authoring environment) and make sure it is pointing to the right application. The location (machine) it is pointing to must be running the Communication Server. E.g., if you're running Macromedia Flash Communication Server on your local machine, you should use rtmp:/firstapp or rtmp://localhost/firstapp.
   
3. Publish as "Flash 6": In order to use the communication components you need to go to "Publish Settings" and choose publish as "Flash 6."
   
4. Check if the Macromedia Flash Communication Server is running. Go to Start > Programs > Macromedia > Flash Communication Server MX and click on Start Server.
   
5. You may be behind a firewall that blocks port 1935. In case you are using Version 1.0 ask your administrator to enable port 1935. Macromedia Flash Communication Server MX 1.5 comes with a new feature called "HTTP tunneling". This makes it possible to use port 80 and the http-protocol for communicating with the server.
   
6. Make sure you have the latest Macromedia Flash Player 6 installed.
   
7. Under certain circumstances it may take a long time (OS X) to connect to the Communication Server, when the client is behind a firewall and/or proxy. This fall back handling was improved in the newest version of the Flash Player. (please see Technote # 18537 for further description of the new HTTP tunneling and related updates to relevant component)

In case you are able to connect to the server (i.e. the Connection Light is green or yellow), but have problems using video communications, there is a possibility that the wrong video device is selected:

1. Click the right mouse key anywhere inside the flash page and select "settings".
   
2. Click on the last icon (showing a webcam).
   
3. Choose the appropriate video input device - your webcam for instance, in case it is not already selected.

This is just a very small sample of what you can build using the Macromedia Flash Communication Server MX and the Communication Components. As you can see, it's very easy to create a fully functional multiuser application using Macromedia Flash MX. Please refer to the documentation that came with the Server for many more tutorials and examples.

Happy coding!

---

About the author

Giacomo 'Peldi' Guilizzoni (a.k.a. peldi.com), has been programming for more than half of his life (since age 12), and just can't get enough. He gets excited about every aspect of computer science, from assembly languages to graphic design, from the inner workings of compilers to new-media art. Raised in the fertile grounds of Bologna, Italy, he fell in love with Macromedia products while doing an exchange program at UC San Diego. A long-time ultimate player, he created and maintains Ultilinks to share his passion about the sport.