MXStudio » leonardofranca

Adobe Apollo – A revolução

leonardofranca — Sun, 10 Dec 2006 00:00:00 +0000

Adobe Apollo – A revolução

A cada tempo a web vem evoluindo de maneira que os serviços que utilizamos tendem a se tornarem cada vez mais práticos, dando total liberdade para que o usuário possa tornar o aplicativo com sua cara.
A Adobe está preparando uma verdadeira revolução nessa área, imagine que está perto o dia em que você não precisará abrir um navegador para acessar um site, aliás o próprio conceito de site precisará ser revisto, serviços funcionarão tanto offline quanto online, podendo carregar sites ou serviços, misturando o conceito de aplicação desktop com aplicação web.
Apollo é o codinome dessa plataforma que unirá o que temos hoje como aplicações separadas tanto para desktop quanto para web, o objetivo principal é desenvolver aplicativos RIA para desktop.
Os aplicativos podem ser desenvolvidos da seguinte maneira:

Usando Flash/Flex/ActionScript
HTML/Java Script/CSS/Ajax
Combinação dessas tecnologias
E você pode tambem usar PDF em seus aplicativos.

O Apollo possui um player como ocorre com o Flash Player, para rodar uma aplicação feita com Apollo, você precisa ter instalado na sua máquina esse runtime, como por exemplo ocorre com o Adobe Reader ou mesmo o PHP-GTK onde você precisa ter a biblioteca GTK para rodar uma aplicação feita com PHP-GTK ou mesmo com algum programa feito em java, você precisa ter a Java Virtual Machine. Mas por que a Adobe escolheu esse tipo de distribuição? Simples, para evitar que as aplicações feitas com Apollo ganhem em peso, sendo mais facil sua distribuição tanto para Windows, Mac e Linux.

O runtime do Apollo pode ser distribuído de duas maneiras:

Junto com a aplicação feita com o Apollo.
Download pelo site da adobe, pela API do Apollo você poderá verificar se o usuário já possui o runtime, caso contrário, a aplicação faz o download no site da Adobe. É como já fazemos com o Flash Player.

Algumas funcionalidades da API do Apollo incluem:

Aplicativos que rodarão tanto offline quanto online.
Aplicativos que podem rodar como background.
Suporte a HTTP, XML-RCP/SOAP/Web Services.
Suporte a protocolo Binário e XML Sockets.
FILE I/O.
Local storage/Settings API.
Custom Chrome(Shape,alpha), estilos das janelas.

As aplicações feitas com Apollo permitem total integração com o ambiente Desktop como:

Criação de instaladores
Atalhos
Drag and Drop
Clipboard
Executar aplicativos nativos dos sistemas operacionais.
Cross Application communication
Notificações

Apollo também pode suportar algumas linguagens de script:

ActionScript 3 – Flash/Flex
Java Script – HTML/CSS/AJAX
Acesso completo ao Flash Player, HTML DOMs e APIs.

Quanto aos componentes de desenvolvimento:

O Apollo Framework é desenvolvido baseado no Flex Framework.
Os componentes do Apollo são os mesmos do Flex, com a diferença que eles possuem acesso a API do Apollo.
Você pode criar HTML/Java Script baseado nos componentes do Apollo.

Será disponibilizado uma versão do Flex Builder para o desenvolvimento das aplicações, tendo opção de gerar o pacote de instalação.
O engine HTML do Apollo é o Webkit, o mesmo usado pelo Safari, navegador usado no Mac e para celulares, sendo leve e de código fonte aberto.

Apollo não é uma continuação do Macromedia Central, seu código fonte é totalmente novo, mas o time de desenvolvedores do Apollo aprendeu com as lições do Macromedia Central.
A Adobe aposta tanto no Apollo que irá disponibilizar 100 milhoes de dolares nos proximos 5 anos para icentivar o desenvonvilmento com o Apollo. O beta deve ser disponibilizado no labs da Adobe a partir de janeiro.

Autor: Leonardo França – Colunista R.I.A do Portal MXSTUDIO
Manager AUGDF – www.augdf.com.br
http://www.leonardofranca.com.br

Qualquer dúvida envie um email para leo@osfederais.com ou acesse o nosso fórum e visitem meu BLOG

Stream de Video com Flash Communication Server/Flash Media Server

leonardofranca — Tue, 04 Jul 2006 00:00:00 +0000

Stream de Video com Flash Communication Server/Flash Media Server.

Introdução

Neste artigo veremos como implementar um sistema para streaming de video usando o Flash Communication Server/Flash Media Server.

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:

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:

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);
//_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:

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

Considerações Finais

Desafio para você implementarem um player, com botões de play, stop, pause e se quiser uma barrinha de progresso.

Para saber mais:

Meu Blog FCS/FMS
http://www.leonardofranca.com.br/?cat=11

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

FlashComGuru
http://www.flashcomguru.com/

FlashCom.com.br
http://www.flashcom.com.br/

Flash Media Server Fun
http://www.fczone.com/

Autor: Leonardo França – Colunista R.I.A do Portal MXSTUDIO

Qualquer dúvida envie um email para leo@osfederais.com ou acesse o nosso fórum e visitem meu BLOG

Stream de Áudio com Flash Communication Server/Flash Media Server.

leonardofranca — Sat, 18 Mar 2006 00:00:00 +0000

Stream de Áudio com Flash Communication Server/Flash Media Server.

Introdução

Que tal criar uma radio online usando Flash? sim é possível e simples, com o Flash Communication Server/Flash Media Server. Neste artigo veremos como implementar um sistema para streaming de áudio usando o Flash Communication Server/Flash Media Server.

Pré-Requisitos

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

Objetivo

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

Conceitos

Alguns motivos para usar o FlashCom/Flash Media Server para streaming de musicas:

Controle de banda: Os desenvolvedores tem ferramentas para controlar e desenvolver de acordo com o limite de banda e a velocidade de conexão do usuario.
Acesso a ID3 text-based data: O Flash Communication Server da ao desenvolverdor as ferramentas para acessar, reescrever e publicar dados de um stream baseados nas tags ID3.
Maior controle sobre streaming de dados: Desenvolvedores podem deixar ao ususario a opção de stop, pause, localizar e mover para áreas de interesse do streaming.
Controle de Script sobre dados de streaming: Os desenvolvedores podem criar um play contínuo baseado em tempo (como em uma estação de rádio), sincronizar movie clips e outros dados para tocar, ou ativar eventos em tempo de streaming de MP3s.
Streaming para usuário múltiplos: O Flash Communication Server/Flash Media Server pode gravar stream ou em real-time dos usuarios conectados. Os usuários podem escolher se querem receber todos os dados compartilhados ou customizado individualmente em suas seleções.
Criação de diretórios virtuais: Os desenvolvedores podem criar diretórios virtuais com as Tag e traçá-los através da configuração do vHost. Isto permite criar rotas traçadas às arquivos de música fora do servidor. Os desenvolvedores podem também dar aos aplicativos acesso às arquivos MP3 dentro de um diretório virtual específico.
Níveis de acesso: O framework do Flash Communication Server/Flash Media Server fornece também ao desenvolvedor as ferramentas para fixar as posições dos arquivos MP3 atribuindo aos usuários níveis da acesso. Os desenvolvedores podem bloquear ou reduzir o acesso para usuários.
Delete em tempo de execução: O desenvolvedor tem a possibilidade de administrar os arquivos deletando em tempo de execução

Conteúdo

Há duas opções para você salvar as musicas, a primeira seria configurar o arquivo “vhost.xml” por exemplo, se seu diretório de musicas for “C:\musicas” na tag streams ficaria o seguinte:

music;C:\musicas

Outra opção é a que usaremos aqui é fazer uploads no diretório padrão do Flashcom “stream/musicas”

Nosso arquivo playlist.xml está assim:

Bem simples, no atributo link deverá ficar o nome do arquivo, não é necessário colocar a extensão mp3.
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 bot_pause = _root.createClassObject(mx.controls.Button, “bot_pause”, 4, {_x:380, _y:18, label:”Pause”});

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

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.

A função doPlay será responsável pela execução da musica escolhida via stream .

function doPlay(playFileName) {
_root.client_nc.connect(“rtmp:/som_stream”);//considerando localhost
in_ns = new NetStream(_root.client_nc);
_root.in_ns.play(“mp3:”+playFileName);
_root.in_ns.onStatus = function(info) {
trace(info.level);
trace(info.code);
status.text += info.level+”\n”+info.code;
status.vPosition = status.maxVPosition;
};
}

No método “play” colocaremos o atributo fixo (“mp3:”) para assegurar que o servidor toque somente a musica no formato mp3.Agora colocaremos os eventos no botões para pausar, continuar e dar um stop na musica

bot_stop.onRelease = function() {
_root.in_ns.play(false);
};
bot_pause.onRelease = function() {
if (bot_pause.label == “Pause”) {
bot_pause.label = “Play”;
_root.in_ns.pause();
} else if (bot_pause.label == “Play”) {
bot_pause.label = “Pause”;
_root.in_ns.pause();
}
};

Segue o código completo:

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

Considerações Finais

Simples e fácil criar stream de áudio usando o Flash Communication Server/Flash Media Server, agora a imaginação é o limite para possivel aplicações.

Para saber mais:

Meu Blog FCS/FMS
http://www.dotpix.com.br/~leo/?cat=11

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

FlashComGuru
http://www.flashcomguru.com/

FlashCom.com.br
http://www.flashcom.com.br/

Flash Media Server Fun
http://www.fczone.com/

Autor: Leonardo França – Colunista R.I.A do Portal MXSTUDIO

Qualquer dúvida envie um email para leo@dotpix.com.br ou acesse o nosso fórum e visitem meu BLOG

Criando uma playlist com Flash Communication Server/Flash Media Server

leonardofranca — Sat, 04 Mar 2006 00:00:00 +0000

Criando uma playlist com Flash Communication Server/Flash Media Server.

Introdução

Vimos no artigo anterior como gravar stream usando o Flash Communication Server/Flash Media Server, agora vamos implementar uma playlist para esse recurso. Cada vídeo que gravarmos será adicionado a playlist para posterior disponibização.

Pré-Requisitos

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

Objetivo

Criar uma playlist usando o servidor Flash Communication Server ou Flash Media Server(Ainda não foi testado no Red5).

Conceitos

Para isto usaremos o SharedObject Remote para guardar as informações dos vídeos gravados. SharedObjects oferece compartilhamento de informação em tempo real entre multiplos clientes SWF’s podendo ser persistentes na maquina local ou no servidor remoto. O local Shared object seria como “Cookies” e o SharedObject Remote como transferência de dados em tempo-real.

Conteúdo

Abra um documeno novo no Flash, vamos criar dois movies clips do tipo video, para adicionar um objeto video na sua library, abra o painel library (windom Video object to your library, open the Library panel (Window > Library ou Ctrl+L ou F11) a adicione um embedded Video object selecionando New Video nas opções da library.

Primeiro conectanto ao servidor Flashcom/Flash Media Server:

client_nc = new NetConnection();
client_nc.onStatus = function(info) {
trace(“Level: “+info.level+” Code: “+info.code);
};
client_nc.connect(“rtmp:/playlist”);//considerando localhost

Recuperando os dados do Shared Object Remote, e preenchendo o component “List” usando o método onSync, esse método é o responsável pela sincronização de dados com o servidor.

rec_so = SharedObject.getRemote(“videos”, client_nc.uri, true);
rec_so.onSync = function(list) {
_root.Play_list.removeAll();
for (var i in _root.rec_so.data) {
_root.Play_list.addItem(i);
}
};
rec_so.connect(client_nc);

Na primeira linha note que damos o nome de “vídeo” ao objeto criado, o terceiro parâmetro “true” garantirá que os dados permaneçam no servidor, caso fosse passado o paramêtro false, os dados so permaneceriam enquanto o usuário estivesse conectado ao aplicativo.

No palco teremos dois campos de textos, um com o nome de instância de “ListItem” do tipo “input” e outro com o o nome de instância de “Status_msg” do tipo “dynamic”, também terá dois movie clips do tipo vídeo, um para receber a webcam com o nome de instância de “live” e outro para mostrar os vídeos selecionado da list com o nome de instância de “publicado”.

Criamos uma função para gravar o stream:

Detalhe interessante no método “publish” da classe NetStream, que pode ter três argumentos, sua sintaxe é a seguinte:

out_ns.publish(nome_do_flv, jeito de salvar);

o primeiro parâmetro sendo o nome do arquivo, no caso o nome do nosso vídeo, e o segundo parâmetro o jeito de publicação que pode ser entre:

record = salva o arquivo como flv no servidor, se o arquivo já existir será sobrescrito.
append = salva o arquivo como flv no servidor, acrescentando a partir do arquivo salvo anteriormente.
live = transmite ao vivo sem salvar, se o arquivo existir será deletado.

Criando o método para rodar o vídeo da list

Finalizando com a criação dinamicamente dos botões, da list e associando os métodos doRecord e doPlay aos eventos dos botões.

Play_list.addEventListener(“change”, listListener);
var Play_list = _root.createClassObject(mx.controls.List, “Play_list”, 1, {_x:357, _y:214});
Play_list.setSize(148, 177);
var Play_btn = _root.createClassObject(mx.controls.Button, “Play_btn”, 2, {_x:170, _y:216, label:”Play”});
var Record_btn = _root.createClassObject(mx.controls.Button, “Record_btn”, 3, {_x:47, _y:216, label:”Record”});
Record_btn.onRelease = function() {
doRecord();
};
Play_btn.onRelease = function() {
doPlay();
};
var listListener:Object = new Object();
listListener.change = function(evt_obj:Object) {
var playFileName = evt_obj.target.selectedItem.label;
trace(playFileName);
in_ns.pause();
in_ns = new NetStream(_root.client_nc);
publicado.attachVideo(in_ns);
in_ns.play(playFileName);
};

O código completo:

client_nc = new NetConnection();
client_nc.onStatus = function(info) {
trace(“Level: “+info.level+” Code: “+info.code);
};
client_nc.connect(“rtmp://200.219.239.68/osfederais/playlist”);
rec_so = SharedObject.getRemote(“recordings”, client_nc.uri, true);
rec_so.onSync = function(list) {
_root.Play_list.removeAll();
for (var i in _root.rec_so.data) {
_root.Play_list.addItem(i);
}
};
rec_so.connect(client_nc);
function doRecord() {
if (ListItem.text == undefined || ListItem.text == “”) {
Status_msg.text = “Necessario um titulo.”;
ListItem.setFocus();
} else if (Record_btn.label == “Record”) {
Status_msg.text = “Recording…”;
if (Play_btn.label == “Stop”) {
doPlay();
}
Play_btn.enabled = false;
_root.out_ns = new NetStream(_root.client_nc);
_root.out_ns.attachAudio(Microphone.get());
_root.teste_cam = Camera.get();
_root.live.attachVideo(teste_cam);
_root.out_ns.attachVideo(_root.teste_cam);
_root.out_ns.publish(ListItem.text, “record”);
_root.rec_so.data[ListItem.text] = ListItem.text;
_root.rec_so.flush();
Record_btn.label = “Stop”;
} else if (Record_btn.label == “Stop”) {
_root.out_ns.close();
Play_btn.enabled = true;
Record_btn.label = “Record”;
ListItem.text = “”;
Status_msg.text = “…”;
}
}
function doPlay() {
if (Play_btn.label == “Play”) {
Status_msg.text = “Playing…”;
Play_btn.label = “Stop”;
var playFileName = Play_list.selectedItem.label;
_root.in_ns = new NetStream(_root.client_nc);
publicado.attachVideo(_root.in_ns);
_root.in_ns.play(playFileName);
_root.in_ns.onStatus = function(info) {
if (info.level == “error” || info.code == “NetStream.Play.Stop”) {
Status_msg.text = “parado…”;
Play_btn.label = “Play”;
}
};
} else if (Play_btn.label == “Stop”) {
Status_msg.text = “Stop…”;
_root.in_ns.onStatus = null;
_root.in_ns.close();
Play_btn.label = “Play”;
}
}
Play_list.addEventListener(“change”, cbListener);
var Play_list = _root.createClassObject(mx.controls.List, “Play_list”, 1, {_x:357, _y:214});
Play_list.setSize(148, 177);
var Play_btn = _root.createClassObject(mx.controls.Button, “Play_btn”, 2, {_x:170, _y:216, label:”Play”});
var Record_btn = _root.createClassObject(mx.controls.Button, “Record_btn”, 3, {_x:47, _y:216, label:”Record”});
Record_btn.onRelease = function() {
doRecord();
};
Play_btn.onRelease = function() {
doPlay();
};
var cbListener:Object = new Object();
cbListener.change = function(evt_obj:Object) {
var playFileName = evt_obj.target.selectedItem.label;
trace(playFileName);
in_ns.pause();
in_ns = new NetStream(_root.client_nc);
publicado.attachVideo(in_ns);
in_ns.play(playFileName);

};

Para definir sua aplicação no servidor, crie um diretorio chamado “playlist” no seu servidor do Flash Communication Server/Flash Media Server.

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

Considerações Finais

Simples e fácil criar uma playlist usando o Flash Communication Server/Flash Media Server, pode servir como um livro de visitas.

Para saber mais:

Meu Blog FCS/FMS
http://www.dotpix.com.br/~leo/?cat=11

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

FlashComGuru
http://www.flashcomguru.com/

FlashCom.com.br
http://www.flashcom.com.br/

Flash Media Server Fun
http://www.fczone.com/

Autor: Leonardo França – Colunista R.I.A do Portal MXSTUDIO

Qualquer dúvida envie um email para leo@dotpix.com.br ou acesse o nosso fórum e visitem meu BLOG

Gravando Streaming com Flash Communication Server/Flash Media Server

leonardofranca — Tue, 24 Jan 2006 00:00:00 +0000

Gravando Streaming com Flash Communication Server/Flash Media Server.

Introdução

Algumas vezes é frustrante para o usuário ter que baixar o arquivo todo para depois assistir seu conteúdo ainda mais tratando-se de conexões discadas. E como evolução natural desta situação, o conteúdo via streaming. Afinal, uma série de serviços, como notícias e transmissões ao vivo, rádios online, não seriam viaveis sem esta tecnologia. E somente agora que os provedores de hospedagem brasileiros começam a apostar no Flash Communication Server/ Flash Media Server.

Pré-Requisitos

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

Objetivo

Mostrar como gravar streaming usando o servidor Flash Communication Server ou Flash Media Server(Ainda não foi testado no Red5).

Conceitos

Streaming é basicamente uma tecnologia que permite ao usuário ter acesso ao conteúdo multimídia sem a obrigação de baixar o arquivo. Funciona da seguinte forma: Quando o usuário clica em um link solicitando a reprodução de um arquivo streaming, inicia-se o download das informações. Antes de começar a executar o streaming, o player armazena um certo volume de dados em um buffer, para que a transmissão ocorra sem interrupções. Quando o buffer é preenchido, o player reproduz o conteúdo.

Conteúdo

Gravar streaming usando o FlashCom/Flash Media Server é bastante facil, não precisaremos escrever o codigo em asc(ActionScript Communication File) ainda, so usaremos o action script do lado do cliente.

Abra um documeno novo no Flash, vamos criar dois movies clips do tipo video, para adicionar um objeto video na sua library, abra o painel library (windomVideo object to your library, open the Library panel (Window > Library ou Ctrl+L ou F11) a adicione um embedded Video object selecionando New Video nas opções da library.

Criaremos um botao para quando clicando mandara a gravação para o Flash Communication Server/Flash Media Server e outro botão para parar a gravação. Um botão Play servirá para mostrar o video gravado.

Usaremos o ActionScript para capturar a camera e atachar ao video objeto, criar uma conexão com o servidor, gravar os dados da camera e mandar como streaming ao servidor e tocar a gravação no segundo video object. Quando você grava um streaming no Flash, o servidor cria arquivos com as extensões .flv para video e .idx para audio.

Arraste dois embedded Video objects da library para o palco e de os nomes de instância de Live_video e Replay_video.

O botões que encadearão as ações serão criados dinâmicamentes, certifique que os botoes estejam na library do filme. No primeiro frame da timeline, abra o painel Actions(F9).

var Play_btn = _root.createClassObject(mx.controls.Button,”Play_btn”,_root.getNextHighestDepth(),{_x:120,_y:375,label:”Play”});
var Record_btn = _root.createClassObject(mx.controls.Button,”Record_btn”,_root.getNextHighestDepth(),{_x:15,_y:375,label:”Record”});

Para definir sua aplicação no servidor, crie um diretorio chamado “gravando_stream” no seu servidor do Flash Communication Server/Flash Media Server.

Vamos chamar os metodos que ligam a camera e o microfone

client_cam = Camera.get();
client_mic = Microphone.get();
Live_video.attachVideo(client_cam);

Agora criaremos uma função para conectar ao servidor Flash Communication Server/Flash Media Server, além de mandar o video ao servidor e pegar o video novamente via streaming

function initStreams() {
client_nc = new NetConnection();
/*quando for usar um servidor que não seja localhost use rtmp://*/

client_nc.connect(“rtmp:/gravando_stream”);
client_nc.onStatus = function(info) {
trace(“Level: ” + info.level + ” Code: ” + info.code);
}
out_ns = new NetStream(client_nc);
in_ns = new NetStream(client_nc);
Replay_video.attachVideo(in_ns);
}
initStreams();

Outra função será criada para gravar o video no servidor. Note que é adicionado o parametro “record” ao metodo publish, isso dira ao servidor Flash Communication Server/Flash Media Server que é para gravar o stream no servidor.

function doRecord(){
if (Record_btn.label == “Record”){
out_ns.attachVideo(client_cam);
out_ns.attachAudio(client_mic);
out_ns.publish(“my_recorded_stream”, “record”);
Play_btn.enabled = false;
Record_btn.label = “Stop”;
} else if (Record_btn.label == “Stop”){
out_ns.close();
Play_btn.enabled = true;
Record_btn.label = “Record”;
}
}

Função para o botao Play, tocará o video gravado via stream

function doPlay() {
in_ns.play(“my_recorded_stream”);
}

Dê ctrl+enter para testar a aplicação
Clique no botão Record para começar a gravar o stream depois Stop, click no botão Play para ver o video.
Apos a gravação, no seu servidor deve ser formar algo parecido com esta imagem, criada a pasta stream e dentro dela a pasta gravando_stream e dentro desta os nosso arquivos .flv e .idx.

Segue o codigo completo:

client_cam = Camera.get();
client_mic = Microphone.get();
Live_video.attachVideo(client_cam);
function initStreams() {
client_nc = new NetConnection();
client_nc.connect(“rtmp:/gravando_stream”);
client_nc.onStatus = function(info) {
trace(“Level: “+info.level+” Code: “+info.code);
};
out_ns = new NetStream(client_nc);
in_ns = new NetStream(client_nc);
Replay_video.attachVideo(in_ns);
}
initStreams();
function doRecord() {
if (Record_btn.label == “Record”) {
out_ns.attachVideo(client_cam);
out_ns.attachAudio(client_mic);
out_ns.publish(“my_recorded_stream”, “record”);
Play_btn.enabled = false;
Record_btn.label = “Stop”;
} else if (Record_btn.label == “Stop”) {
out_ns.close();
Play_btn.enabled = true;
Record_btn.label = “Record”;
}
}
function doPlay() {
in_ns.play(“my_recorded_stream”);
}
var Play_btn = _root.createClassObject(mx.controls.Button, “Play_btn”, _root.getNextHighestDepth(), {_x:120, _y:375, label:”Play”});
var Record_btn = _root.createClassObject(mx.controls.Button, “Record_btn”, _root.getNextHighestDepth(), {_x:15, _y:375, label:”Record”});
Record_btn.onRelease = function():Void {
doRecord();
};
Play_btn.onRelease = function():Void {
doPlay();
};

Veja a aplicaçao em funcionamento

Considerações Finais

Simples e fácil gravar streaming usando o Flash Communication Server/Flash Media Server.

Para saber mais:

Meu Blog FCS/FMS
http://www.dotpix.com.br/~leo/?cat=11

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

FlashComGuru
http://www.flashcomguru.com/

FlashCom.com.br
http://www.flashcom.com.br/

Flash Media Server Fun
http://www.fczone.com/

Autor: Leonardo França – Colunista R.I.A do Portal MXSTUDIO

Qualquer dúvida envie um email para leo@dotpix.com.br ou acesse o nosso fórum e visitem meu BLOG

Míltiplas Faces de RIA.

leonardofranca — Mon, 16 Jan 2006 00:00:00 +0000

Coluna R.I.A – Míltiplas Faces de RIA.

Conhecendo as várias formas de se fazer um aplicativo RIA

Ano começando e estou aqui estreiando na comunidade MXStudio. Espero poder contribuir bastante transferindo meu conhecimento para quem puder aproveitar.

Nos últimos anos a Macromedia lançou o conceito de RIA (Rich Internet Application) no qual tem-se o objetivo de melhorar a usabilidade e experiência do usuário, a principal ferramenta para sua produção até então era o Macromedia Flash e recentemente o Macromedia Flex. Logo depois veio a galera do AJAX para provar que o Flash não é o único meio de fazer RIA. Uma briga boa começou para desenvolvimento de aplicativos RIA. Entretando não existem somente Flash e AJAX para criação de aplicativos RIA, há também o MXML(FLEX), Laszlo, XUL e XAML veremos uma introdução de cada tecnologia.

AJAX

Asynchronous JavaScript and XML – é um termo que descreve uma técnica de desenvolvimento web para criar softwares de interação. A tecnologia usa combinações do HTML( ou XHTML) e CSS para apresentação da informação, DOM(Document Object Model) para manipulação com javascript para dinamizar a exposição e interagindo com a apresentação da informação e XMLHttpRequest, para trocar e manipular dados assincronamente com um servidor web.

Veja um exemplo
http://www.adaptivepath.com/publications/essays/archives/000385.php
http://en.wikipedia.org/wiki/AJAX
http://www.ajaxmatters.com/r/welcome

FLASH

É o software da Macromedia(Agora Adobe) mais usado no mundo para criação de gráficos vetoriais, animações etc. O plugin Flash Player está presente em 99% dos computadores no mundo. È possível criar aplicativos web com o maximo de interação com o usuário, dando-lhe a experiência de usar o melhor do desktop e o melhor da internet em um só aplicativo. É possível interagir com xml, web services etc, além de possibilidade de usar recursos de multimídia como vídeo e som.

http://www.dotpix.com.br/~leo/?p=22
http://www.dotpix.com.br/~leo/?p=11
http://www.dotpix.com.br/~leo/?p=12
http://www.amfphp.org/
http://www.flash-db.com/

LASZLO

Laszlo Systems é originalmente desenvolvindo do OpenLaszlo. Esta plataforma permite que desenvolvedores criem aplicativos ricos. Baseado em XML, roda em servidor java (Tomcat). OpenLaszlo é distribuido sob a lincença CPL.

http://pt.wikipedia.org/wiki/Laszlo
http://www.openlaszlo.org/

/*ola.lzx*/

MXML

Linguagem introduzida junto ao Macromedia FLEX, é baseando em XML, serve para desenvolver aplicativos RIA usando o servidor FLEX, tornando o desenvolvimento muito mais rápido do que usando o Flash, tem suporte a css, conexão com webservices e o Flash Remoting através do RemotObject. Até a versão 1.5, era necessário ter um servidor para rodar uma aplicação em FLEX, agora com o lançamento da versão 2.0, somente será necessário ter o Flex Builder e pode-se distribuir o swf gerado. Acredito que isso ajudará a aumentar a popularidade do FLEX junto aos desenvolvedores.

http://labs.macromedia.com/
http://www.macromedia.com/devnet/flex/
http://en.wikipedia.org/wiki/MXML

/*teste.mxml*/

XUL

XML User Interface Language, pronuciado como “zool”, é um padrão aberto criado pelo grupo de desenvolvedores do navegador Mozilla, implementado pela Mozilla Framework, que define janelas, botões, menus e uma grande coleção de objetos de interface de usuário para aplicações desktop em notação XML e usa JavaScript para definir roteiros e automação. Roda somente em navegadores baseados no Gecko engine, tem um componente para interagir com o Flash (Zulu) e para Java (Thinlets).

http://twiki.im.ufba.br/bin/view/XUL
http://www.mozilla.org/projects/xul/xul.html
http://pt.wikipedia.org/wiki/XUL

/*hello.xul*/

XAML

Extensible Application Markup Language(pronuncia-se “zemel”) – Possui muitas das potencialidades das tecnologias anteriores. O XAML também é a forma marcação para acessar o modelo de objetos do novo Windows Presentation Foundation e você pode ainda criar seus próprios objetos e acessá-los através do XAML. O Microsoft Vista, WinFX e muitas outras tecnologias já usam o XAML. Requer o WinFX SDK.

http://www.xaml.net/
http://www.linhadecodigo.com.br/artigos.asp?id_ac=843&pag=1
http://pt.wikipedia.org/wiki/XAML
http://msdn.microsoft.com/windowsvista/about/

/*ola_mundo.xaml*/

Algumas aplicações e sites:

Dotpix (AJAX)
Google Maps (AJAX)
Yahoo Maps (FLEX) – há opção para desenvolver em AJAX
Netvibes (AJAX)
Gtalkr (FLASH)
Zulu (Flash e XUL)
Gmail (AJAX)
LaszloMail (Laszlo)
Flex Store (sem comentarios)
Broadmoor Hotel (Flash)

Para visualizar alguns exemplos é necessário o Flash Player 8.5

Vimos algumas maneiras existentes de desenvolver em R.I.A, cada maneira tem sua linguagem ou SDK para produção, ao longo do tempo procurarei mostrar como utilizar o Flash e Flex para criação de RIA’s.

Autor: Leonardo França – Colunista R.I.A do Portal MXSTUDIO

Qualquer dúvida envie um email para leo@dotpix.com.br ou acesse o nosso fórum e visitem meu BLOG