FMS Guru { Brasil } - Home

Curso on-line de Flex 3 + Vídeo

2008-08-09T01:20:00Z

Olá amigos,

Iniciou no dia 05/08 o curso on-line de Flex + Vídeo da e-Genial Soluções Inteligentes. O curso tem por objetivo ensinar todos os passos para se integrar Adobe Flex 3 + Flash Media Interactive Server, seguindo um passo a passo com um material muito bem documentado e exclusivo, contando também com um grupo de estudos e aulas duas vezes por semana em tempo real, usando o Treina TOM.

Neste curso será criado várias aplicações reais integrando Flex + Flash Media Interactive Server, como ferramentas para conferências, ferramentas para comunicações síncronas dentre outras. No final do curso os participantes irão aprender como colocar a aplicação em produção.

Para maiores informações, não deixe de visitar o site, e se você tiver alguma dúvida basta entrar em contato com a equipe e-Genial.

http://www.egenial.com.br/cursovideo/

Streaming e download progressivo

2008-07-08T14:23:00Z

Neste post gostaria de compartilhar com você alguns conceitos que fazem parte de nosso dia a dia dentro deste mundo fantástico chamado web 2.0. O primeiro deles é entender o que é streaming.

A primeira transmissão digital via streaming ocorreu no ano de 1988 utilizando a tecnologia Shoutcast com base no MP3 comprimido à 128kbps (qualidade de CD), porém, a internet ainda não era capaz de suportar transmissões de elevada velocidade e o projeto foi engavetado.

Hoje com sua internet de alta velocidade, isso já é real. Quando você se conecta a sua rádio preferida pela internet, onde a programação da mesma está acontecendo ao vivo, o seu player favorito tenta estabelecer uma conexão persistente com o servidor onde está o serviço de compartilhamento da rádio.

Desta forma os dados são enviados por pacotes de um único ponto, o servidor. Assim se cria um processo chamado de streaming ou broadcast, pelo qual se transmite ou difunde determinada informação, tendo como principal característica que a mesma informação está sendo enviada para muitos receptores ao mesmo tempo.

Com isto temos a sensação de que o áudio é transmitido ao vivo, dando a impressão que você está realmente com seu rádio ligado. Quando falamos em sensação, estamos descontando alguma latência de alguns milissegundos ou segundos que pode haver entre a rede que está o servidor até chegar em sua rede onde está o seu computador. Podemos concluir então que streaming é uma forma de transmissão síncrona através de uma comunicação persistente via TCP IP.

Outra coisa que você precisa entender é sobre o download progressivo, que permite assistir vídeos ou escutar música pela internet baixando os arquivos para o cache de seu browser. Desta forma você só consegue ter acesso a mídia assim que for ocorrendo o download da mesma.

Um exemplo simples de download progressivo são os vídeos disponibilizados no youtube.com, veja que, quando você acessa um vídeo e o mesmo começa, dentro de alguns segundos o mesmo para, carrega e volta a tocar novamente, até ser totalmente carregado em sua máquina. Vale destacar que, quando a mídia está totalmente carregado em seu computador é sinal que você já assistiu toda ela, a não ser que você tenha dado uma pausa para esperar a mesma ser totalmente carregada. Outro detalhe importante é destacar que este processo de download progressivo ocorre via HTTP, e o tamanho do arquivo está diretamente ligado ao tempo de download, por isto no Youtube você consegue assistir alguns vídeos mais rápidos que outros.

Este processo é o mais barato pois não exige a presença de um servidor de streaming, basta ter qualquer servidor HTTP e um player acessando diretamente o arquivo.

Streaming versus download progressivo

As pessoas me perguntam muito qual é a melhor opção para compartilhar arquivos de áudio, vídeo ou até mesmo criar ambientes de colaboração pela internet, e confesso que a resposta para isto é bem simples. Depende de projeto para projeto, de aplicação para aplicação.

Através do download progressivo você só consegue compartilhar arquivos que estão fisicamente no servidor HTTP, e os clientes só conseguirão avançar o vídeo se já foi feito o download do mesmo até o ponto que se quer avançar.

Já através do streaming você tem a flexibilidade de detectar o tamanho da conexão do usuário e tomar decisões, direcionando o streaming para o arquivo que tenha uma qualidade em que o usuário possa assistir mesmo se a sua conexão for lenta, tudo isso de forma automatizada e com total controle de buffer. O cliente poderá também avançar a mídia ou voltar a qualquer momento, sem precisar que a mesma esteja carregada totalmente em sua máquina, se isto for um item importante na aplicação e se os usuários precisam interagir de forma síncrona, sem dúvida o streaming é a melhor opção.

Outro ponto importante é o valor gasto em estrutura para montar um servidor de mídia, ex: Em um servidor de vídeos via download progressivo os itens principais é servidor HTTP, uma boa banda de saída(upload) e um bom espaço em disco para colocar os seus vídeos.

Já no servidor de mídias síncronas você irá precisar de um servidor de streaming, banda de saída(upload) e um bom espaço em disco. São os mesmos itens citados no servidor de vídeos via download progressivo, só trocamos o servidor HTTP por um servidor de streaming onde conseguimos ter um total controle sobre a mídia fornecida e realizar uma comunicação bi-directional (“full duplex”) em tempo real.

Você sabia?

Que a primeira transmissão mundial ao vivo ocorreu em 25 de junho de 1967, quando o canal inglês BBC se uniu a um pool de emissoras de 26 países para transmitir ao grupo The Beatles cantando a música All You Need Is Love.

Assista o vídeo aqui: http://youtube.com/watch?v=rLxTpsIVzzo

Distribuição de conteúdo multimídia

Uma das plataformas e plugins mais usados para distribuição de conteúdos multimídia através da internet usando download progressivo ou streaming é sem dúvida o flash player da Adobe, que já toma conta de 98% de todos os computadores ligados a rede mundial de computadores. Hoje a mesma versão que existe para Windows é a mesma do Linux, Mac OS e Solaris, o que não acontecia algum tempo atrás.

A Adobe vem investindo grandemente nesta runtime, no momento que estou escrevendo este post a versão corrente é 9.0.124, o que me faz crer que logo logo já exista uma versão mais recente, o que fortalece o comprometimento da Adobe com seus clientes.

O Flash Player alguns anos atrás era visto como um plugin para rodar animações feitas em Flash, e até hoje é visto desta forma por algumas pessoas do “mundo web” desatualizadas. Muitos desenvolvedores ainda não entenderam o que a Adobe está fazendo para o mundo tecnológico.

O Flash Player é o plugin mais usado também na distribuição de vídeos e áudio pela internet, estes recursos estão presentes no Flash Player desde suas primeiras versões ainda quando fazia parte da antiga Macromedia(Comprada pela Adobe Systems). A Adobe tem melhorado muito estes recursos com o tempo, com alguns posts criados aqui você poderá comprovar isto, como é simples e fácil criar ambientes e distribuir conteúdo multimídia usando esta runtime.

Vale destacar que o este player não para por aí, vide a versão 10 chamado de “Astro” que traz grandes melhorias em sua estrutura, como: Maior suporte para sabores *Unix, recursos 3D como eixo Z, detecção automática de banda com streaming dinâmico, novo codec de áudio, conteúdo indexado por ferramentas de buscas dentre outras features que você poderá acompanhar de perto acessando:

http://labs.adobe.com/technologies/flashplayer10/

Flash Player 10 e novos recursos de streaming

2008-05-15T11:48:00Z

Hoje a Adobe anunciou o beta do Flash Player 10, chamado carinhosamente de Astro, que vai trazer em sua estrutura novos recursos que de alguma maneira vão aumentar a qualidade das aplicações geradas.

Um dos destaques principais que fazem parte desta versão é o de streaming, que ganhou comunicação UDP sobre o novo protocolo da próxima release do FMS chamado de RTMFP (Real Time Media Flow Protocol), um novo codec chamado de Speex Audio e o tão esperado Dynamic Streaming.

Estes recursos vão fazer grande diferença para nós desenvolvedores de aplicações multimídia. O RTMFP provê em sua estrutura sobre o protocolo UDP mais segurança, melhor desempenho e baixa latência para comunicações em tempo real. O bacana deste protocolo é que ele é sempre criptografado, o que ajuda a proteger suas mídias e dados. Esta tecnologia é resultado da aquisição da Amicima, Inc., em 2006 pela Adobe.

Já o novo codec Speex conhecido pela comunidade Asterix, vai trazer maior fidelidade ao áudio transmitido e baixa latência, ele vai ser uma alternativa ao Nellymoser, mas levando muito mais experiências até os usuários.

E para finalizar com chave de ouro, o Dynamic Streaming vai acabar com aqueles inúmeros arquivos de vídeo separados para suportar cada tipo de qualidade/conexão. Agora, através deste recurso o mesmo vídeo criado sobre uma qualidade X poderá se auto-ajustar conforme a conexão do usuário, melhorando suas experiências, além de dar suporte total e controle para o desenvolvedor sobre a reprodução de vídeos por streaming, pois estes controles vão poder ser alterados em tempo real.

Outro detalhe importante é que, vamos ter que esperar por algum tempo até o lançamento da versão final do FP 10, e creio eu que o flash media server com suporte a estes recursos vai ser lançado junto.

Agora é esperar, grande abraço!

Servidores de streaming open source

2008-03-29T13:21:00Z

A cada dia que passa vemos novas implementações de servidores de streaming com os mais variados recursos, alguns até implementam uma comunicação persistente via RTMP usando AMF, o que faz com que vários de seus recursos, mesmo que use a especificação mais antiga do AMF, funcione bem similar ao Flash Media Server.

Alguns projetos como RED5 que é totalmente escrito em java funciona desta maneira, pois além de fazer streaming de arquivos flvs ele possui em sua estrutura todo o conjunto de implementações que o FMS possui, e até mesmo shared object e streaming in-live. Já existe vários cases e alguns até de médios portes que já usam o RED5 em sua estrutura.

O projeto esta em constante crescimento e promete chegar logo na versão 1.0. Um ponto importante que vale destacar e MUITO no RED5 é a linguagem e o formato da implementação das classes server-side, por ser baseada em java, a curva de aprendizado é um pouco maior, fazendo com que qualquer aplicação de pequeno e médio porte demore mais tempo para ser implementada. Há vale destacar que a comunicação é feita somente por AMF0 para a serialização e deserealização dos dados.

Outro projeto interessante também escrito em java é o Milgra, escrito por um cara que realmente não tinha o que fazer, no bom sentido, pois ele implementou um media server que só tem 64k, é isso mesmo 64 Kbyte!

O projeto ainda esta em fase beta, porém totalmente funcional para streaming de arquivos flvs, ao vivo, gravações e callbacks sobre AMF0. É tão audacioso este projeto que o seu criador fala em seu site, que em um teste sobre uma máquina Mac OS X 10.4 Desktop, Intel Core Duo, 1.8 Ghz, 1 Gb RAM com o servidor levantado e conectado 803 usuários, o cpu load ficou somente em 3.42 e consumiu apenas 180 megabytes de ram.

Em comparação com o RED5 o Milgra é muito mais fácil de se trabalhar, mesmo que seja usado java como linguagem server-side, ele conseguiu abstrair o máximo das dificuldades que são encontradas com o RED5. E com isso temos aplicações mais simples, porém totalmente funcional. O projeto vem com todos os códigos fontes, aplicações demos, tanto a aplicação server-side como a aplicação client-side em actionscript, e isso inclui também uma administração muito completa para as aplicações, por uma interface simples em flash que permite também realizar testes de stress sobre qualquer aplicação.

Um outro projeto que promete é o Rubyizumi, recém lançado no Google Code. Hoje ele permite fazer streaming de arquivos MP4, usando a versão mais recentente do flash player 9.0.115 ou superior.

O Rubyizumi é totalmente escrito em Ruby, e com uma simplicidade fora do normal para este tipo de aplicação. De tão simples que o projeto é, para fazer streaming dos vídeos basta ter o ruby instalado na máquina windows, linux, mac ou unix*, e dizer:

ruby server.rb /diretorio_de_meus_videos

Pronto! Seu servidor de vídeos em MP4 esta no ar!

Como o projeto é muito novo, não dá para exigir performance, pois em nosso teste com 10 vídeos simultâneos o servidor consumiu 12% da CPU e 10 megas de RAM em um computador Mac osx 1.5.2, core 2 duo 2.4, 3GB de ram e 4 mega de cache. Mas vale ficar de olho neste projeto pela sua simplicidade e a curva de aprendizado que a linguagem ruby vai te proporcionar.

Bom por enquanto é isso! Grande abraço

Vídeos e streaming em 3D?

2008-03-26T22:31:00Z

Imagine que você tenha uma camêra que filme em 360 graus, agora imagine poder fazer streaming deste vídeo ou da transmissão em tempo real?

Esta é uma das propostas da empresa Immersive Media. Ainda não tinhamos visto nada igual, é algo de deixar qualquer um louco de curiosidade, ainda mas após saber que o player do vídeo abaixo funciona em 3D graças ao poder do actionscript, e claro sobre o Flash Player.

Para testar, basta dar um clique em Play, e em seguida basta dar um clique no vídeo e mover o mouse, e veja o poder e as idéias para novos projetos que isto pode proporcionar. <center> <object height="288" width="416"><param /></object> </center>

Grande abraço ;-)

Flex e Flash Media Server: Server Side ActionScript parte 1

2008-02-10T02:16:00Z

Server Side ActionScript(SSAS) é a liguagem de programação utilizada pelo Flash Media Server, muito poderosa e com muitos recursos para trabalhar com dados síncronos ou até mesmo a manipulação de arquivos.

Sendo uma linguagem server-side, não é preciso que esta seja compilado junto com o SWF, ou seja, você usa como se estivesse usando outra linguagem de servidor como PHP, Ruby on Rails ou ColdFusion.

Quando criamos uma aplicação com o Flash Media Server, estas são criadas no seguinte diretório.

C:\Program Files\Adobe\Flash Media Server 3\applications

Ou seja, se criarmos uma aplicação no Flash Media Server com o nome de “teste”, ficará da seguinte forma: caso queira mudar esse diretorio padrão, basta encontrar o seguinte arquivo

C:\Program Files\Adobe\Flash Media Server 3\conf\fms.ini

e mudar na seguinte linha para o diretorio de sua preferência

# Application directory for the virtual host
# For example:
#    VHOST.APPSDIR = C:\myapps
#
VHOST.APPSDIR = C:\minhasApps

Partindo do princípio que estamos usando a configuração padrão do Flash Media Server, salveremos os arquivo .asc no seguinte diretório: C:\Program Files\Adobe\Flash Media Server 3\applications\teste

Então logo teremos o seguinte endereço rtmp “rtmp://localhost/teste” ou “rtmp://seu_servidor_fms/teste” para ser acessado pela aplicação cliente.

Quando criamos aplicações que vão realizar comunicações bilaterais ou seja, server <-> cliente, por padrão deve-se criar sempre um arquivo chamado “main.asc” que será chamado automaticamente quando a aplicação for carregada.

Uma dica é acompanhar o andamento do server, aplicações, streams etc. pelo console do Flash Media Server, localizado seguinte endereço.

C:\Program Files\Adobe\Flash Media Server 3\fms_adminConsole.swf

É no console que você vai acompanhar seu debug no Flash Media Server, como por exemplo:

Arquivo main.asc

// ActionScript Communications Document trace(“init app…”);

E no console teremos o seguinte resultado:

Agora a integraçao com o Flex é bem simples, vejamos o seguinte exemplo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                         layout="absolute" 
                         creationComplete="init();">
  <mx:Script>
    <![CDATA[
    import flash.net.NetConnection;
    import flash.net.ObjectEncoding;

    [Bindable]
    public var nc:NetConnection = new NetConnection();
    [Bindable]
    public var rtmp:String = "rtmp://localhost/flexfms";

    public function init():void{
     trace("init app...");
     nc = new NetConnection();
     //Opa!!! Com o Flash Media Server 3, 
     //nao é mais necessario setar qual AVM usar.
     //nc.objectEncoding = ObjectEncoding.AMF0;
     nc.connect(rtmp);
     nc.addEventListener(NetStatusEvent.NET_STATUS,handler);
     nc.addEventListener(AsyncErrorEvent.ASYNC_ERROR,asyncErrorHandler);
    }

    public function handler(e:NetStatusEvent):void{
      trace(e.info.code);
    }

    public function asyncErrorHandler(e:AsyncErrorEvent):void{
     trace(e);
    }

    public function onBWDone():void{
     //
    }
    ]]>
  </mx:Script>
</mx:Application>

Compilando o mxml, deveremos ter o seguinte resultado:

Essa foi a primeira parte de uma série de artigos, no próximo nos aprofundaremos mais na linguagem de servidor do Flash Media Server

Flash Media Server 3, pronto para download!

2008-01-25T13:08:00Z

Conforme tínhamos compartilhado nesta semana a Adobe fez o lançamento oficial hoje do Flash Media Server 3.

Você poderá fazer o download gratuito da versão developer para até 10 conexões simultâneas, porém totalmente funcional com todos os recursos do FMIS que permite a gravação de vídeos e objetos compartilhado do lado do servidor e claro comunicação bilateral, além de streaming sob demanda.

O Flash Media Interactive Server 3 (FMIS) sofreu uma pequena mudança no valor ficando em $ 4,500 e o Flash Media Streaming Server (FMSS) ficou mesmo na casa de $ 995.

Vale lembrar que agora não existe mais limite de banda e nem de conexões simultâneas.

Há rumores por aí de algumas pessoas que fizeram alguns testes com 400 usuários simultâneos que entraram em sessão consumindo 13Mbit de banda e a carga da CPU ficou em torno de 5%, interessante, eu já baixei o meu e você?

Grande abraço e bons estudos!

AIR, Flex e vídeos de alta definição

2008-01-21T14:31:00Z

Alguns meses atrás a Adobe liberou uma versão do Flash Player 9 com suporte a vídeos padrões MPEG-4, incluindo formatos como F4V, MP4, M4V, MOV, MP4V, 3GP, 3G2 que são compressos com o codec H.264 e áudio com HEAAC V2.

O codec H.264 oferece maior qualidade de vídeo em bitrates mais baixos comparados com o mesmo perfil de codificação Sorenson ou On2. HE-ACC v2 é uma extensão do ACC que por vez é um padrão definido para o formato de áudio MPEG-4 vídeo standard que contém técnicas para aumentar com eficiência a codificação de vídeos com baixa qualidade.

O Adobe AIR agora também tem suporte a H.264 e para criar aplicações usando destes recursos é muito simples.

Vamos agora criar um componente flex/air para ler estes formados.

Antes de continuar gostaria de dizer que este componente é baseado na idéia de David Hassoun da RealEyes Media.

Este componente estende UIComponent e adiciona um objeto vídeo em sua estrutura, o código segue abaixo.

package br.com.fmsguru
{
    import flash.events.NetStatusEvent;
    import flash.media.Video;
    import flash.net.NetConnection;
    import flash.net.NetStream;
    import mx.controls.Alert;
    import mx.core.UIComponent;

    public class FmsGuruVideo extends UIComponent
    {
        private var vid:Video;      
        private var nc:NetConnection;      
        private var ns:NetStream;      
        private var cli:Object;      
        private var _caminho:String; 

        public function FmsGuruVideo()
        {
             super();
             init();
        }
        }
}

A idéia básica aqui é bem parecida com uma conexão com o servidor FMS, porém, em vez de conectar ao servidor, vamos abrir uma conexão nula que não irá fazer streaming e sim criar um download progressivo do vídeo.

public function init():void      
{      
     vid = new Video();          

     nc = new NetConnection();      
     nc.connect(null);           

     ns = new NetStream(nc);
     ns.bufferTime=0.2;      

     cli = new Object();      
     ns.client = cli;      
     ns.addEventListener(NetStatusEvent.NET_STATUS, onStatus);

     vid.attachNetStream(ns);

     this.addChild(vid);

     if(_caminho)      
     {      
        ns.play(_caminho);      
     }                 
}

Criamos uma instância de NetConnection e uma instância para o NetStream ns, que faz um buffer para melhorar a leitura do vídeo, em seguida adicionamos um listener para respoder o status da conexão para com o arquivo e anexamos a um objeto de video.

private function onStatus(obj:NetStatusEvent):void
{ 
}

Na função onStatus simplesmente comparamos as mensagens para serem mostradas ao usuário.

E para finalizar nosso componente criamos dois métodos get e set para mostrar o caminho do arquivo que queremos dar um play.

[Bindable]
public function get filePath():String      
{      
    return _caminho;      
}      

public function set filePath(p_path:String):void
{      
    _caminho = p_path;      
    ns.play(_caminho);      
}

Prontinho o componente esta pronto para uso. Para testar basta adiciona-lo assim:

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
                        layout="absolute" 
                        xmlns:video="br.com.fmsguru.*">

    <video:FmsGuruVideo id="_videoGuru" 
                        filePath="curtacircuito007.m4v"/>

</mx:WindowedApplication>

Neste exemplo estamos fazendo a leitura do arquivo .M4V direto pelo file system, vale lembrar que o sandbox do AIR deixa acessar a máquina local, mas se este componente for usado em uma aplicação Flex, o arquivo só poderá ser lido diretamente de alguma url.

Para fazer o download da aplicação e do componente basta clicar aqui

Grande abraço!

Flash Media Development Server

2008-01-21T12:33:00Z

Para quem não sabe, existe uma versão free do FMS para download disponível no site da Adobe. Esta versão é chamada de Flash Media Server Developer Edition.

Ela é totalmente completa provendo de todos os recursos disponíveis em outras versões como o FMIS e o FMSS, porém a única restrição é a quantidade de conexões simultanêas que é limitada a 10, e vale resaltar que ela nunca expira. Com esta versão seu ambiente de desenvolvimento ficará completo podendo usar em testes sobre sua internet e intranet.

E se você gostar, basta fazer a aquisição da licença e inserir em sua versão de desenvolvimento e voilá! Automaticamente ele será atualizado para a versão adquirida.

Para fazer o download basta clicar no link abaixo:

Download do FMDS

Flex + FMS, um simples chat

2008-01-21T12:30:00Z

Esta semana vamos lançar nosso primeiro vídeo tutorial, onde vamos criar um simples chat que você poderá usar em seu webblog, site ou até mesmo em sua empresa.

Este chat será criado com Flex 3 beta public 3 e FMS 2 – Developer Edition.

O vídeo estará disponível por streaming via fms.

Aguarde as novidades!

Flex + FMS, compartilhando a webcam

2008-01-18T17:22:00Z

Neste primeiro tutorial vamos fazer uma introdução ao desenvolvimento de aplicações multimedias usando Flex + Flash Media Server.

Através de uma abordagem simples e com vários exemplos de código você irá aprender a transmitir ao vivo sua webcam ou dispositivo de vídeo através de uma aplicação Flex, compartilhando assim com seus amigos da web.

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!

Flash Media Server 3

2008-01-18T14:57:00Z

Nas próximas semanas a Adobe deve fazer o lançamento oficial da nova versão do Flash Media Server que contará com novas features que vão realmente fazer a diferença comparada a versão atual.

Mas antes de continuar deixa-me compartilhar com você o que é realmente o FMS.

O que é Flash Media Server?

Flash Media Server ou FMS é um robusto servidor de streaming de áudio e vídeo da Adobe. Criado em 2002 pela Macromedia ainda com o nome de Flash Communication Server MX 1.0 e logo em 2005 mudado para Macromedia Flash Media Server 2, o FMS é uma das* melhores soluções para a distribuição síncrona de conteúdo rico para a internet.

Após a Adobe fazer a aquisição da Macromedia, o FMS ganhou algumas correções e entrou também para o time de soluções corporativas da Adobe.

O FMS 2 oferece soluções para demanda de streaming de vídeos em FLV e áudios em MP3, possuindo também recursos síncrono para comunicações de vídeo conferências, dados, gravação de áudio e vídeo, suporte a SSL e montagem de cluster.

Sua linguagem server-side é Actionscript e o protocolo de comunicação é o Real time Messaging Protocol. O RTMP é um protocolo proprietário criando pela Macromedia (Agora Adobe) para streaming de áudio, vídeo e dados pela internet usando uma comunicação persistente entre uma aplicação que roda sobre o Flash Player e o servidor.

Este protocolo trabalha em cima do TCP e usa como porta padrão a 1935, mas caso, a rede da empresa tenha algumas regras de segurança, é possível usar o RTMPT que é encapsulada dentro de requisições HTTP passando assim pelos firewalls da vida, este processo é chamado também de HTTP tunneling.

Há não posso de deixar de citar o RTMPS que funciona sobre o RTMPT, que cria uma conexão segura HTTPS para as comunicações de dados síncronos ou não.

Estes são alguns recursos que o FMS usa em sua estrutura, mas não para por ai, com o FMS e um pouco de criatividade é possível ir além de vídeos e áudios, é possível criar jogos ou redes sociais, com o FMS um mundo novo se abre e o que manda aqui é realmente a sua criatividade.

Hoje existe muitas empresas e grandes corporações usando o Flash Media Server e algumas delas é o Youtube, Odeo Studio, Uol, StimTV, thePlatform e outras como a Brightcove.

Recentemente, em novembro de 2007 a Adobe fez o anúncio da nova versão, o FMS 3. Com o Flash Player 9 suportando vídeos HD usando também o codec H.264, o FMS também não ficou para traz, agora contando com duas versões a FMIS e o FMSS, o servidor teve grandes mudanças em sua estrutura e uma nova forma de comercialização.

A forma de comercialização do FMS 2 é baseada na Origin/Edge um servidor full para também montagem de cluster e o FMS Professional que possui em sua estrutura profiles e estes profiles é que definem a quantidade de banda x quantidade de usuários que seu servidor vai suportar, forçando assim a compra de mais licenças.

Agora com o FMS 3 isso acabou, teremos banda ilimitada e quantidade de conexões simultâneas também ilimitadas, e claro um preço mais justo.

O Adobe Flash Media Interactive Server 3(FMIS) é a versão do servidor mais completa onde além de streaming você poderá criar aplicações síncronas para eventos, vídeos conferencias com áudio e áudio e vídeo, dados, redes sociais, chat dentre outros, nesta versão é possível a comunicação bilateral, client x server, e server x client.

Já o Adobe Flash Media Streaming Server 3(FMSS) é a versão mais simples que permite fazer somente streaming de vídeos e áudio, nesta versão não é possível a comunicação bilateral.

Vale lembrar que existe desde o FMS 2 a Developer Edition com todas funcionalidades, porém com limite de 10 conexões simultanêas o que é essencial para um treinamento ou um verdadeiro ambiente de desenvolvimento.

Vou citar agora algumas das features que estão disponíveis nestas versões.

Maior desempenho

O desempenho de streaming de vídeos foram dobradas nesta nova versão do FMS3, permitindo assim uma maior quantidade de usuários por servidor, que eram características somente encontradas nas versões anteriores do FMS 2 Edge e Origin.

Conteúdo seguro

O Flash Media Server 3 possui um novo protocolo chamado de RTMPE, uma versão melhorada do protocolo Real Time Messaging Protocol (RTMP), com um maior desempenho e pronto para ajudar a garantir a integridade dos dados que agora são encriptados com 128 bits. Com este recurso é possível também proteger o arquivo swf que evita que o swf seja usado em locais não autorizados.

Suporte a codecs como H.264 e áudio com HE-ACC

Agora é possível usar vídeos de alta qualidade(HD) de até 1080p sobre o Flash Player, Adobe AIR, Adobe Media Player e que agora também através do Flash Media Enconder + Flash Media Server 3 será possível fazer streaming e criar conteúdos de alta qualidade reduzindo também o custo de compartilhamento com o uso de banda.

Maior performace e qualidade em eventos ao vivo

Alta performance em eventos ao vivo usando H.264 e On2 VP6 é suportado agora com o Flash Media Enconder 2, provendo assim qualidades em vídeos de noticias, eventos e sites sociais que produzem conteúdos dinâmicos em tempo real.

Suporte ao Flash Lite 3

Vídeos e áudios sob demanda agora é suportado por dispositivos móveis com suporte a plataforma Flash Lite 3. O mesmo vídeo que funciona em seu navegador agora você poderá ser visto diretamente pela tela de seu celular.

Nova arquitetura de plugins

Integração com outros servidores, serviços e workflow é suportado pela arquitetura de plugins do Flash Media Server 3. Com três classes de plugins que permite controlar acessos ao servidor, conectividade e segurança.

Bom, estas são algumas das novidades que o FMS 3 irá suportar em sua arquitetura, foi uma breve introdução na verdade e nós aqui do FMSGuru Brasil vamos continuar a compartilhar sobre as novidades do desenvolvimento de aplicações ricas com o FMS 3 e todas as suas novidades.

Espero que tenha gostado.

Grande abraço!

FMS Guru Brasil, o que é realmente?

2008-01-18T13:55:00Z

Este é o primeiro post de abertura deste mais novo webblog.

Aqui vamos falar de muitas coisas ligadas ao desenvolvimento rico de aplicações web bem como soluções em streaming, áudio e vídeo usando tecnologias Adobe ou não.

Este webblog foi criado com um objetivo fundamental que é o compartilhamento de idéias, técnicas e dicas do dia a dia que vão te ajudar a entrar neste mercado que mais cresce hoje na internet, o mercado de soluções e streaming sobre demanda.

Baseado em um estudo que fizemos hoje existe pouca documentação brasileira que trata de assuntos ligados a servidores de streaming de áudio e vídeo, e por isto que o FMS Guru Brasil nasceu, para suprir esta necessidade.

Então desde já queremos te dar boas vindas ao primeiro repositório do brasil de artigos, tutoriais e vídeos tutoriais sobre Flash Media Server e sua integração com Flex e Adobe AIR.

Se você quer aprender mais sobre estas tecnologias ou dar dicas para criarmos novos artigos, entre em contato conosco pois seu feedback será sempre bem vindo.

Grande abraço!