Stream com Flex ou Flash ou Flash Lite e Flash Media Server

Nos últimos anos vimos uma explosão do crescimento de conteúdo multimídia, contribuindo também o crescimento do uso da banda larga, temos mais usuários com acesso a conteúdo multimídia, mas o principal fator foi a facilidade que o Flash trouxe para esse tipo de implementação de conteúdo rico(ou você acha que se o youtube fosse feito com windows media, teria o mesmo resultado :P ), inclusive para dispositivos movéis. Recentemente tivemos os maiores picos de pessoas acessando conteúdo via stream com o funeral do Michael Jackson, só não sendo superado pela posse do Obama.

Adobe Flash Media Server e Flash Platform

Adobe Flash Media Server e Flash Platform


O objetivo deste artigo é demonstrar como podemos fazer a simples distribuição de conteúdo por stream usando o Adobe Flash Media Server juntamente com a Flash Platform.
Veremos como implementar um serviço de stream com Adobe Flex, Adobe Flash e Adobe Flash Lite juntamente com o servidor de stream Adobe Flash Media Server.
Adobe Flash Media Server 3.5

Adobe Flash Media Server 3.5


O Adobe Flash Media Server, atualmente na sua versão 3.5, conta com três versões disponivéis:

  • Adobe Flash Media Streaming Server - Para trasmissão de conteúdo por streaming com a Flash Platform
  • Adobe Flash Media Interactive Server - Para aplicativos interativos, multi-way communication, videos em real-time, audio, e data sharing.
  • Adobe Flash Media Development Server - Contém todas as funcionalidades do FMIS, sendo free e limitado a 10 conexões simultâneas.

Alem dessas versões, existem as seguintes:

Preparando o servidor Adobe Flash Media Server
A versão usada no tutorial foi o Flash Media Server 3.5, veja como instalar neste artigo de Tom Green, certifique-se que o servidor esteja rodando normalmente, e vamos criar o diretorio da nossa aplicação de exemplo, por padrão, os diretorios dos aplicativos são criados no caminho: "C:\Arquivos de programas\Adobe\Flash Media Server 3.5\applications", eu mudei no arquivo fms.ini(C:\Arquivos de programas\Adobe\Flash Media Server 3.5\conf) na constante "VHOST.APPSDIR" para "C:\apache\htdocs\applications\".
Feito isso, vamos criar o diretorio de nossa aplicação dando o nome de "videoondemand" e dentro deste, um outro diretorio chamado "streams" e dentro desta, um diretorio chamando "_definst_" onde os videos deverão ser salvos.
Nossa estrutura esta pronta para receber os videos que serão fornecidos para stream com o Flash Media Server, um ultimo detalhe é criar um arquivo chamado "main.asc" e salvar em "videoondemanda", pode ser vazio mesmo, ele sera responsavel pelo Flash Media Server reconhecer o aplicativo. Vamos testar a aplicação usando o console do Flash Media Server,("C:\Arquivos de programas\Adobe\Flash Media Server 3.5\webroot\swfs\fms_adminConsole.swf"), na aba View Applications, selecione o servidor que no meu caso, será local, na combobox "new instance..." selecione "videoOnDemand", caso tudo esteja correto, o console começara a monitora a aplicação. Deve aparecer algo como na imagem abaixo:

Flash Media Server Console

Flash Media Server Console


Stream com Flash e Flash Media Server
Agora só precisamos criar nosso cliente que rodará os videos, temos varias maneiras de implementar isso, vou começar usando o Adobe Flash CS4 Professional.

  • Vá em "Files->New..." escolha Flash File(ActionScript 3.0).
  • No painel da library, clique em na opção "new Video". Dê o nome de instancia de "vd". Em type deixe selecionando "Video (ActionScript-controlled).
    Adobe Flash CS4

    Adobe Flash CS4

  • Crie uma camada para escrever nosso ActionScript

No código inicial, instanciamos a classe NetConnection para fazer a conexão com o Flash Media Server:

PLAIN TEXT
ACTIONSCRIPT3:
  1. var rtmp:String = "rtmp://localhost/videoOnDemand";//your domain Flash Media Server//
  3.  
  4. function doConnect():void
  5. {
  6.     nc.connect(rtmp);
  7.     //nc.objectEncoding=ObjectEncoding.AMF0; // only for Flash Media Server 2
  8.     nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
  9. }
  10.  
  11. function handlerNetStatus(evt:NetStatusEvent):void
  12. {
  13.     var info:Object=evt.info;
  14.     trace(info.code);
  15. }
  16.  
  17. doConnect();

Ao fazer isso, vamos testar apertando ctrl+enter, caso tudo corra bem, devemos ver a seguinte mensagem no output:

NetConnection.Connect.Success

Agora é só implementar uma função que instanciará a classe NetStream, responsável pelo stream do video, logo em seguida adicionando ao movieclip que rodara o video.

PLAIN TEXT
ACTIONSCRIPT3:
  1. function doStream():void
  2. {
  3.     var ns:NetStream=new NetStream(nc);
  4.     vd.attachNetStream(ns);
  5.     ns.play("sneeze");
  6.     ns.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStreamStatus);
  7.     ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR,onMetaData);
  8. }
  9.  
  10. function handlerNetStreamStatus(evt:NetStatusEvent):void
  11. {
  12.     var info:Object=evt.info;
  13.     trace(info.code);
  14. }

Deveremos ter o seguinte resultado:

Stream com Flash e Flash Media Server

Stream com Flash e Flash Media Server


DOWNLOAD SOURCE

Usando o componente FLVPlayback

  • Vá em "Files->New..." escolha Flash File(ActionScript 3.0).
  • Em sequida vá em "Window->Components" ou Ctrl+F7, arraste o componente FLVPlayback para o stage, de o nome de instancia de myFLVPlayback

Agora temos que "dizer" ao componente que estaremos usando um conteudo via stream, basta setar a propriedade isLive para true:

PLAIN TEXT
ACTIONSCRIPT3:
  1. import fl.video.*;
  2.  
  3. flvPlayer.isLive=true;
  4. flvPlayer.source="rtmp://localhost/videoondemand/sneeze";
  5. flvPlayer.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
  6. flvPlayer.play();

Stream com Flex e Flash Media Server
Veremos alguns exemplos implementando Adobe Flex, o primeiro exemplo será usando a classe Video, vamos instancia-la e adicionar a um componente canvas simples.
O básico é bem parecido de como é feito no Adobe Flash.
Usando a classe Video

PLAIN TEXT
ACTIONSCRIPT3:
  1. private var url_rtmp:String = "rtmp://localhost/videoOnDemand";
  2. private var nc:NetConnection = new NetConnection();
  3. private var ns:NetStream;
  4. private var localVideo:Video = new Video(320,240);
  5. private var videoHolder:UIComponent;

Adicionamos a função init que será carregada no createComplete da aplicação:

PLAIN TEXT
ACTIONSCRIPT3:
  1. public function init():void
  2. {
  3.     nc.connect(url_rtmp);
  4.     call();
  5.     //nc.objectEncoding = ObjectEncoding.AMF0; // for Adobe Flash Media Server 2.0
  6.     nc.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
  7.     btnView.addEventListener(MouseEvent.CLICK,play);
  8. }

Teremos uma função para verificarmos se a conexão com o Flash Media Server foi bem sucedida.

PLAIN TEXT
ACTIONSCRIPT3:
  1. private function netStatusHandler(e:NetStatusEvent):void
  2. {
  3.     var info:Object = e.info;
  4.     trace(info.code);
  5.     switch(info.code)
  6.     {
  7.         case "NetConnection.Connect.Success":
  8.         btnView.enabled = true;
  9.         btnView.label = "Play";
  10.         break;
  11.         case "NetConnection.Connect.Closed":
  12.         trace();
  13.     break;
  14.     }
  15. }

A função callCamera será responsavel por "construir" o video(localVideo) para adiciona-lo no holder(instancia de UIComponent) e somente depois adicionando no canvas(cv).

PLAIN TEXT
ACTIONSCRIPT3:
  1. private function call():void
  2. {
  3.     var holder:UIComponent = new UIComponent();
  4.     localVideo = new Video(320,240);
  5.     holder.addChild(localVideo);
  6.     cv.addChild(holder);
  7. }

Agora implementando o restante do código.

PLAIN TEXT
ACTIONSCRIPT3:
  1. private function play(evt:MouseEvent):void
  2. {
  3.     ns = new NetStream(nc);  
  4.         ns.play("sneeze");
  5.     localVideo.attachNetStream(ns);
  6.     ns.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandlerNC);
  7. }
  8.            
  9. private function netStatusHandlerNC(e:NetStatusEvent):void
  10. {
  11.     var info:Object = e.info;
  12.     trace(info.code);
  13. }

O código mxml esta no fonte:
DOWNLOAD SOURCE

Usando o componente VideoDisplay
A implementação desse componente criado por Giacomo (Peldi) Guilizzoni sendo depois incluido no Framework do Flex deve ser a mais dificil de todas :P , nem vou me dar o trabalho de explicar.

PLAIN TEXT
ACTIONSCRIPT3:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:VideoDisplay id="vd" source="rtmp://localhost/videoondemand/streams/sneeze.flv" x="10" y="10"/>
  4. </mx:Application>

DOWNLOAD SOURCE

Usando o componente FLVPlayback no Flex
O componente FLVPlaybak também pode ser usando no Adobe Flex, para isso basta seguir os seguintes passos:

  • Vá para "diretorio de instalação do Adobe Flash\Common\Configuration\Components\Video\".
  • Copie o arquivo FLVPlaybackAS3.swc para seu projeto no Flex Builder
  • Escolha o skin(diretorio de instalação do Adobe Flash\Common\Configuration\FLVPlayback Skins\ActionScript 3.0) de sua preferencia e salve no seu projeto.

Agora basta instanciar a classe FLVPlayback e adiciona-la no palco:

PLAIN TEXT
ACTIONSCRIPT3:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createVideo();">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import mx.core.UIComponent;
  6.             import fl.video.FLVPlayback;
  7.             import fl.video.VideoScaleMode;
  8.            
  9.             private function createVideo():void
  10.             {
  11.                 var vid:FLVPlayback = new FLVPlayback();
  12.                 var ui:UIComponent = new UIComponent();
  13.                 //this.addChild(ui);
  14.                 ui.addChild(vid);
  15.                 flvbp.addChild(ui)
  16.                 vid.width = 320;               
  17.                 vid.height = 240;
  18.                 vid.source = "rtmp://localhost/videoondemand/sneeze";
  19.                 vid.skinBackgroundColor = 0x666666;
  20.                 vid.skin = "skins/SkinUnderPlayStopSeekFullVol.swf"; // salvar o skin no projeto
  21.                 vid.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
  22.                 vid.skinAutoHide = false;
  23.             }
  24.         ]]>
  25.     </mx:Script>
  26.     <mx:Canvas id="flvbp" x="0" y="0" />
  27. </mx:Application>

Stream com Flash Lite e Flash Media Server
O Adobe Flash Lite 3.0 introduziu entre algumas novidades, a possibilidade de tocar video via stream diretamente com o Adobe Flash Media Server. Juntando isso com o crescimento do uso do 3G e dos modelos de celulares com suporte ao Flash Lite(no trabalho todo mundo tem um Nokia N95, menos eu :P ) , temos uma gama de possibilidades inédita no Brasil.
Para programar conteúdo para o Flash Lite, usaremos o Adobe Flash CS4 e programação ActionScript 2.0 (Ainda não é possivel usar ActionScript 3.0 ou mesmo o Adobe Flex).

  • Vá em "Files->New..." escolha Flash File(Mobile).
  • Em seguida, será aberto o programa Adobe Device Central CS4, escolha algum modelo de celular com suporte ao Flash Lite 3.0, caso não tenha nenhum, peça para o Device Central atualizar sua biblioteca.
  • Faremos a mesma coisa que fizemos para tocar stream com o Flash CS4, No painel da library, clique em na opção "new Video". Dê o nome de instancia de "vd". Em type deixe selecionando "Video (ActionScript-controlled).
  • Crie uma camada para escrever nosso ActionScript.

No código inicial, instanciamos a classe NetConnection para fazer a conexão com o Flash Media Server, em caso de sucesso, iniciaremos o stream:

PLAIN TEXT
ACTIONSCRIPT:
  1. //#include "BandwidthAS2.as"
  2.  
  3. var rtmp:String = "rtmp://localhost/webcam";
  4. client_nc = new NetConnection();
  5. client_nc.connect(rtmp);
  6.  
  7. fscommand2("FullScreen", true);
  8.  
  9. client_nc.onStatus = function(info) {
  10.     trace("Level: "+info.level+" Code: "+info.code);
  11.     switch (info.code) {
  12.         case "NetConnection.Connect.Success" :
  13.             doPlay();
  14.             break;
  15.         case "NetConnection.Connect.Closed" :
  16.             break;
  17.     }
  18. };
  19.  
  20. function doPlay()
  21. {
  22.     in_ns = new NetStream(client_nc);
  23.     vd.attachVideo(in_ns);
  24.     in_ns.play("sneeze");
  25.     in_ns.connect();
  26. }

Um detalhe que devemos atentar, na configuração de publicação, devemos colocar a opção "Local Playback" para "Access network only", senão o video não rodará no celular.

Configuração de publicação para p Flash Lite 3.1

Configuração de publicação para o Flash Lite 3.1


Feito isso, deveremos ter o seguinte resultado:
Adobe Device Central

Adobe Device Central


Agora é so salvar o swf no celular e testar, você também pode salvar como Flash Lite 3.1 e usar o Adobe Mobile Package para criar um instalador .sis(para simbiam) ou .cab(para windows mobile) para seu celular.

DOWNLOAD SOURCE

Bônus 1
Stream com Adobe Dreamweaver CS4 e Flash Media Server
Ok ok, não é bem isso mas é uma alternativa para quem não é familiarizado com o Adobe Flash ou Adobe Flex. Vamos la:

  • Crie uma página html em branco.
  • Vá em "Insert->Media->FLV...".
  • Em Video type, selecione "Streaming Video.
  • Em server URI coloque rtmp://localhost/videoondemand/.
  • Em stream name, coloque o nome do video, no nosso caso será "sneeze".
  • Configure o restante das opções a seu gosto, salve a pagina e abra no seu navegador( o Dreamweaver copiará alguns arquivos para junto da sua página)

Bônus 2
Algumas ferramentas uteis para desenvolvimento com o Adobe Flash Media Server, inclusive uma atualização do FLVPlayback com suporte a DVR e Dynamic Streaming.
http://www.adobe.com/products/flashmediaserver/tool_downloads/

Bônus 3
O arquivo main.asc usado no exemplo possui uma implementação para detectar a velocidade de banda usada, com isso podemos criar uma funcionalidade para determinar um video que melhor se adapte a conexão do usuário. Esse arquivo consta nos exemplos que ficam localizado no diretorio de instalação do Adobe Flash Media Server.

DOWNLOAD SOURCE

Flash Media Server Developer Center
http://www.adobe.com/devnet/flashmediaserver/

Translations:
English Version

categories ActionScript 3.0, Flash, Flash Media Server, Flex | Leonardo França | datetime August 21, 2009 23:53

22 Comments

  • By Rodrigo Guimarães, August 22, 2009 @ 10:33

    Realmente excelente o texto.
    Já programo em AS3 a um tempinho, mas to iniciando nessa parte de servidores de mídia… pelo seu texto já consegui tirar algumas dúvidas :)
    Abraço,
    Rodrigo

  • By Carlos, August 25, 2009 @ 14:45

    Leonardo, queria agradecer a atençao e a disposiçao por colocar dicas e textos tao uteis para newbbies como eu… obrigado!!

  • By Henrique, September 1, 2009 @ 18:26

    Fantástico, caiu como uma luva. AS3 estou engatinhando, e gostei muito das suas dicas

    valew mesmo

  • By Everton, September 2, 2009 @ 09:45

    Nossa…..sem palavras! Ótimo texto! Parabéns!
    Programar em AS é um pouco complicado pra quem está começando a conhecer o Flash…..com certeza você vai ajudar muitos!

    Parabéns e muito obrigado pelo texto!

  • By anderson, September 7, 2009 @ 17:50

    fantastico, o texto é excelente

  • By josue, September 12, 2009 @ 00:21

    Esssas dicas servem para streaming de audio tambem ou somente para video? eu to com um probleminha em um player de audio.
    grato

  • By Leonardo França, September 14, 2009 @ 12:47

    servem perfeitamente para stream de audio ;)

  • By Elton, September 25, 2009 @ 23:46

    Vlw leonardo.

    Excelente post, estou começando agora a me aventurar no universo flash.

    É minha primeira vez no blog, gostei muito. parabéns!

  • By Filipe, October 3, 2009 @ 15:58

    bom tutorial, mas há algumas coisas que não percebi…

    porque voce mudou para “C:\apache\htdocs\applications\”?

    depois nao percebo onde criamos o diretorio:

    “Feito isso, vamos criar o diretorio de nossa aplicação dando o nome de “videoondemand” e dentro deste, um outro diretorio chamado “streams” e dentro desta, um diretorio chamando “_definst_” onde os videos deverão ser salvos.”

  • By Supertech Componentes, October 7, 2009 @ 13:55

    Vamos aos testes , estava procurando um tuto igual a este. Vale cada visita este site. Thank”s

  • By Leonardo França, October 8, 2009 @ 18:04

    mudei para melhor gerenciar as aplicações localmente.
    deve ficar assim:
    C:\apache\htdocs\applications\videoondemand\streams\_definst_\seuvideo.flv

  • By Ronaldo, October 14, 2009 @ 14:21

    tentei fazer como no tuto… ele captura da webcam correto? não consegui… tenho que colocar videos dentro do _definst_?

    no aguardo,
    abraço

  • By Componentes Eletrônicos, October 19, 2009 @ 13:41

    Estou testando o tutorial acima, também quero montar um server de vídeo. Ótimo blog.

  • By Cynthia, November 18, 2009 @ 00:09

    Massa Leo, mto bom seu tutorial.
    Eu queria usar o FMS com o Apache do Xampp, será que se eu setar o caminho como vc mostrou e deixar só a porta 1935 ao invés das 2 (1935,80) funciona?

  • By jose antonio, November 23, 2009 @ 16:08

    Olá.
    Gostaria de uma ajuda. Estou começando no streaming. Tenho servidor Flash, estou estudando os tutoriais da Adobe, mas preciso saber o seguinte: como gero o endereço externo para um player receber meu sinal? Exemplo: rtmp://qualoendereço/oquemais/senha?
    Agradeço desde já.

    José Antonio

  • By Leonardo França, December 8, 2009 @ 11:55

    funciona sim, na configuração do Flash Media Server você pode configurar uma porta so

  • By Leonardo França, December 8, 2009 @ 11:56

    nao sei se entendi bem oq vc quer, mas vc pode usar o ip externo da maquina onde esta instalado o Flash Media Server ou configurar um DNS pra ela

  • By Telefonia Empresarial, December 22, 2009 @ 13:21

    Excente texto boas dicas.

    Obrigada

  • By rudinei Freitas, December 25, 2009 @ 19:45

    O video roda apenas no servidor. Já fiz as alterações no apache, e no FMS. Mas, não consigo acesso pela web, na transmissão ao vivo. Pelo exemplo, que você colocou, como deve ficar o endereço, para acesso pela internet ?

  • By Leonardo França, December 29, 2009 @ 10:16

    se vai acessar pela web utilize o ip da maquina

  • By rudinei Freitas, January 2, 2010 @ 21:22

    recebo a informação, de vídeo não carregado.
    Você pode me ajudar? Estou usando o flash CS4, para gerar o arquivo .SWF.
    No servidor está tudo ok! Simplesmente, quando acesso pelo endereço da web, não há imagem, informando apenas, “vídeo não carregado”. Portas no modem liberadas, apache configurado, FMS indica conecção. Mas, nada de vídeo, para outras máquinas.

  • By Leonardo França, January 12, 2010 @ 12:12

    me adiciona no msn pra poder ti ajudar melhor leofranca5@hotmail.com

Other Links to this Post

RSS feed for comments on this post. TrackBack URI

Leave a comment

WordPress Themes


Video & Audio Comments are proudly powered by Riffly