FMS Guru { Brasil }

Flex + FMS, compartilhando a webcam

Um dia passamos pela web estática, hoje temos uma internet totalmente interativa e motivada por grandes multidões que estão conectadas as redes sociais dos mais variados tipos. E depois do BOOM vem a era multimídia sobre a internet, vídeos de alta definição(HD), redes sociais baseados em vídeos, fóruns baseados em comentários por áudios, podcasts, screencasts até filme inteiros é possível assistir hoje pela internet, isso tudo graças a doção, barateamento e o aumento da conexão de cada empresa, escola ou residência.

Ta mais o que isso tem haver com Flex + FMS? TUDO! Claro que tem a ver com tudo, com Flex temos todo o poder para criar aplicações ricas de interatividade e até mesmo as aplicações citadas acima. E com o Flash Media Server podemos estender este poder para algo mais além, algo mais interativo com áudio, vídeo e iteração multimídia em tempo real.

Quando começamos a desenvolver o Treina TOM não sabíamos que o Flex encaixaria com uma luva nesta implementação, a Adobe fez jus ao framework deixando ele totalmente flexível para o desenvolvimento também de aplicações multimídias, e com o Actionscript 3 foi fácil entender, pois a curva de aprendizado é bem baixa tornando o desenvolvimento mais produtivo.

Para você que não conhece o Actionscript 3 ou vem do Actionscript 2, não se preocupe, pois na mudança do Actionscript 2 para o Actionscript 3 a Adobe levou boa parte de sua estrutura e classes para um paradigma de análise, projeto e programação baseado na composição e interação entre diversas unidades que podemos chamar de objetos. Por isso vamos encontrar nomes de objetos idênticos a que era usado no AS2, porém agora eles são implementados de forma um pouco mais organizada e muito mais orientados a objetos.

A curva de aprendizado do Actionscript 3 é realmente baixa comparada a muitas linguagens de programação que existe hoje. AS3 é baseado no ECMAScript, assim como o Javascript. No Flex usamos o Actionscript para definir a lógica de nossa aplicação e o MXML para definir a interface da aplicação.

Desenvolver aplicações com Flex é muito bom, ou melhor, bom * 1000 De tão interativo que é, logo a paixão chega, e não é a toa que o Flex é um dos frameworks que mais cresce o número de empresas e desenvolvedores adotando-o.

E por onde começamos a aprender a fazer tudo isso?

Simples… Creio que você já sabe o que é Flex, e sabe claro o que é Flash Media Server, e têm eles instalados em sua máquina, então é hora de colocar a mão na massa!

Vamos recapitular, o que vamos fazer?

Bom este é simplesmente o primeiro tutorial de uma série de tutoriais que vamos criar aqui, para compartilhar com todos vocês a nossa expertisse que é Flex + Flash Media Server. E quem sabe em um futuro próximo Ruby on Rails? Neste tutorial vamos criar nossa primeira integração de Flex + FMS e de cara compartilhar pela internet a sua webcam ou qualquer outro dispositivo de vídeo ligado à máquina, então mãos a obra!

É hora de codar!

O primeiro passo é, crie um projeto dentro de seu Flex Builder chamado:

CompartilhandoAWebcam

Este projeto será composto pelo arquivo principal:

CompartilhandoAWebcam.mxml

Para esta aplicação iremos precisar somente de três funções, uma que cria a conexão com o servidor chamada de init(), uma que aguarda receber o status desta conexão chamada netStatus() e outra que vai dar um play na publicação enviada ao servidor que é chamada de cameraShow().

              private var nc:NetConnection;
              private var nsCli:NetStream;
              private var nsPub:NetStream;
              
              private function init():void
              {
               if(nc){
                nc.close()
               }
               nc = new NetConnection();
               NetConnection.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;
               nc.objectEncoding = ObjectEncoding.AMF0;
               nc.addEventListener( NetStatusEvent.NET_STATUS, netStatus );
               nc.connect("rtmp://localhost/fmsguru/");
              }
              

A função init() é chamada assim que a aplicação é carregada através do evento creationComplete, dentro de seu corpo é criado uma instância do netConnection através da variavel nc.

Por default no Flex é usado a versão 3 do AMF, então é preciso setar o netConnection com o tipo de encoding correto ao do servidor FMS 2 que é a versão do AMF 0. Mas isso já foi resolvido com o FMS 3, pois irá suportar nativamente o AMF 3.

O próximo passo é adicionar um listener que identificará o status da conexão, passando assim um objeto para a função netStatus.

E para chamar a conexão através do método connect do netConnection passamos o endereço e o nome da aplicação criada no servidor fms. Por default usaremos o RTMP e o nome da aplicação fmsguru.

Para criar uma aplicação fms simples que só responderá as conexões e não precisa responder procedimentos remotos basta criar uma pasta dentro do diretório application da instalação de seu fms, conforme figura .

Com a função init pronta agora precisamos receber o status da conexão, para isso precisamos fazer algumas comparações com o resultado enviado através do evento NET_Status do netConnection.

              private function netStatus( event:NetStatusEvent ):void
              {
               switch( event.info.code ) {
              
               case "NetConnection.Connect.Success":
                _label_status.text = "Status: Conexão realizada com sucesso!";
                nsPub = new NetStream ( nc );
                nsPub.attachCamera(Camera.getCamera());
                nsPub.publish("myVideo");
               break;
              
               case "NetConnection.Connect.Closed":
                _label_status.text = "Status: Conexão fechada!";                  
               break;
              
               case "NetConnection.Connect.Rejected":
                _label_status.text = "Status: Conexão rejeitada!";   
               break;                    
               }
              }
              

A função netStatus então recebe o status da conexão que através de um switch faz a comparação com o código enviado pelo servidor FMS.

NetConnection.Connect.Success => Retorno de conexão realizada com sucesso.

NetConnection.Connect.Closed => Retorno identificando que a conexão foi fechada.

NetConnection.Connect.Rejected => Retorno identificando que a conexão foi rejeitada.

Dentro da condição de conexão realizada com sucesso criamos uma instância do NetStream. Esta classe abre uma comunicação para streaming entre a aplicação que esta rodando sobre o Flash Player e o Flash Media Server ou com o sistema de arquivos local, este objeto é um canal que roda dentro do NetConnection que pode publicar e receber dados, utilizando NetSream.publish ou NetStream.play, publicando assim áudio e vídeo em tempo real. Você também pode usar um objeto NetStream para enviar mensagens de texto ou objetos inteiros para todos os clientes que estão conectados a mesma instância da aplicação corrente usando um NetStream.send.

Assim que recebemos o resultado do servidor que a conexão foi realizada com sucesso anexamos a câmera default detectada pelo Flash Player.

                nsPub = new NetStream ( nc );
                nsPub.attachCamera(Camera.getCamera());
                nsPub.publish("myVideo");
              

Quando criamos uma instância do NeStream é preciso passar para ele quem é o NetConnection, para assim anexar o dispositivo de vídeo ou microfone.

              nsPub.attachCamera(Camera.getCamera());
              

Com Câmera.getCamera capturamos o dispositivo de vídeo 0 encontrado pelo Flash Player. Para listar todos os dispositivos basta buscar por Camera.names que irá retornar um array contendo os nomes dos dispositivos de vídeos.

Assim que anexamos com attachCamera é preciso publicar este dispositivo, para isso usamos nsPub.publish(“e o nome do vídeo”). O nome do vídeo pode ser qualquer string que o client irá encontrar no servidor para dar um play, é desta mesma maneira que podemos publicar vídeos em FLV, mas isso é um assunto para outro tutorial.

Bom, já temos uma conexão com o servidor e a webcam sendo publicada, agora é preciso dar um play nesta publicação para ver o vídeo que esta sendo transmitido.

A função cameraShow() é a responsável por isso, quando clicarmos no botão _btnCamShow a função irá fazer uma comparação identificando o label e em seguida abrir uma nova instância do NetStream que irá rodar sobre a variável nsCli.

              private function cameraShow():void
              {
                 if(_btnCamShow.label=="Camera Show!"){
                    _btnCamShow.label="Publicando!"; 
              
                    nsCli = new NetStream ( nc )
              
                    var vid:Video = new Video();
                    vid.height = _myVideoComponent.height;
                  vid.width  = _myVideoComponent.width;
                  vid.attachNetStream( nsCli );
              
                  _myVideoComponent.addChild( vid );
              
                  nsCli.play("myVideo");
              
                 }else{
                  nsCli.close();
                  _btnCamShow.label="Camera Show!";
                 } 
              }
              

Parte do corpo deste código é parecido com a publicação do NetStream nsPub, a diferença é que lá publicamos o dispositivo anexado, e aqui damos um play na publicação myVideo.

Criamos também um novo objeto Vídeo que anexamos com attachNetStream ao NetStream nsCli, e assim que anexado adicionamos a um componente UIComponent.

              <mx:UIComponent id="_myVideoComponent" 
                  width="163" 
                  height="130" 
                  verticalCenter="-10"  
                  horizontalCenter="0"/>
              

Pronto, a lógica da aplicação esta pronta!

Agora você já poderá adicionar o botão btn_Show e o label _labelStatus que irá mostrar o status da conexão , em seguida compilar e rodar.

Para acompanhar o resultado do streaming você pode abrir o Management Console do FMS e ver o resultado da trasmissão que esta ocorrendo sobre a aplicação fmsguru.

O Código fonte desta aplicação esta disponível aqui para download, caso tenha alguma dúvida é só deixar um comentário aqui pra gente e não esqueça de compartilhar com a gente o que você achou deste tutorial.

Grande abraço e boa diversão!