21.06.08

Realizar videoconferencias con Flex y Flash Media Server

Posted in flex at 15:25

Hola a todos. Tras tanto tiempo sin postear en el blog, he decidido hablar sobre cómo realizar una videoconferencia en una aplicación flex utilizando Flash Media Server. En primer lugar lo que haremos será descargarnos la última versión del Flash Media Server. Le daremos a la opción de descargar el servidor de desarrollo gratuito. Durante el proceso de instalación nos pedirá un número de serie, pero este paso se puede saltar en la versión gratuita, así que le daremos a siguiente. Una vez instalado, para arrancarlo y detenerlo, nos iremos (en Windows) a inicio -> todos los programas -> Adobe -> Flash Media Server. Ahí tenemos las opciones de arrancar y parar el servidor, arrancar y parar el servidor de administración y acceder a la consola de administración en nuestro navegador. Esta consola nos resultará muy útil para ver el estado en el que se encuentran las aplicaciones en todo momento, la cantidad de información que está procesando cada aplicación, los usuarios conectados, etc.

Una vez instalado el servidor, ya podemos empezar a realizar aplicaciones que utilicen Streaming de vídeo y audio. En mi caso, he realizado el típico chat, pero en este caso con audio y vídeo utilizando webcam y micrófono. Para ello habrá que programar la lógica del servidor y el cliente Flex que se conecta al servidor.

Para la parte del servidor utilizaremos el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

application.onAppStart = function(){ 
    application.listaUsuarios = SharedObject.get("listaUsuarios", 
                                                                false); 
}    
 
application.onConnect = function(client, name, identifier){ 
    client.identifier = identifier; 
    application.listaUsuarios.setProperty(identifier, name); 
    application.acceptConnection(client); 
}    
 
application.onDisconnect = function(client){ 
    if( client.identifier != undefined ){ 
        application.listaUsuarios.setProperty(client.identifier, 
                                                         null); 
    } 
}

En este códido lo que le estamos indicando al servidor es que cuando arranque la aplicación cree un objeto compartido (más adelante veremos como utilizarlo) llamado listaUsuarios, que contendrá todos los usuarios que están haciendo uso del chat, que cuando un cliente se conecte, lo añada a la lista de usuarios y acepte la conexión y que cuando un cliente se desconecte, lo elimine de la lista de usuarios.

Todo esto irá en un fichero llamado main.asc, y para añadirlo al servidor tendremos que desplazarnos al directorio de instalación del servidor y dentro del directorio applications crear un nuevo directorio con el nombre de nuestra aplicacion (en el ejemplo videoconferencia) en el cual pegaremos el fichero main.asc. En el caso de que tengamos el servidor arrancado, deberemos reiniciarlo para que lo reconozca.

Ahora ya podemos programar el cliente Flex. Lo único que deberemos hacer será conectarnos con el servidor al iniciar la aplicación y sincronizarnos con el objeto remoto listaUsuarios para que cuando haya algún cambio en él, recibamos su nuevo valor y podamos realizar las operaciones que creamos oportunas. El código necesario es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

var nc:NetConnection ; 
public function conectar():void{ 
    //Creamos el objeto de conexion 
    nc= new NetConnection(); 
    nc.objectEncoding = ObjectEncoding.AMF0;   
 
    //Añadimos el manejador del evento de estado e intentamos conectarnos 
    nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); 
    nc.client = this; 
    nc.connect("rtmp://localhost:1935/videoconferencia", "", ""); 
}   
 
public function netStatusHandler(event:NetStatusEvent):void{ 
    switch( event.info.code ) { 
        case "NetConnection.Connect.Success": //Conexion OK 
            obtenerObjetoCompartido(); 
            break; 
        case "NetConnection.Connect.Failed": //Error 
            Alert.show("Error al conectarse al servidor"); 
    } 
}   
 
public function obtenerObjetoCompartido():void{ 
    SharedObject.defaultObjectEncoding  = flash.net.ObjectEncoding.AMF0; 
    listaUsuarios = SharedObject.getRemote("listaUsuarios", nc.uri, false); 
    //Añadimos el manejador del evento de sincronización, así cuando el objeto cambie se 
    //llamará a la función sincronizacionObjetoRemoto 
    listaUsuarios.addEventListener(SyncEvent.SYNC, sincronizacionObjetoCompartido); 
    listaUsuarios.connect(nc); 
}   
 
public function sincronizacionObjetoCompartido(event:SyncEvent):void{ 
    var usuarios:Object= event.target.data;//Ya tenemos el objeto listaUsuarios actualizado 
    //A partir de aqui realizamos las tareas que creamos oportunas 
}

En la primera función realizamos la petición de conexión con el servidor y le añadimos el manejador del evento NET_STATUS, cuyo código se encuentra en la segunda función. Por otro lado tenemos en la tercera función el código para obtener un objeto compartido (SharedObject) y el manejador del evento SyncEvent.SYNC, que es la cuarta función. Cada vez que en el servidor el objeto compartido listaUsuarios cambie, se ejecutará el código de la cuarta función. Podemos tener tantos objetos compartidos como queramos, todos ellos se pueden ver en la consola de administración del Flash Media Server.

Como todo esto es mucho mejor verlo con un programa en acción, he preparado este ejemplo de chat por videoconferencia. (Nota: El ejemplo empieza a dar problemas a partir de que un cuarto usuario se conecte. Esto puede ser debido a que el servidor de desarrollo gratuito que nos ofrece adobe tengas ciertas limitaciones, o que alguna configuración del servidor esté mal definida).

Espero que sirva de ayuda. Saludos!!