Exibição de vídeo de webcam com Adobe Flex

No exemplo abaixo mostro como exibir o vídeo da webcam do  usuário.

<xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    public function getCam():void{
        var cam:Camera = Camera.getCamera();
        if(cam){
            vd_cam.attachCamera(cam);
            cam.setMode(480,320,28,true);
            cam.setQuality(0,90);
        }else{
            Alert.show("Sem cam num dá!","Alerta");
        }
    }
    ]]>
    </mx:Script>
    <mx:VideoDisplay id="vd_cam" width="480" height="320" creationComplete="getCam();"
        verticalCenter="0" horizontalCenter="0" borderColor="#000000" borderThickness="1"
        borderStyle="solid" />
</mx:Application>

Resultado:

Tutorial – Integração Flex/Java por BlazeDS

Requisitos:

• Apache Tomcat 6 Instalado.
• Ambiente Java (JRE)
• Eclipse IDE/Flex Builder Instalado
• Sysdeo Eclipse Tomcat Launcher plugin Instalado.
• BlazeDS

1.  Crie um projeto do tipo Dynamic Web Project em File> New> Other…> Web> Dynamic Web Project

2.  Altere o Java Build Path para Alex_on_flex_java/WebContent/WEB-INF/classes

3.  É necessário configurar o projeto como sendo um projeto do Tomcat

4.  Crie a classe HelloWorld:
     
e deixe seu código parecido com o código abaixo:

package com.amf;
public class HelloWorld {
      public String helloWorld(String nm_usuario){
             return "Bem vindo " + nm_usuario;
     }
}

5.  Extraia o conteúdo do arquivo compactado do blazeds e depois extraia também os arquivos em blazeds.war (você pode utilizar o winrar)
Copie a pasta WEB-INF e cole em WebContent

6.  Em WebContent> WEB-INF> flex altere o arquivo remoting-config.xml
Adicionando o código de referência a classe HelloWorld:

<!-- == Declaração da Classe com.amf.HelloWorld == -->
<destination>
          <properties>
                     <source>com.amf.HelloWorld</source>
            </properties>
</destination>
<!-- ============================================= -->

 

7.  Crie um novo projeto Flex em File> New> Flex Project.

8.  Altere o Flex Build Path da seguinte forma:
    Output folder: C:\”Caminho do Tomcat”\webapps\alex_on_flex_flex
    Output folder URL: http://localhost:”porta do tomcat”/alex_on_flex_flex

9. Renomeie o arquivo alex_on_flex_flex.mxml para index.mxml

10. Deixe o código do index.mxml como abaixo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
 <mx:RemoteObject destination="service_helloWorld" id="service_helloWorld" showBusyCursor="true"
  fault="Alert.show(event.toString());">
  <mx:channelSet>
         <mx:ChannelSet>
             <mx:channels>
                 <mx:AMFChannel id="myAmf" uri="/FlexJava/messagebroker/amf"/>
             </mx:channels>
         </mx:ChannelSet>
     </mx:channelSet>    
       <mx:method name="helloWorld" result="resultHelloWorld(event)" fault="Alert.show(event.toString())"/>
 </mx:RemoteObject>
 
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.rpc.events.ResultEvent;
   public function resultHelloWorld(re:ResultEvent):void{
    Alert.show(re.result.toString(),'Alerta');
   }
  ]]>
 </mx:Script>
 
 <mx:Label x="420.5" y="102" text="Seu Nome:" fontSize="16" fontWeight="bold"/>
 <mx:TextInput x="528.5" y="100" fontSize="16" width="219" id="txtUsuario"/>
 <mx:Button x="543.5" y="154" label="Enviar" fontSize="16"
  click="service_helloWorld.helloWorld(txtUsuario.text);"/> 
</mx:Application>

11.  Clique com o botão direito do mouse sobre o projeto Java e envie para o tomcat em Tomcat Project> Exports to the WAR file sets in Project properties e em seguida reinicie o Tomcat.

12. Acesse http://localhost:9090/alex_on_flex_flex/ e veja a mágica acontecer.

Espero que tenham curtido.
Até o próximo.

BlazeDS

BlazeDS é uma tecnologia baseada em servidor de Java remoting e web messaging que permite a conexão com o back-end distribuído de dados e envio de dados em tempo real para as RIA’s Adobe Flex e Adobe AIR. Devido à sua licença aberta, o BlazeDS pode ser utilizado com outras plataformas clientes como JavaScript / Ajax.

Anteriormente disponível apenas como parte do Adobe LiveCycle Data Services ES, em 13 de dezembro de 2007 a Adobe anunciou que as tecnologias incluídas no BlazeDS, juntamente com a especificação Action Message Format, foram contribuidas para open source sob a Lesser General Public License (LGPL v3) com o código-fonte disponível para download no início de 2008. O BlazeDS pode ser baixado na página oficial.

O Message Service (Serviço de mensagens) fornece uma completa publicação / assinatura de infra-estrutura que permite aos clientes Flex e o servidor trocararem mensagens em tempo real. Remotamente permite uma aplicação Flex chamar diretamente os métodos de objetos Java implementado em um servidor de aplicação.

Página oficial: http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/

Instalação do Flex Builder 3 Plug-in para Eclipse – Windows

Nota: O Flex Builder 3 Plug-in é suportado somente no Eclipse 3.2.2 ou Eclipse 3.3.

Cuidado: Não instale o plug-in versão do Flex Builder 3 para uma cópia do Eclipse que já está hospedando o Flex Builder 2 plug-in. Se você deseja continuar usando o Flex Builder 2 Plug-in, baixe uma nova cópia do Eclipse para instalar o Flex Builder 3 plug-in. Além disso, não se esqueça de usar o diferentes espaços de trabalho (workspace) do Eclipse para cada instalação do Flex Builder plug-in.

1. Entrar no Windows como Administrador ou como um administrador do computador (conta de um usuário com privilégios de administrador).

Nota: Se você tentar instalar sem privilégios de administrador, a instalação será concluída. No entanto, terá instalado uma versão incompleta do Flex Builder que você não será capaz de executar.

2. Antes de instalar, desinstale quaisquer versões de pré-lançamento do Flex Builder 3 Plugin.

3. Execute o instalador, previamente baixado em <a href=”http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse&loc=en_us”>http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse&loc=en_us</a&gt;

4. Aceite o contrato de licença e siga as instruções.

5. Selecione a pasta para instalação.

6. Selecione a pasta do Eclipse que será estendido.

7. Por padrão, a versão de depuração do plug-in Flash Player está selecionado para instalação.

• A versão de depuração do Flash Player é o Flash Player 9 (9.0.124.0)
• Esta versão é necessária para a visualização e depuração de aplicações desenvolvidas com o Adobe Flex Builder.
• Você deve selecionar instalações separadas do plug-in Flash Player para Internet Explorer e do Firefox e Netscape.

8. (Opcional) Você pode selecionar os seguintes para instalar:

• ColdFusion Extensions for Flex Builder
• JSEclipse – JavaScript plug-in

9. Siga as instruções para concluir a instalação.

10. Inicie o Flex Builder utilizando seu atalho no Menu Iniciar em Adobe.
(Apenas Windows Vista) A primeira vez que você executar o Flex Builder 3, você deve “Executar como administrador”, depois do qual você poderá executá-lo normalmente.

11. Selecione Window> Open Perspective> Other> Flex Development.
Quando solicitado, digite o seu número de série ou escolha a opção Trial (60 dias).

Nota: Você deve criar um novo espaço de trabalho (workspace) antes de começar.Selecione File> Switch Workspace na barra de menus e digite um nome novo diretório. Se o diretório não existir, o Eclipse cria.

Nota: Mantenha seu Flash Player atualizado em http://get.adobe.com/br/flashplayer/.

Instalação do Flex Builder 3 – Windows

1. Entrar no Windows como Administrador ou como um administrador do computador (conta de um usuário com privilégios de administrador).

Nota: Se você tentar instalar sem privilégios de administrador, a instalação será concluída. No entanto, terá instalado uma versão incompleta do Flex Builder que você não será capaz de executar.

2. Antes de instalar, desinstale quaisquer versões beta do Flex Builder 3.

3. Execute o instalador, previamente baixado em http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex

4. Aceite o contrato de licença e siga as instruções.

5. Por padrão, a versão de depuração do plug-in Flash Player está selecionado para instalação.

• A versão de depuração do Flash Player é o Flash Player 9 (9.0.124.0)
• Esta versão é necessária para a visualização e depuração de aplicações desenvolvidas com o Adobe Flex Builder.
• Você deve selecionar instalações separadas do plug-in Flash Player para Internet Explorer e do Firefox e Netscape.

6. (Opcional) Você pode selecionar os seguintes para instalar:

• ColdFusion Extensions for Flex Builder
• JSEclipse – JavaScript plug-in

7. Siga as instruções para concluir a instalação.

Nota: Mantenha seu Flash Player atualizado em http://get.adobe.com/br/flashplayer/.

Introdução à Adobe Flex

O Adobe Flex é um framework open-source para  desenvolvimento de aplicações RIA (Rich InternetApplication). Baseado na plataforma Adobe Flash, suas aplicações rodam  sobre o onipresente Adobe Flash Player.

O Adobe Flex é composto de duas linguagens:
MXML, linguagem de marcação baseada em XML;
ActionScript, linguagem de programação do Flash Player.
Obs.: Pode-se implementar CSS.

O Flex requer um browser com suporte ao flash player para rodar suas aplicações. Porém aplicações Adobe Air, Flex para desktop, são independentes de navegadores e possuem funcionalidades particulares.

As aplicações Flex podem ser desenvolvidas :

• Utilizando apenas o SDK do Flex (gratuito).
  Link do Flex SDK: http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3sdk
• A IDE Adobe Flex Builder baseada na IDE Eclipse, contendo inúmeras funcionalidades que tornam o desenvolvimento de aplicações Flex muito mais ágil e produtivo.
  Link da versão Trial de 60 dias: http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex
• Instalando o Plugin do Adobe Flex Builder no Eclipse. Ideal para aplicações integradas com outras tecnologias.Ex: Java.
  Link para a versão Trial de 60 dias: http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse&loc=en_us