Audio Video Modules for FlashChat

Return to FlashChat Docs | View the AV Module Gallery

Greetings! Welcome to the exciting world of FlashChat audio/video (AV). If you're reading this, you've probably downloaded one or more of the FlashChat AV modules, and want to know how the heck to make it work. I'm happy to say that it's very easy, but there are a few things that you must have first.

Requirements

1) Flash Media Server (OR Red5 Server)

This is server software that you must get from Adobe.com. There is a developer edition of Flash Media Server that permits up to 5 connections, which is free. The commercial edition is not free. In fact, it's quite expensive. But there are some web hosts out there that offer Flash Media Server web hosting for only a small charge above the cost of normal web hosting. So you either need a dedicated server with FMS installed and running, or access to a web server that offers FMS support.

In either case, the intent of this document is not to help you get FMS running. It's assumed that you already have that working. If you don't, STOP and get FMS running first.

The Red5 server is an open-source alternative to FMS, which should also work with this AV module pack.

2) FlashChat 4.7 or higher

Actually, FlashChat is not really a requirement, but it's certainly recommended. It's a lot more fun to use the AV system if you can actually chat with the persons that you're viewing. In fact, these AV modules have two modes: "module" and "standalone". As you may have guessed, "module" mode is used when installed as a module for FlashChat. But we'll get into that later.

As before, the intent of this document is not to help you with the FlashChat installation. It's assumed that you have FlashChat running, hopefully like it, and you want to enhance FlashChat's features with a cool AV system.

Installation & Configuration

STEP 1: Copy main.asc to Flash Media Server applications folder.

Click here to download main.asc if you do not already have it. The AV module download also comes with the main.asc file, however. You will need to unzip this file. It should be named "main.asc".

Then, locate the "applications" folder in Flash Media Server. On my Windows 2000 system, this folder is located at this path:

C:\Program Files\Macromedia\Flash Media Server 2\applications

However, this may differ for you. You should create a new folder called "multiavm", and copy the "main.asc" file to that new folder. Thus, the full path to main.asc might look something like this:

C:\Program Files\Macromedia\Flash Media Server 2\applications\multiavm\main.asc

Red5 Users!

You should be able to use this module pack with the Red5 server, if you don't have FMS. You must copy the "WEB-INF" folder, which is included with this module pack download, to Red5's "webapps" folder. You should create a sub-folder called "multiavm". Thus, you would have:

c:\path\to\webapps\multiavm\WEB-INF

This step essentially replaces the step described above for FMS. Read more about Red5. The remaining steps in this document should be the same for both FMS and Red5.

STEP 2: Set RTMP path in config.xml

If you don't have TextPad or another good text editor, download it and install one. XML editors like Architag XRay XML Editor will also work well. But do NOT edit an XML file with an text editor created by Microsoft. This includes Notepad and Wordpad.

Open the config.xml file that comes with the AV module, and edit the <server> tag to the correct path for your web host. This path is independent of the folder that FlashChat is installed in. Thus, regardless of where FlashChat is installed, you will always use the format protocol:[//host][:port]/appname/[instanceName]

For example, I have FlashChat installed at http://domain.com/path/to/chat/, so I would use this:

<server url="rtmp://domain.com:1935/multiavm" />

The default FMS port is 1935, but that may differ based on your server setup. The instance name of "multiavm" should not be changed.

STEP 3: Copy multiavm files to FlashChat "modules" folder.

Within FlashChat's filesystem, there should be a "modules" folder. Create a NEW sub-folder within "modules", called "multiavm". Copy the "config.xml" and "multiavm.swf" files to that subfolder (I actually also copied multiavm.html, but it's not actually necessary).

STEP 4: Setup /inc/config.php in FlashChat

Again using your text editor, open the "config.php" file located within FlashChat's "inc" folder. Find the part of this file that deals with modules, and change the 'path' to the value shown below. This is the relative path to the multiavm.swf file. In case you're wondering where the name "multiavm" came from, it represents "Multi-AV Module", since this particular AV module permits multiple video instances to be displayed simultaneously (if using layout #2 or higher)

    'module' => array(
        'anchor'  => 0,
        'path'    => 'modules/multiavm/multiavm.swf',
        'stretch' => true,
        'float_x' => 300,
        'float_y' => 200,
        'float_w' => 100,
        'float_h' => 100,
    ),

I recommend that you leave "stretch" to "true", and ignore the "float_x" parameters for now, at least until you can get the basic AV functions working. Then, you can play with the module settings. If you set "anchor" to 0, then the module will load by default in the rectangular space beneath the room list. Setting this to "-1" will cause the module to load into a popup pane.

STEP 5: Verify connection & start chatting!

Now, start FlashChat by logging in using your normal method of login. Be sure that the Flash Communication Server service has been started on the server, too. Of course, you should check your webcam, microphone, and speaker settings to ensure that your hardware is working correctly.

When FlashChat starts, you should receive an alert message, similar to the one below, from the Flash player. Of course, you should permit access to your camera and microphone.

If you don't see this message, something may be wrong. Try opening your Flash Media Server console to see if there is an active connection from the multiavm module (this screenshot actually shows the old Flash Communication Server MX console, but the Flash Media Server console is nearly identical).

The end result should look something like this (if using "skin 1"):

The config.xml file has several important settings that you may wish to play with.

<run mode="module" view="1"/>

The possible "mode" values are "module" and "standalone", and the possible "view" values are "1", "2", and "3". Here's what they mean:

mode="module" means that the AV module is running from within a FlashChat environment.

mode="standalone" means that the AV module is running within the .html file that comes with this AV system - i.e. it is not integrated within FlashChat.

view="1" means that only one AV window is visible at a time - i.e., you can only video conference with a single other user at a time.

view="2" means that there is a "primary" AV window, and several secondary (smaller) AV windows. Every user with an open video connection will be shown, but you can choose to expand one video screen at a time to get a better look.

view="3" means that all open video feeds will be shown in a "scroller".

<size width="100" height="100" />

This is the default width and height of the AV module when "stretch" is set to "false" in FlashChat's /inc/config.php file. This value has no effect if the "stretch" parameter is set, however.

<volume value="70" />

This is the default volume, from 0 to 100 inclusive.

<cam state="on" />

The default state for the camera. It's recommended that you leave this as "on", since some users may not realize that they have to activate their camera button to show their AV feed to other users.

<mic state="off" />

The default state for the microphone. It's recommended that you leave this as "on", too.

Gallery

Click here to view the various module "skins" with the various possible views (1 - 3).