UTILIZANDO O MACROMEDIA FLASH MEDIA SERVER 2 COMO SERVIDOR DE APLICAÇÕES WEB DE COMUNICAÇÃO MULTIUSUÁRIO

Transcrição

1 UNIVERSIDADE FEDERAL DE UBERLÂNDIA 4ª Semana do Servidor e 5ª Semana Acadêmica 2008 UFU 30 anos UTILIZANDO O MACROMEDIA FLASH MEDIA SERVER 2 COMO SERVIDOR DE APLICAÇÕES WEB DE COMUNICAÇÃO MULTIUSUÁRIO Fernando Henrique Morais da Rocha 1 Universidade Federal de Uberlândia, Faculdade de Engenharia Elétrica, Avenida João Naves de Ávila, n.º2160, Santa Mônica, , Uberlândia - MG nandorocha13@gmail.com Resumo: O objetivo deste trabalho é mostrar uma forma rápida e simplificada para o desenvolvimento de aplicativos de comunicação para web, utilizando o Macromedia Flash Media Server 2 e um pacote de componentes para o Adobe Flash. No decorrer deste artigo, será desenvolvida uma aplicação utilizando meios modernos de comunicação, como Vídeo-Conferência, compartilhamento de área de desenho (Whiteboards) e bate-papo por texto (Chats). Palavras-chave: ActionScript, Flash Media Server, FMS, FMS Components 1. INTRODUÇÃO Na sociedade ocidental moderna, tende-se a eliminar distâncias e barreiras, buscando a facilidade de interação entre pessoas através de um leque de soluções tecnológicas que fazem ponte entre o espaço físico e virtual. Assim sendo, há uma necessidade constante de estabelecer comunicação com pessoas em qualquer lugar do mundo, seja para lazer ou negócios. Os meios de comunicação tradicionais, como o telefone ou carta, e até alguns mais modernos, como o e comunicadores instantâneos, não suprem as necessidades contemporâneas de pessoas e empresas; que precisam de comunicação em tempo real, utilizando áudio, vídeo e compartilhamento de aplicações e conteúdos multimídia. Por esse motivo, este trabalho tem como objetivo mostrar uma forma rápida e fácil de desenvolver aplicações de comunicação para web, utilizando o Adobe Flash Media Server 2 e o pacote de componentes Flash Media Server 2 Communication Components. A aplicação criada neste trabalho abordará os seguintes tipos de sistemas de comunicação: Áudio e Vídeo-Conferência, bate-papo por texto (Chat) e compartilhamento de área de desenho (Whiteboard). Para isso, serão apresentadas as etapas de instalação e configuração do servidor Flash Media Server, instalação do pacote de componentes no Adobe Flash CS3 Professional, assim como o detalhamento do processo de desenvolvimento de um aplicativo de comunicação. 2. MACROMEDIA FLASH MEDIA SERVER O Macromedia Flash Media Server 2 é um servidor que oferece uma combinação única entre as capacidades tradicionais de streaming de mídia com um ambiente de desenvolvimento flexível para a criação de aplicações de mídia interativa. O Flash Media Server 2 complementa a IDE Macromedia Flash e Flash Player, fazendo da plataforma Flash a melhor solução para criação e desenvolvimento de aplicações multimídia interativas, que funcionam em navegadores e sistemas operacionais de todos os tipos, sendo o Flash Player a interface para o usuário final. O Flash Media Server 2 pode ser baixado do endereço ftp:// O aplicativo é gratuito para desenvolvedores, 1- Acadêmico do Curso de Engenharia Elétrica, com ênfase em Engenharia de Computação

2 possibilitando um total de 10 conexões simultâneas. Para aumentar esse número de conexões, é necessário adquirir o software. 2.1 Instalação A instalação do Macromedia Flash Media Server 2 é fácil e intuitiva. Será requisitado ao usuário, durante a instalação, um nome e uma senha, para o administrador do sistema, e as portas utilizadas. A escolha das portas é uma etapa importante, pois afeta a construção da aplicação, conforme discutiremos adiante. O primeiro passo é executar o instalador do programa, que foi baixado do endereço anteriormente citado, e o assistente de instalação aparecerá. Na janela do instalador, o usuário clicará em Next para continuar o processo de instalação. É preciso selecionar o campo I accept the agreement e, em seguida, clicar novamente em Next. Na tela seguinte, o usuário deve digitar um nome e uma senha para o administrador do sistema, e clicar em Next. A seguir, é requisitado ao usuário as portas que o servidor utilizará. (Figura 1) Para o desenvolvimento desse trabalho, usaremos a porta padrão (1935). Caso o usuário deseje utilizar uma porta diferente da padrão do servidor, deve digitar o número daquela que será utilizada e, em seguida, clicar em Next. Figura 1- Escolha das portas utilizadas pelo servidor Na etapa seguinte, o usuário deve escolher um local para o instalador copiar os arquivos, ou simplesmente clicar em Next para manter o local padrão. No próximo passo, o usuário pode escolher o local de instalação dos atalhos do programa, e clicar novamente em Next para dar continuidade à instalação. Neste momento, são exibidas as escolhas feitas no processo de instalação, para alterá-las, o usuário deverá clicar em Back. Caso todos os dados estejam corretos, clica-se em Install. Na etapa final, tem-se a opção de ver o arquivo Readme.htm, iniciar o servidor Flash Media Server e também iniciar o servidor manualmente ao iniciar o computador. O usuário deve escolher as opções desejadas e clicar em Finish. Para iniciar o servidor manualmente, o caminho a ser seguido é: Iniciar > Programas > Macromedia > Flash Media Server 2 > Start Flash Media Server e Start Flash Media Admin Server. 2

3 3. FLASH MEDIA SERVER 2 COMMUNICATION COMPONENTS O Flash Media Server possui vários componentes prontos para construir aplicações padrão de comunicação rápida e fácil. Entre esses componentes, temos: AudioConference: Componente de Áudio-Conferência. Cursor: Este componente mostra o ponteiro do mouse de cada usuário conectado a uma aplicação. PresentationSWF: Este componente possibilita a criação de uma apresentação de slides utilizando um arquivo SWF. PresentationText: Este componente possibilita a criação de uma apresentação de slides usando texto. RoomList: Este componente possibilita a criação, remoção e participação de salas de comunicação. VideoConference: Componente de Vídeo-Conferência.. Whiteboard: Este componente cria um quadro branco, uma área compartilhada onde os usuários podem utilizar as ferramentas de desenho e texto que são disponibilizadas. SimpleConnect: Este componente gerencia todos os objetos de comunicação e também provê ao usuário uma interface para conectar-se na aplicação. PeopleList: Este componente exibe uma lista de pessoas conectadas à aplicação. ConnectionLight: Este componente provê uma interface visual para representar o estado da conexão do cliente com a aplicação. UserColor: Este componente possibilita ao usuário escolher uma cor que será usada com outros componentes que utilizam cores. Chat: Este componente possibilita a criação de chats (bate-papos). SetBandwidth: Este componente ajusta automaticamente a qualidade de microfones e cãmeras de acordo com a velocidade escolhida. AVPresence: Este componente possibilita a exibição de áudio e vídeo dos usuários conectados. VideoPlayback: Este componente possibilita o controle de exibição de áudio e vídeo. VideoRecord: Este componente possibilita a gravação de áudio e vídeo exibidos no servidor. Uma descrição mais detalhada desses componentes pode ser obtida no endereço: Neste site também é possível fazer o download do Flash Media Server 2 Communication Components. Para este trabalho, abordaremos o uso dos seguintes componentes: SimpleConnect, PeopleList, Chat, Whiteboard, AVPresence e SetBandwidth. 4. INSTALANDO OS COMPONENTES E CONFIGURANDO O SERVIDOR Para a criação das aplicações, utilizaremos o Adobe Flash CS3 Professional, sendo um prérequisito para iniciar a criação dos aplicativos. Pode ser usada também a versão 8 deste software. Depois de baixar o pacote de componentes, deve-se descompactá-lo. Para instalar os componentes no Adobe Flash CS3 Professional, deve-se copiar o arquivo CommunicationComponents.fla para a pasta /en/configuration/components, localizada dentro do diretório onde está instalado o Flash CS3 Professional. Agora, é necessário configurarmos uma nova aplicação no servidor Flash Media Server. Para isso, deve-se criar uma nova pasta com o nome da aplicação, por exemplo, webteste, dentro da pasta aplications, localizada dentro do diretório onde foi instalado o Flash Media Server. Dentro dessa nova pasta, crie um arquivo chamado main.asc com o seguinte código: load( component.asc ); 3

4 Este arquivo diz ao servidor para carregar todos os códigos de servidor para os componentes de comunicação, quando a aplicação é iniciada. Esse é todo o procedimento necessário para configurar o servidor. 5. CRIANDO AS APLICAÇÕES Com o Adobe Flash CS3 Professional já iniciado, deve-se criar um arquivo novo, clicando no menu File e depois em New. O tipo de arquivo que deve ser escolhido em seguida é Flash File (ActionScript 2.0) (Figura 2). Figura 2 - Escolha do tipo de arquivo Os componentes estão listados em um painel do lado direito da tela, chamada Components (Figura 3). Caso não esteja visível, deve-se clicar no menu Window e depois em Components. Seleciona-se, então Communication Components. Figura 3 - Painel Components 4

5 Para utilizar os componentes, deve-se arrastar aqueles que serão usados para a área em branco no centro da tela, os posicionando da maneira desejada. O componente mais importante a ser utilizado é o SimpleConnect, já que ele irá gerenciar e validar as conexões dos usuários com os outros componentes. Com ele, não é necessário nenhum código adicional para a aplicação funcionar. É possível construir aplicações sem utilizá-lo, porém, faz-se necessário o desenvolvimento de código em ActionScript; tanto do lado do cliente quanto do lado do servidor; para controlar as conexões e, também, algum método, feito em outras linguagens, como PHP e ASP, para fazer o controle de sessão e login de usuários. Assim, deve-se arrastar os componentes SimpleConnect, Chat, PeopleList, SetBandwidth, WhiteBoard e três AVPresence. O posicionamento deve ser feito de acordo com as necessidades do usuário. Um exemplo de posicionamento dos componentes pode ser visto na Figura 4. Figura 4 - Exemplo de posicionamento dos componentes Caso seja necessário, deve-se redimensionar a área utilizada pela aplicação através do campo Size, no painel Properties, localizado na parte inferior da janela do Flash CS3. (Figura 5) Caso este painel não esteja visível, basta clicar no menu Window e depois em Properties. Figura 5 - Painel Properties Ao clicar no botão do campo Size, uma janela com as propriedades da aplicação, como comprimento, largura, cor de fundo e título é aberta, possibilitando a alteração desses campos (Figura 6). 5

6 Figura 6 - Janela com as propriedades da aplicação Deve-se, então, dar nomes (instâncias) aos componentes, para que seja possível identificálos e para que o SimpleConnect possa efetuar as ações necessárias para a conexão e funcionamento da aplicação. Para instanciar os componentes, selecione-os, um por vez, e, no painel Properties, digite o nome da instância no local (Figura 7). Figura 7 - Destaque do campo de instanciamento do objeto selecionado As instâncias utilizadas no desenvolvimento deste projeto foram: chat1 para o Chat, plist para o PeopleList, wb para o Whiteboard, vid1, vid2 e vid 3 para os objetos AVPresence. Após instanciar todos os objetos, configura-se o SimpleConnect para se conectar ao servidor e aos demais componentes. Para isso, deve-se selecionar o SimpleConnect e, no painel Properies, escolher a aba Parameters (Figura 8). Nesta aba existem dois campos, o Applicantion Directory e o Communication Components. Deve-se selecionar o primeiro campo e digitar o endereço do servidor Flash Media Server e da aplicação, no seguinte formato: rtmp:// + endereço do servidor + / + nome da aplicação, sendo este endereço um endereço IP, local ou público, dependendo da utilização da aplicação. Caso o usuário tenha escolhido uma porta diferente da porta padrão na instalação do Flash Media Server, o campo deve ser preenchido da seguinte forma: rtmp:// + endereço do servidor + : + porta do servidor + / + nome da aplicação (Figura 8). 6

7 Figura 8 - Exemplos do campo Application Directory O campo Communication Components faz a ligação do SimpleConnect com o resto dos componentes. Para fazer esta ligação, deve-se selecionar o campo Communication Components e clicar no botão com o desenho de uma lupa, localizado no canto direito do campo. Ao clicar sobre este botão, a janela Values aparece. Nesta janela, clica-se sobre o botão simbolizado por + para adicionar uma linha de valor à lista. Após clicar nesta linha adicionada, deve-se digitar o nome do componente, instanciado anteriormente, para ligar componentes ao SimpleConnect (Figura 9). Figura 9 - Janela Values com valores adicionados Neste momento, deve-se salvar o trabalho e testar o funcionamento do aplicativo. Para tanto, pressionam-se as teclas CTRL + ENTER ou clica-se no menu Control e depois em Test Movie. Para publicar e disponibilizar os arquivos em um servidor web, deve-se clicar no menu File e em seguida Publish. Serão criados 2 arquivos com o mesmo nome que o documento foi salvo, mas com extensões diferentes,.swf e.html, e um arquivo com o nome AC_RunActiveContent.js. Para disponibilizar a aplicação em um site da web, deve-se copiar estes três arquivos para os diretórios do servidor de preferência do usuário. 6. ERROS COMUNS E SOLUÇÕES Um erro comum é colocar o arquivo main.asc no diretório errado. Deve-se observar se o arquivo main.asc está no local correto. Endereço incorreto do servidor. É preciso verificar o endereço rmtp no campo Application Directory, no painel Parameters do component Simple_Connect e certificar-se de que esteja apontando para o local certo. A máquina para a qual o endereço esteja apontando deve estar executando o servidor Flash Media Server. O servidor Flash Media Server não está sendo executado. Deve-se iniciar o servidor através do atalho do menu Iniciar. 7

8 O servidor está atrás de um firewall que bloqueia a porta utilizada. Deve-se pedir ao administrador do sistema que libere a porta escolhida. À partir da versão 1.5 do Flash Media Server, é possível utilizar a porta 80 e o protocolo HTTP para comunicação com o servidor. 7. CONCLUSÃO Por fim, este trabalho serve como base para o desenvolvimento de aplicativos de comunicação para web de uma forma rápida e simples, utilizando ferramentas modernas, atendendo às demandas atuais do mercado, que necessita de meios de comunicação eficientes, envolvendo áudio, vídeo e aplicações gráficas. USING THE MACROMEDIA FLASH MEDIA SERVER 2 AS A MULTIUSER COMMUNICATION WEB APPLICATIONS SERVER Fernando Henrique Morais da Rocha Universidade Federal de Uberlândia, Faculdade de Engenharia Elétrica, Avenida João Naves de Ávila, n.º2160, Santa Mônica, , Uberlândia - MG nandorocha13@gmail.com Abstract: The objective of this paper is to show a quick and simple way to develop communication applications for web using Macromedia Flash Media Server 2 and a component s pack for Adobe Flash. In the course of this article, an application will be created, using modern communication ways, like Video-Conference, drawing area sharing (Whiteboards) and text chat (Chats). Keywords: ActionScript, Flash Media Server, FMS, FMS Components 8