Video and the Flash Communication Server (Page 1 of 4 )
Hello Video!
I’d like to dive in and take you through building a very simple video conference application. The application is designed to demonstrate many of the different things described in this chapter, such as publishing and playing streams and updating and responding to changes in a shared object. If you don’t understand all the code as I walk through it, don’t worry. The idea is to provide a quick tour to building a communication application. The rest of the book explains everything in much greater detail. Although a premade video chat application already exists, this is good exposure to the concepts and operations you’ll need when you build your own applications.
Setting Up helloVideo on the Server
Creating the helloVideo application on the server requires you find the applications directory and add a subdirectory named helloVideo. After the default installation on my system, the applications directory is located at:
C:\Program Files\Macromedia\Flash Communication Server MX\applications
Once you create the helloVideo subdirectory, you have created a FlashCom application. Now you need to provide the application with its unique server-side behavior.
Create a plain text file named main.asc and save it into the helloVideo directory. You can use any plain text editor such as the one included with Flash MX Professional 2004 or Dreamweaver MX 2004. Example 1-1 shows the source code you should add to the main.asc file.
Example 1-1. The main.asc file for the helloVideo application
application.onAppStart = function () { users_so = SharedObject.get("users"); };
application.onConnect = function (client, name) { if (idPool.length <= 0) { application.rejectConnection(client, {msg:"Too many users."}); } client.id = idPool.pop(); application.acceptConnection(client); client.call("setID", null, client.id); users_so.setProperty(client.id, name); };
application.onDisconnect = function (client) { idPool.push(client.id); users_so.setProperty(client.id, null); };
You can also download the source files for the helloVideo example from the book’s web site (http://www.flash-communications.net). The main.asc file will be loaded, compiled, and run by the server when the first client attempts to connect to a helloVideo instance. The application.onAppStart( ) method will be called once after the file is executed. From then on, whenever a movie tries to connect, the application.onConnect( ) method will be called, and when a movie disconnects, application.onDisconnect( ) will be called.
The main.asc file listed in Example 1-1 is designed to do three things:
Only four clients are allowed to connect at any time. So the application creates four unique user ID values, assigns one to each client when it connects, and reclaims the ID when the client leaves.
It notifies each client of its ID by calling a remote method of the client after the connection succeeds.
It updates a shared object when a client arrives or leaves so that all the other clients know who is connected and the name of each client’s stream to play.
The application does not use Flash Remoting to connect to an authentication database or directory server. It is a simple demonstration program and is not designed for security. See Chapter 18 for information on designing and building secure applications. In the helloVideo application, any four users are allowed to connect and each is given a unique user ID string. The globalidPoolarray contains the four available ID strings. It is created as soon as the main.asc file is loaded by the server—usually when the first client attempts to connect. The application.onAppStart( ) method is called immediately after the main.asc file is loaded and executed. The onAppStart( ) method uses SharedObject.get( ) to create a temporary shared object that holds an optional name provided by each user. For example, if four users with the names “justin”, “peldi”, “robert”, and “brian” are connected, the shared object would have the slot names and values illustrated in Table 1-1.
Table 1-1. Slot names and values for the users_so shared object
Slot name
Slot value
“guest_1”
“justin”
“guest_2”
“peldi”
“guest_3”
“robert”
“guest_4”
“brian”
The following statement gets a shared object namedusersand assigns it to the variableusers_so:
users_so = SharedObject.get("users");
Thereafter, we can useusers_soto access the methods and properties of theusersshared object.
Whenever a client attempts to connect, the application.onConnect( ) method is called with a client object passed in by FlashCom that represents the client trying to connect. Any other information supplied about the client is also passed into onConnect( ) as additional parameters. In Example 1-1, the name a user enters is the second parameter,name.
When onConnect( ) is called, we have the option of rejecting or accepting the connection or leaving it pending. In this example, if there are no user ID strings left in theidPool, the application rejects the connection and passes a message back to the client to say why:
if (idPool.length <= 0) { application.rejectConnection(client, {msg:"Too many users."}); }
If there is an available ID string, it is removed from the end of theidPoolarray and assigned to anidproperty of theclientobject (idis not a built-in property of a Client object; we chose it to suit our own needs):
client.id = idPool.pop();
If an ID is available, the application will accept the client’s request to connect and send the client its user ID by invoking setID( ), which was introduced earlier under “Remote Methods,” on the client:
We’ll look at the client-side setID( ) method again later. Finally, the application lets all the other clients know that a new client has connected, so they can subscribe to the video and audio stream the client will publish:
users_so.setProperty(client.id, name);
The setProperty( ) method saves thenameparameter in a slot named after the client’s ID string.
Later, when the client disconnects by clicking the Disconnect button or by visiting a different page with her browser, the application.onDisconnect( ) method will be called on the server and passed the client object representing the client that has disconnected. When a client disconnects, we need to reclaim her ID string for use with other clients, and we need to delete her slot in theusersshared object to indicate she is no long connected:
application.onDisconnect = function (client) { idPool.push(client.id); users_so.setProperty(client.id, null); };
The application pushes the ID back into theidPoolarray and sets its slot in the shared object tonull.
Building the helloVideo Client in Flash
The Flash movie we are going to walk through building will automatically publish audio and video for the person using it and will play any audio and video being streamed from the other clients. When it connects to the server, it receives its own unique user ID string in return. It will publish a stream named after its user ID while monitoring changes in the users shared object to discover the unique ID of each user who connects. It uses the user IDs in the users shared object to play each remote user’s stream.
Flash 
