flex, air, adobe

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

21 comentarios »

  1. laquisa said,

    23.06.08 at 20:54

    Si comprendo asi es in tipo de video chat. Pues como se da diferencia de flash chat?
    http://www.flashcoms.com/

  2. admin said,

    23.06.08 at 22:08

    Buenas. En este post, lo que he tratado de explicar es cómo realizar un envío y recepción de streaming desde una aplicación Flex, y para entenderlo mejor lo he ilustrado con un ejemplo de un videochat.

    En el link que pones, eso del flash chat tiene pinta de ser una especie de messenger con webcam y micrófono, y que está programado en flash y posiblemente utilizará un flash media server, etc, etc.

    No tenía ninguna intención de realizar un programa que se asemejara a lo que propones, sino como ya he mencionado, ver como conectarse a un servidor flash media para ver como realizar envío y recepción de streaming.

    Un saludo

  3. Ginno Millán said,

    01.07.08 at 17:26

    Hola.

    Gracias por la información. Te cuento mi caso. Ayer recién instalé el Adobe Flash Media Server 3 en un PC del laboratorio de la Universidad donde estudio. Pudimos hacer las pruebas que aparecen en su manual, cabe señalar que el servidor lo tenemos en modo stand-alone, es decir, instalado en una máquina y todavía no hacemos ninguna prueba en red.

    El caso es que te quería hacer varias preguntas, por su puesto apelando a tu buena disposición demostrada en ayudar, que diden relación con la operación de este programa:

    1.- ¿Cómo hacer que desde un simple navegador web podamos ver los contenidos del servidor?. Por ejemplo ver una de las películas que trae para hacer pruebas.

    2.- No entiendo cómo se puede hacer para establecer una video conferencia, si es que se puede.

    3.- Tenemos una página web, diseñada simplemente con html, queremos que por ejemplo un cliente desde ahí pueda acceder a un video, por ejemplo de una clase que hayamos previamente guardado en el servidor, una cosa “tipo You-tube”, ¿cómo se puede hacer?, si es posible claro está.

    4.- ¿Es necesario tener en la computadora donde tenemos instalado el FMS un servidor web para comunicarse con las demás máquinas que estén en la red, o simplmente las máquinas acceden al servidor y muestran su contenido?.

    Se que son hartas preguntas, pero bueno… así no más está la cosa.

    Esperando tu respuesta, se despide agradecido

    Ginno Millán Naveas
    Pontificia Universidad Católica de Valparaíso
    Chile

  4. Ginno Millán said,

    02.07.08 at 1:08

    Hola Antonio,

    El archivo videoconferencia.zip está dañado. Cada vez que lo bajo me indica que la estructura está corrupta. Probé los dos enlaces.

    ¿Puedes colocarlo nuevamente por favor?

    Saludos

    Ginno

  5. admin said,

    02.07.08 at 9:39

    OK. Muchas gracias a Ginno por el aviso. Lo he reemplazado, he probado y se descarga bien. Si alguien tiene algún problema para descargarlo que me avise.

    Saludos

  6. Edo said,

    06.07.08 at 2:15

    Muy buen articulo publicaste!!

    Te queria hacer una pregunta: El archivo de ejemplo “Videoconferencia.zip”, ¿contiene todo lo publicado en este post? Hago el alcance, porque lo he estado probando y no he podido generar que los “clientes” se unan para establecer una videoconferencia.

    Agradeciendo tu atención, se despide:
    Edo.

  7. Artur said,

    05.08.08 at 1:32

    Hola Antonio, quisiera saber si tienes algun correo para poder conversar mas acerca de Flash Media Server, estoy que leo acerca de esto y todavia no pudo entablar un enlace de video conferencia, quisiera aber si podrias ayudarme en eso, te lo agradeceria mucho

  8. Santiago said,

    21.08.08 at 22:40

    Estimado me funciono pero con errores por ejemplo veo que se conecta y encodea al flash server porque veo que se conecta.
    Pero cuando hago el script para verlo no lo muestra en un flv player no se porque razon.

    Y por otro lado no me carga ninguna de las partes del chat

  9. Santiago said,

    22.08.08 at 23:37

    Logre que ande el video el conding y la reproduccion con un flv player pero no logro ver la parte del chat
    no se porque

  10. ooJonyoo said,

    29.09.08 at 2:08

    Hola necesito ayuda estoy atorado con el flashcoms queria ver si podrias ayudarme porfa

  11. rammstein12 said,

    31.05.09 at 7:11

    amigo ke pena la pregunta, pero tengo ke tener flex instalado?? o lo hago con flash ke pena la ignorancia

  12. rammstein12 said,

    31.05.09 at 7:18

    y ke version de flex o flash necesito.. muchisisismas gracias de antemano

  13. rammstein12 said,

    02.06.09 at 0:42

    hola amigo de nuevo, mira ya tengo el flex builder 3,muchas gracias por responder, y ahora cuando habro flex le doy file,new…..le tengo ke dar mxml aplication o cual de esas, y luego que tipo de servidos porke me aparece:asp.net cold fusion, j2ee etc, cual de esos selecciono. mira pues yo seleccione lo siguiente: aplication mxml y luego le di servido php pero no me aparece next para continuar, y le doy otro servidor y tampoco, no entiendo amigo creo ke estoy en prolemas, ayudame porfa , si quieres mi correo es larar5@hotmail.com ayudame porfa y en algun futuro yo te podre ayudar a ti en alguna cosa… estare esperando tu respuesta compadre muchas gracias

  14. rammstein12 said,

    04.06.09 at 18:35

    hola de nuevo, mira te comento, soy estudiante de ingenieria mecatronica de cuarto semestre, y si Dios me lo permite la idea es empezar a tener una empresa que desarrolle aplicaciones para la solucion de problemas de diversas empresas, he visto que eres muy bondadoso y muy paciente conmigo, y pues creeeme que te tendre en cuenta para en un futuro ke no es muy lejado que trabajes con nosotros, me gustaria que me dieras un correo fijo donde poder contactarte porfa.
    yo hasta el momento estoy comenzando a aprender un poco de flash, photoshop y dreamweaver, y mi meta ahorita es lograr una videoconferencia para ke desde diferenctes ordenadores( por lo menos 3) se puedan ver y escribir algo,hasta el momento necesito eso,tu me has guiado en como hacerlos con base en lo que tu ya me has enviado el correo, pero pues he tenido algunas dificultades y por tanto me gustaria que me pudieras asesorar mas “online” por decirlo asi.. ya que siempre me surgen dudas y por tanto me quedo atascado… amigo espero tu respuesta y te estare comentando como es que se ira formando la empresa con detalles y todo… con un infinito agradecimiento me despido, y espero tu pronta respuesta compadre.. adios

  15. Jose Luis Aranibar said,

    19.06.09 at 21:26

    Estimado amigo podrias ayudarme a hechar a andar el ejemplo, te lo agradeceria mucho, gracias. Por favor si tuvieras MSN para poder comunicarnos mejor. Espero podamos entrar a un acuerdo de ayuda mutua. Espero tu respuesta.

  16. Jose Luis Aranibar said,

    19.06.09 at 23:50

    mi email es joseluis.aranibar@gmail.com MSN messenger:joseluisaranibararaviri@hotmail.com, es pero tu respuesta.

  17. joszalu said,

    25.06.09 at 11:03

    Hola, ya instalé el Flash Media Server 3.5 y el Flex 3, he probadoa ponerlo en funcionamiento el ejemplo pero no consigo verlo. A ver si me pudieran ayudar y me dijeran donde tendría que ubicar la carpeta y ficheros?

    Un saludo.

  18. Marcelo said,

    09.12.09 at 0:45

    tengo Instaladas las versiones de Flex 3 y M Server 3.5 pero no logro configurarlos… alguna ayuda para iniciar el ejemplo de trasmision multimedia no puedo hacerlo desde ya agardecere cualquier tipo de ayuda y posteare mis logros para que la mesa de ayuda sea cada vez mejor para todos
    desde ya garcias totales Atte Marcelo V

  19. Marcelo said,

    12.12.09 at 15:30

    El ejemplo videoconferencia funciona, alguien mas esta siguiendo adelante con los ejemplos asi compartimos y podemos postear los cambios, tenemos que realizar multimedia si estas interesado en el proyecto io estoy adelantando si alguien se quiere sumar que no dude en sumarse al proyecto y poner a rodar el H.264 Atte marcelo y a quien se le complique la instalcion a puesta a punto io ya pase por eso y gracias al amigo larar5 que ayudo en el camino.-

  20. mine said,

    29.12.09 at 22:18

    hola buen dia me podrias ayudar pls ya que quiero darle seguridad a la videoconferencia pues necesito que se determine por nombre de usuario y contraseña pero como lo haria? pues tambien utilizo el fms y con flash pero no se como darle la seguridad y tambien se podra hacer transferencia de archivos para hacerlo mas completo pues yo lo tengo con chat, audio y video pero me faltaria la opcion de seguridad y envio de archivos, por cierto se puede manipular las ventanas de video, es decir se podra cambiar el tamaño de esta o cerrarlas?
    o se puede hacer un tipo de niveles de autoridad en estas aplicaciones?

  21. mine1 said,

    29.12.09 at 22:19

    urgente si lo pueden leer
    hola buen dia me podrias ayudar pls ya que quiero darle seguridad a la videoconferencia pues necesito que se determine por nombre de usuario y contraseña pero como lo haria? pues tambien utilizo el fms y con flash pero no se como darle la seguridad y tambien se podra hacer transferencia de archivos para hacerlo mas completo pues yo lo tengo con chat, audio y video pero me faltaria la opcion de seguridad y envio de archivos, por cierto se puede manipular las ventanas de video, es decir se podra cambiar el tamaño de esta o cerrarlas?
    o se puede hacer un tipo de niveles de autoridad en estas aplicaciones?

RSS feed for comments on this post · TrackBack URL

Leave a Comment