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:
[ACTIONSCRIPT3]
var rtmp:String = “rtmp://localhost/videoOnDemand”;//your domain Flash Media Server//
var nc:NetConnection = new NetConnection();

function doConnect():void
{
nc.connect(rtmp);
//nc.objectEncoding=ObjectEncoding.AMF0; // only for Flash Media Server 2
nc.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStatus);
}

function handlerNetStatus(evt:NetStatusEvent):void
{
var info:Object=evt.info;
trace(info.code);
}

doConnect();
[/ACTIONSCRIPT3]
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.
[ACTIONSCRIPT3]
function doStream():void
{
var ns:NetStream=new NetStream(nc);
vd.attachNetStream(ns);
ns.play(“sneeze”);
ns.addEventListener(NetStatusEvent.NET_STATUS, handlerNetStreamStatus);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR,onMetaData);
}

function handlerNetStreamStatus(evt:NetStatusEvent):void
{
var info:Object=evt.info;
trace(info.code);
}
[/ACTIONSCRIPT3]
Deveremos ter o seguinte resultado:

Stream com Flash e Flash Media Server

Stream com Flash e Flash Media Server


Mais códigos e PDFs clique aqui.

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:
[ACTIONSCRIPT3]
import fl.video.*;

flvPlayer.isLive=true;
flvPlayer.source=”rtmp://localhost/videoondemand/sneeze”;
flvPlayer.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
flvPlayer.play();
[/ACTIONSCRIPT3]

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
[ACTIONSCRIPT3]
private var url_rtmp:String = “rtmp://localhost/videoOnDemand”;
private var nc:NetConnection = new NetConnection();
private var ns:NetStream;
private var localVideo:Video = new Video(320,240);
private var videoHolder:UIComponent;
[/ACTIONSCRIPT3]
Adicionamos a função init que será carregada no createComplete da aplicação:
[ACTIONSCRIPT3]
public function init():void
{
nc.connect(url_rtmp);
call();
//nc.objectEncoding = ObjectEncoding.AMF0; // for Adobe Flash Media Server 2.0
nc.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
btnView.addEventListener(MouseEvent.CLICK,play);
}
[/ACTIONSCRIPT3]
Teremos uma função para verificarmos se a conexão com o Flash Media Server foi bem sucedida.
[ACTIONSCRIPT3]
private function netStatusHandler(e:NetStatusEvent):void
{
var info:Object = e.info;
trace(info.code);
switch(info.code)
{
case “NetConnection.Connect.Success”:
btnView.enabled = true;
btnView.label = “Play”;
break;
case “NetConnection.Connect.Closed”:
trace();
break;
}
}
[/ACTIONSCRIPT3]
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).
[ACTIONSCRIPT3]
private function call():void
{
var holder:UIComponent = new UIComponent();
localVideo = new Video(320,240);
holder.addChild(localVideo);
cv.addChild(holder);
}
[/ACTIONSCRIPT3]
Agora implementando o restante do código.
[ACTIONSCRIPT3]
private function play(evt:MouseEvent):void
{
ns = new NetStream(nc);
ns.play(“sneeze”);
localVideo.attachNetStream(ns);
ns.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandlerNC);
}

private function netStatusHandlerNC(e:NetStatusEvent):void
{
var info:Object = e.info;
trace(info.code);
}
[/ACTIONSCRIPT3]

Mais códigos e PDFs clique aqui.

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.
[ACTIONSCRIPT3]




[/ACTIONSCRIPT3]
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:
[ACTIONSCRIPT3]






[/ACTIONSCRIPT3]

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:
[ACTIONSCRIPT]
//#include “BandwidthAS2.as”

var rtmp:String = “rtmp://localhost/webcam”;
client_nc = new NetConnection();
client_nc.connect(rtmp);

fscommand2(“FullScreen”, true);

client_nc.onStatus = function(info) {
trace(“Level: “+info.level+” Code: “+info.code);
switch (info.code) {
case “NetConnection.Connect.Success” :
doPlay();
break;
case “NetConnection.Connect.Closed” :
break;
}
};

function doPlay()
{
in_ns = new NetStream(client_nc);
vd.attachVideo(in_ns);
in_ns.play(“sneeze”);
in_ns.connect();
}
[/ACTIONSCRIPT]
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 symbiam) 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/

Se você esta procurando algum livro sobre Flex e Flash Media Server, recomendo Flex 3 + Flash Media Server 3.5 do meu amigo Carlos Eduardo 😀

Translations:
English Version

29 thoughts on “Stream com Flex ou Flash ou Flash Lite e Flash Media Server

  1. Rodrigo Guimarães

    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

  2. Carlos

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

  3. Everton

    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!

  4. josue

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

  5. Elton

    Vlw leonardo.

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

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

  6. Filipe

    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.”

  7. Ronaldo

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

    no aguardo,
    abraço

  8. Cynthia

    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?

  9. jose antonio

    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

  10. rudinei Freitas

    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 ?

  11. rudinei Freitas

    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.

  12. Andre Paz Leal

    Leo, how are u, I´m into LMS courses, and use a lot until today the combination of flv´s for characters and loadSound for make them talk. Until today because after this week I´ve update my flash to 10.1 and boom, all my courses now are crashing in any browser that have the update. I already noted that the problem is the flv´s. Could you help me out with that…?

  13. Leo Missel

    Leonardo, excelente post! Já virei fã do teu blog 🙂
    Estou implementando conforme minhas necessidades, porém, estou tendo problemas com segurança no flash player. Mesmo com tudo rodando na mesma máquina, ao executar pelo HTML ele entende como crossdomain, já tentei com allowDomain, allowInsecureDomain, crossdomain.xml, mas nada funciona, tu tens alguma dica para me dar?

    Abração e valeu!

  14. Leo Missel

    Cara, consegui… configurei as regas de nat no iptables e hospedei no servidor externo com security.allowDomain(‘*’); e security.allowInsecureDomain(‘*’);
    Te peço permissão para desenvolver um post sobre o assunto baseando-me no teu, lógico, com os devidos créditos, pode ser?

  15. NEO

    olá muito tempo tentando montar um server de tv mas to com alguns problemas, qualidade e transmisao, eu uso FMS com justin tv, mas como meu objetivo exibir ANIMES no seu audio original a legendas tem aparecido distorcidas qui eu faço??

  16. Leo Souza

    E aí Leonardo, parabéns, excelentes informações no teu Blog cara!
    Olha só, estou usando esse post como base para uns testes com stream. Estou usando o exemplo com o Flash, como eu faço para executar uma fila de flv’s? Devo fazer rodar um por um “na unha” ou existe algum arquivo onde possamos especificar a lista e ele faz o trabalho sujo? hehe

    Valeu, abraço!

Leave a Reply