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

34 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?

  22. lola said,

    16.03.10 at 10:30

    a mi solo me sale la pantalla de la cam pero no me sale nada mas ¿es asi como funciona?¿no hay un panel donde salga la lista de usuarios o algo asi?¿alguien me puede ayudar?

  23. Edgar said,

    19.03.10 at 16:20

    hola paola que necesitas para qeu tu videoconferencia se levante?
    ya instalaste el fms y que version tienes?

  24. lola said,

    05.04.10 at 11:06

    hola edgar,te cuento,tengo el FMS en streaming la version 3.5.
    Este ejemplo,cuando lo arranco y lo hago en debug me sale que conecta con exito y sale la camara,hasta ahi bien,pero si intento conectarme con otro ordenador en red, el otro me dice que no se puede conectar al servidor(obviamente es el mensaje que le puesto que me diga cuando no conecta con el servidor),ademas,miro el panel de administracion del FMS y en la seccion de sharedObjet no sale nada,vacio y en el debug se salta la sincronizacion y lo unico que me muestra es la webcam(y lo que se vé),me estoy volviendo loca porque no se porque no conecta otro ordenador en red(la ruta la pongo por IP) y no sé porque no sale algo parecido a un panel de usuarios,espero que me puedas ayudar,edgar
    un saludo

  25. Edgar said,

    05.04.10 at 15:27

    HOLA LOLA CUAL ES TU CORREO Y LA OTRA ES QUE EL FMS SOLO TE DA EL STREAMING PARA PUBLICARLO NECESITAR HACERLO POR UN SERVIDOR WEB MI CORREO ES fzinco5@hotmailcom si kieres te ayudo y utilizamos la videoconferencia hecha en fms y la aplicamos y ves como queda bye

  26. lola said,

    05.04.10 at 16:32

    hola edgar,tengo instalado el apache (wampserver),lo tengo en la ruta clasica c/wamp/etc…
    y el FMS lo tengo en archivos de programa/adobe/etc…
    ¿crees que deberia cambiar algo en el archivo php.ini o http.conf?¿como puedo configurarlo para que funcionen?,muchas gracias edgar por hecharme una manita,que me trae loca

  27. Edgar said,

    05.04.10 at 18:35

    muy bien pero tienes k hacer un alias en el apache el wampserver es muy bueno situ le kieresponera lgunas otras cosas pero te recomiendo que si solo vas a publicar una pagina web con codigo html y flash lo hagas con algo muy sencillo como el babywebserver es un programita muy sencillo y con log de que ip se conecta a tu pagina
    pero prefiero que me mandes el email a mi cuenta ya que no todo el tiempoo atiendo el blog

  28. Manel said,

    20.04.10 at 13:10

    Hola Edgar, me parece un post espectacular, sólo tengo una duda.
    Para que lo que escribe el “usuarioA”, lo vea “el usuarioB”, y teniendo en cuenta que tengo un “textInput” y un “Button”, que son los encargados de permitir escribir y de mandar el texto, debería hacer solamente lo siguiente:

    myBTN.addEventListener(MouseEvent.CLICK, onClick);

    private function onClick(e:event):void{
    listaUsuarios.data.message = myTXTInput.text;
    }
    private function sincronizacionObjetoCompartido(event:SyncEvent):void{
    chatBody.text = listaUsuarios.data.message;
    }

    o debo crear alguna función en el main.asc?

    Muchas gracias por tu post y tu tiempo
    Manel

  29. Andres said,

    01.06.10 at 13:31

    Hola:

    Al hacer las pruebas de modo local, funciona perfecto pero al probarlo en una red LAN, los computaores en red no pueden acceder a la videoconferencia, sale el siguiente mensaje “ERROR AL CONECTARSE AL SERVIDOR” , entonces me imagino que la parte del script que no funciona es la de conexion
    nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
    nc.client = this;
    nc.connect(”rtmp://localhost:1935/videoconferencia”, “”, “”);

    Puedo decir que en la carpeta aplicaciones de FMS tengo la carpeta videoconferencia, y en XAMPP tengo la carpeta videoconferencia con todos los archivos que subiste.
    Me podrian explicar como ubicaron los archivos o como los modificaron para ponerlos en APACHE en el servidor web ??? para que los demas equipos puedan conectarse a la pagina y tener el servicio de videoconferencia de FMS

  30. respuesta a andres said,

    01.06.10 at 16:00

    hola andres al ponerlo en xampp supongo utilizas windows hay una aplicacion en la red de server web muy pequeña babyweb esta bien para lo que kieres y no te compliques si nada mas utilizas un sitio si tulizas mas usa el xampp o el wamp que me gusto mas y tambien abre los puertos de tu servidor para que los puedan ver los demas

  31. Andres said,

    01.06.10 at 19:01

    Osea, solo verifico que esten abierto el puerto 1935.

    En la carpeta htdocs del seridor web, yo pongo todos los archivos, pero el archivo al que debe ingresar el cliente, supongo que es bin-debug/videoconferencia.html

    Saludos

    y gracias por tu respuesta

    Andrés

  32. Moi said,

    02.06.10 at 12:33

    Hola a todos, he leido la guia y todos los comentarios y aún así no me sale.. Estoy acabando un chat en php + MySQL y mi intención era incluirle videoconferencia, resulta que la única forma de conseguirlo es con Flash. Bien.. Pues mi idea era siguiendo los pasos de esta guia poder implementarlo a mi aplicación y si no puedo vincularlas por un iframe. A ver.. La carpeta Videoconferencia, supongo que como toda aplicación web, se incluye en httdocs del xampp (lampp, wampp..) y en el directorio de aplicaciones del servidor Flash que se debe poner? Como tienen relacón? Y con Flex? Y para ejecutarlo en el navegador? Ni localhost:1935/videoconferencia ni http://localhost/Videoconferencia/bin-debug/Videoconferencia.html me funcionan. Gracias de antemano, en cuanto tenga acabada la aplicación os la puedo pasar. Mi correo es: mcastell@clicedu.com

  33. Andres said,

    02.06.10 at 21:41

    Hola:

    La persona que publico esto, podria publicar los archivos .fla???
    Creo que la aplicacion de videoconferencia tiene un error que se deben a los archivos swf.

    Si los pudieran publicar seria gran ayuda

  34. admin said,

    02.06.10 at 22:08

    Hola. No hay archivos fla de este ejemplo. Es una aplicación Flex y pongo el enlace para descargar el proyecto para Flex Builder al principio del hilo. Si la ejecutas en localhost con las configuraciones del Flash Media Server como indico en el post, debería de funcionar sin problema. Si ya quieres hacer que se conecten desde el exterior, hay que cambiar la ip de conexión al Flash Media Server por la dirección IP que sea (esto editando el código Flex).

    Saludos.

RSS feed for comments on this post · TrackBack URL

Leave a Comment