Desenvolvendo Aplicações De Comunicação Multiusuário Para

DESENVOLVENDO APLICAÇÕES DE COMUNICAÇÃO MULTIUSUÁRIO
PARA WEB COM MACROMEDIA FLASH MEDIA SERVER 2
Fernando Henrique Morais da Rocha ¹,
Daniel Cardoso Dias ², Matheus Garcia Soares³
1,2,3 - Graduando do Curso de Engenharia Elétrica, com ênfase em Engenharia de Computação
1,2,3 - Universidade Federal de Uberlândia, Faculdade de Engenharia Elétrica, Uberlândia – MG
1- [email protected]
2 - [email protected]
3 – [email protected]
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
DEVELOPING MULTIUSER
COMMUNICANTION APLICATIONS FOR
WEB USING MACROMEDIA FLASH
MEDIA SERVER 2
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).
1
Keywords – ActionScript, Flash Media Server, FMS,
FMS Components
I. 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-mail 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.
II. 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://www.temp1.ia.ufu.br/FlashMediaServer2.exe.
O aplicativo é gratuito para desenvolvedores,
possibilitando um total de 10 conexões simultâneas. Para
aumentar esse número de conexões, é necessário adquirir o
software.
A. 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”.







Fig. 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”.
III. 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 ÁudioConferê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ídeoConferê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:
http://www.adobe.com/devnet/flashmediaserver/articles/com
ponents.html.
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.
IV. 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”);
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.
V. 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)
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.
Fig. 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”.
Fig. 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”.
Fig. 5 - Painel Properties
Fig. 3 - Painel Components
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)
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 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)
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.
VI. 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.


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.
VIII. REFERÊNCIAS BIBLIOGRÁFICAS
O servidor Flash Media Server não está sendo
executado. Deve-se iniciar o servidor através do
atalho do menu Iniciar.
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.
VII. CONCLUSÃO
Por fim, este trabalho serve como base para o
desenvolvimento de aplicativos de comunicação para web de
[1] GUILIZZONI, G. Creating a Video Chat: Your
First Macromedia Flash Communication Server
MX Application.
Disponível em:
http://www.macromedia.com/devnet/flashcom/artic
les/first_comm_app.html
Acesso em: Abril de 2008
[2] Flash
Media
Server
2
Components
Disponível em:
http://www.adobe.com/devnet/flashmediaserver/arti
cles/components.html
Acessado em: Abril de 2008