Stream de Video com Flash Communication Server/Flash Media Server

[fernandosena]

Introdução

Pré-Requisitos

Macromedia Flash 8, Flash Communication Server ou Flash Media Server.

Objetivo

Criar streaming de video usando o servidor Flash Communication Server ou Flash Media Server(Ainda não foi testado no Red5).

Conteúdo

Vamos salvar nossos videos em flv no servidor do FlashCom/Flash Media Server, para isso você terá que salvar os videos no diretorio streams ficaria da sua aplicação(caso não esteja criado, crie-o), no exemplo foi utilizado o nome de “video_stream”.

No filme do Flash usaremos um componente “Tree”, um “TextArea” so para acompanhar o status do stream. criados dinamicamente (os componentes devem estar na biblioteca do filme).
Usaremos um arquivo em xml para guardar o nome e o caminho das musicas, no entanto, você pode usar SharedObject Remote, Flash Remontig, bando de dados etc.

Primeiramente para exibir os videos precisaremos ou de um componente ou de um “embed Video”, vamos utilizar a segunda opção. Para criar um novo movie clip de video aperte F11 para abrir a biblioteca, depois insira um novo item na biblioteca (New Video) como na imagem abaixo, colocamos no stage e damos um nome de estância de “clip”:



Nosso arquivo playlist.xml está assim:

<node>
<node label=”Playlist”>
<node label=”Lindomar – O Sub-zero Brasileiro” isBranch=”true” link=”lindomar” />
<node label=”Romantismo Masculino” isBranch=”true” link=”Romantismo_Masculino” />
<node label=”Para sua Empresa” isBranch=”true” link=”TerryTate_Port_384Kbps” />
</node>
</node>

Bem simples, no atributo link deverá ficar o nome do arquivo, não é necessário colocar a extensão flv.
Faremos o Flash carregar o xml e alimentar o componente “Tree”, quando a musica for selecionada tocara automaticamente, colocaremos mais dois botões no palco, um para “stop” e outro apenas para pausar a musica. Tudo via Action Script, só precisaremos que os componentes que utilizaremos estejam na biblioteca do filme.
Criando os componentes dinamicamente:

var tree = _root.createClassObject(mx.controls.Tree, “tree”, 1, {_x:7, _y:18});
tree.setSize(173, 342);
var status = _root.createClassObject(mx.controls.TextArea, “status”, 2, {_x:7, _y:381});
status.setSize(524, 110);

Agora verificamos como anda a conexão com servidor FlashCom/Flash Media Server:

var client_nc = new NetConnection();
client_nc.onStatus = function(info) {
trace(“Level: “+info.level+” Code: “+info.code);
status.text += “Level: “+info.level+” Code: “+info.code+”\n”;
};

Vamos carregar o arquivo xml para o Flash e alimentar o componente “Tree”:

var myTreeDP:XML = new XML();
myTreeDP.ignoreWhite = true;
myTreeDP.load(“playlist.xml”);
myTreeDP.onLoad = function() {
tree.dataProvider = this.firstChild;
};

Criando um objeto ouvinte para atuar quando o componente for clicado selecionando a musica e enviando-a para a função doPlay.

var treeListener:Object = new Object();
treeListener.change = function(evt:Object) {
var sel:Object = evt.target.selectedItem.attributes;
doPlay(sel.link);
};
tree.addEventListener(“change”, treeListener);

A função doPlay será responsável pela execução do video escolhida via stream. A variavel “url” sera o endereço do servidor FlashCom/Flash Media Server.

var url:String = “rtmp:/video_stream”;//usado localmente
function doPlay(playFileName) {
//trace(playFileName);
_root.client_nc.connect(url);
http://_root.client_nc.connect(playFileName);
in_ns = new NetStream(_root.client_nc);
_root.clip.attachVideo(_root.in_ns);
_root.in_ns.onStatus = function(info) {
status.text += info.level+”\n”+info.code+”\n”;
status.vPosition = status.maxVPosition;
};
_root.in_ns.play(playFileName);
_root.in_ns.connect();
}

Segue o código completo:

var tree = _root.createClassObject(mx.controls.Tree, “tree”, 1, {_x:7, _y:18});
tree.setSize(173, 342);
var status = _root.createClassObject(mx.controls.TextArea, “status”, 2, {_x:7, _y:381});
status.setSize(524, 110);
var client_nc = new NetConnection();
client_nc.onStatus = function(info) {
trace(“Level: “+info.level+” Code: “+info.code);
status.text += “Level: “+info.level+” Code: “+info.code+”\n”;
};
var myTreeDP:XML = new XML();
myTreeDP.ignoreWhite = true;
myTreeDP.load(“playlist.xml”);
myTreeDP.onLoad = function() {
tree.dataProvider = this.firstChild;
};
var treeListener:Object = new Object();
treeListener.change = function(evt:Object) {
var sel:Object = evt.target.selectedItem.attributes;
doPlay(sel.link);
};
tree.addEventListener(“change”, treeListener);
function doPlay(playFileName) {
//trace(playFileName);
_root.client_nc.connect(url);
http://_root.client_nc.connect(playFileName);
in_ns = new NetStream(_root.client_nc);
_root.clip.attachVideo(_root.in_ns);
_root.in_ns.onStatus = function(info) {
status.text += info.level+”\n”+info.code+”\n”;
status.vPosition = status.maxVPosition;
};
_root.in_ns.play(playFileName);
_root.in_ns.connect();
}

Dê ctrl+enter para testar a aplicação
Veja a aplicaçao em funcionamento