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.

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.

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:

• Adobe Flash Media Encoding Server – Servidor para converter a maiorias dos formatos de videos disponiveis no mercado para o formato Flash Video(FLV).
• Adobe Flash Media Rights Management Server – Para proteger conteúdos multimédia usados com o Adobe Media Player e Adobe AIR.

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:

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

• 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:

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.

Feito isso, deveremos ter o seguinte resultado:

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