Compartilhando Câmera e Chat com o Red5

Este exemplo pode usar o serviço fitcDemo do Red5, mais preferi criar o meu próprio por necessitar de muitas alterações e novas implementações.

Basicamente é o serviço fitcDemo que vou adicionar algumas funcionalidades novas ao serviço e para isso você precisa saber um pouco de Java ou pelo manos a não básica.

/**
 * Se você não sabe nada de Java baixe o Zip que conterá toda a biblioteca compilada.
 */

Vamos começar criando um projeto no Eclipse For Java com o nome de confDemo. conforme imagens abaixo:

Imagem 01:Novo projeto

Imagem 02: Criando o projeto no Java

Agora antes de prosseguir temos que importar a biblioteca do Red5 no projeto. Para isso clique com o botão direito sobre o projeto e vá em Proprietes. Em Java Build Path >> Libraries clique em Add External JARs e selecione Red5.jar que se encontra na raiz da instalação do Red5 e clique em OK.

Figura 03: Importando o JAR

Agora que o projeto esta criado configurado, vamos criar um novo arquivo java e nomeá-lo de Application.java no Package org.red5.confDemo que estenderá org.red5.server.adapter.ApplicationAdapter e implementará org.red5.server.api.service.IPendingServiceCallback.

Figura 04: Nova Classe

O arquivo gerado esta abaixo e

package org.red5.confDemo;
import org.red5.server.adapter.ApplicationAdapter;
import org.red5.server.api.service.IPendingServiceCall;
import org.red5.server.api.service.IPendingServiceCallback;

public class Application extends ApplicationAdapter implements
    IPendingServiceCallback {

    @Override
    public void resultReceived(IPendingServiceCall call) {
        // TODO Auto-generated method stub
    }
}

O método resultReceived implementado server para tratar o retorno do Flex em métodos invocados no Java. Criar também uma classe User para definir os dados dos usuários conectados. Esta classe terá apenas campo USER_ID e USER_NOME.

package org.red5.confDemo;

public class User {

    public String USER_ID = null;
    public String USER_NOME = null;

    public User(String USER_ID, String USER_NOME) {
        this.USER_ID = USER_ID;
        this.USER_NOME = USER_NOME;
    }
}

Bom, agora vamos rescrever os seguintes métodos:

• appStart
  É invocado quando o primeiro usuário se conectar na aplicação. Ou seja, quando a aplicação for iniciada;
• appConnect
  Invocado quando um novo usuário se conectar;
• disconnect
  Invocado quando o usuário sair da aplicação. Neste processo deve se excluir o usuário da lista de conectados;
• appJoin
  Invocado quando após o usuario ser aceito na conexão.

E criar os seguintes métodos:

• enviarNovosUsuarios
  Envia a lista de usuários conectados a todos os usuários conectados;
• listaUsuarios
  Retorna a lista de usuários que estão conectados. O problema é que na variável users os desconectados ficam como null, então

Abaixo esta toda a classe montada:

package org.red5.confDemo;

import java.util.HashMap;
import java.util.Iterator;
import java.util.Set;

import org.red5.server.adapter.*;
import org.red5.server.api.*;
import org.red5.server.api.service.*;

public class Application extends ApplicationAdapter implements
        IPendingServiceCallback {

    protected HashMap users = new HashMap();

    @Override
    public boolean appStart(IScope scope) {
        return true;
    }

    @Override
    public boolean appConnect(IConnection conn, Object[] params) {
        // quem não envia nome, não ganha conexão
        if (params.length != 1) {
            rejectClient("Sem permissão de acesso ao sistema!");
            return false;
        }
        String username = params[0].toString();
        String uid = conn.getClient().getId();
        IServiceCapableConnection service = (IServiceCapableConnection) conn;

        User user = new User(uid, username);
        users.put(uid, user);

        service.invoke("listaUsuarios", new Object[] { listaUsuarios() }, this);
        enviarNovosUsuarios();

        System.out.println("Novo usuario: " + uid);
        return true;
    }

    @Override
    public boolean appJoin(IClient client, IScope scope) {

        super.appJoin(client, scope);

        // envia a lista de usuários conectados a todos os conectados
        enviarNovosUsuarios();

        return true;
    }

    @Override
    public synchronized void disconnect(IConnection conn, IScope scope) {
        // ID da conexão do usuário
        String uid = conn.getClient().getId();
        // O usuário que desconectou
        users.remove(uid);
        enviarNovosUsuarios();

        System.out.println("Desconectado: " + uid);
        super.disconnect(conn, scope);
    }

    @Override
    public void resultReceived(IPendingServiceCall call) {
        System.out.println(call);
    }

    /**
     * Envia a lista de usuários conectados a todos os usuarios
     */
    protected void enviarNovosUsuarios() {
        Object[] params = new Object[] { listaUsuarios() };
        ServiceUtils.invokeOnAllConnections(scope, "listaUsuarios", params);
    }

    /**
     * Retorna a lista de usuários sem os campos nulos
     */
    protected HashMap listaUsuarios() {
        HashMap params = new HashMap();
        Integer key = 0;
        Set s = users.keySet();
        for (Iterator it = s.iterator(); it.hasNext();) {
            User value = users.get(it.next());
            if (value != null) {
                params.put(key, value);
                key++;
            }
        }
        return params;
    }
}

Baixe aqui os arquivos java:

• Application.java
• User.java

Agora dentro da pasta Red5/webapps vamos criar uma nova pasta chamada confDemo. Dentro desta pasta criar uma pastas chamada WEB-INF que receberá as bibliotecas e configurações deste serviço. Dentro desta pasta você criará três arquivos:

• red5-web.properties
• red5-web.xml
• web.xml

Agora exporte o seu aplicativo java e deposite dentro da pasta Red5/webapps/confDemo/WEB-INF/lib, reinicia o serviço do Red5. Para isso vá em File >> Export e abrirá a tela abaixo:

Imagem 05: exportando o projeto java

Agora marque os arquivos que devem ser exportados e selecione a pasta a salvar o Jar.

Figura 6: Finalizando a exportação

Clique em Finish e reinicie o serviço do Red5.

/**
 * Sempre que alterar o jar na pasta lib terás que reiniciar o o serviço do Red5.
 */

Agora que o serviço esta criado, vamos criar o aplicativo Flex que trabalhará com este serviço. Esta parte já deve ser mais fácil para a maioria dos leitores.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        horizontalAlign="left"
        backgroundColor="#f6f6f6"
        backgroundGradientColors="[#f6f6f6, #bbbbbb]"
        creationComplete="init()"
        viewSourceURL="srcview/index.html">

  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;

      // Conexão com o Red5
      private var netConnection:NetConnection;

      // NetStream responsável por apresentar o vídeo
      private var netStream_play:NetStream;

      // NetStream responsável por publicar o vídeo
      private var netStream_publish:NetStream;

      // Canal para o Chat
      private var sharedObject:SharedObject;

      // Componente para apresnetar o vídeo
      private var video:Video

      // Nome da publicação do vídeo
      private var streamingNome:String="publishVideo"

      /**
       * executa após carregar o aplicativo
       */
      private function init():void
      {
        video=new Video();

        video.height=uiCaixaDoVideo.height;
        video.width=uiCaixaDoVideo.width;
      }

      /**
       * Inicia a aplicação e faz a conexão
       */
      private function conectar():void
      {
        if ( hostRTMP.text.length < 15 )
        {
          Alert.show( "URL muito pequena!" )
          return;
        }
        if ( nome.text.length < 3 )
        {
          Alert.show( "Nome tem que ter mais de 3 caracteres!" )
          return;
        }
        if ( netConnection != null )
          netConnection=null;
        netConnection=new NetConnection();
        netConnection.addEventListener( NetStatusEvent.NET_STATUS, netStatus );
        netConnection.addEventListener( AsyncErrorEvent.ASYNC_ERROR, asyncError )
        netConnection.connect( hostRTMP.text, nome.text );
        netConnection.client=this;
      }

      /**
       * Método que recebe a lista de usuários enviado pleo Red5
       */
      public function listaUsuarios( lista:Array ):void
      {
        datagridUsuarios.dataProvider=lista;
      }

      /**
       * Método que recebe o Status da conexão
       */
      private function netStatus( e:NetStatusEvent ):void
      {
        switch ( e.info.code )
        {
          case "NetConnection.Connect.Success":
            connectado()
            viewstack.selectedIndex=1;
            break;
          case "NetConnection.Connect.Closed":
            viewstack.selectedIndex=0;
            break;
          case "NetConnection.Connect.Rejected":
            viewstack.selectedIndex=0;
            break;
          case "NetConnection.Connect.Failed":
            viewstack.selectedIndex=0;
            break;
          default:
            viewstack.selectedIndex=0;
        }
      }

      /**
       * Chamado quando deu sucesso na conexão com o Red5
       */
      private function connectado():void
      {
        sharedObject=SharedObject.getRemote( "chat", netConnection.uri, true )
        sharedObject.addEventListener( SyncEvent.SYNC, OnSync );
        sharedObject.addEventListener( AsyncErrorEvent.ASYNC_ERROR, asyncError );
        sharedObject.connect( netConnection );
        sharedObject.client=this;

        netStream_play=new NetStream( netConnection )
        video.attachNetStream( netStream_play );
        uiCaixaDoVideo.addChild( video );
        netStream_play.play( streamingNome );
      }

      /**
       * Método responsável por tratar os AsyncErrorEvent
       */
      private function asyncError( e:AsyncErrorEvent ):void
      {
        trace( e )
      }

      /**
       * Método responsável por tratar os SyncEvent
       */
      private function OnSync( e:SyncEvent ):void
      {
        trace( e )
      }

      /**
       * Trata o click do Botão Publicar WebCam
       *
       * Se marcado publica, ao desmarcar para a publicação.
       */
      private function publicar():void
      {
        if ( btPublicar.selected )
        {
          btPublicar.label="Parar publicação!"

          netStream_publish=new NetStream( netConnection );
          netStream_publish.attachCamera( Camera.getCamera());
          netStream_publish.attachAudio( Microphone.getMicrophone());

          // nome que será publicado
          netStream_publish.publish( streamingNome );
        }
        else
        {
          btPublicar.label="Publicar no servidor RTMP!"

          netStream_publish.close()
          netStream_publish=null
        }
      }

      /**
       * Envia o testo por Chat e limpa o campo.
       */
      private function enviarMensagem():void
      {
        var msg:String="<p><b>" + nome.text + " diz:</b> " + mensagem.text + "</p>";
        sharedObject.send( "recebemsg", msg );

        mensagem.text='';
      }

      /**
       * Recebe as mensagens postada no Chat
       */
      public function recebemsg( msg:String ):void
      {
        areaMensagem.htmlText+=msg;
        areaMensagem.validateNow();
        areaMensagem.verticalScrollPosition=areaMensagem.maxVerticalScrollPosition;
      }
    ]]>
  </mx:Script>
  <mx:ViewStack id="viewstack"
          width="100%"
          height="100%"
          creationPolicy="all">
    <mx:VBox width="100%"
         height="100%"
         verticalAlign="middle"
         horizontalAlign="center">
      <mx:Form>
        <mx:FormItem label="URL do servidor:" fontWeight="bold">
          <mx:TextInput id="hostRTMP"
                  text="rtmp://localhost/confDemo"
                  width="200"
                  fontWeight="normal"/>
        </mx:FormItem>
        <mx:FormItem label="Nome:" fontWeight="bold">
          <mx:TextInput id="nome" width="200" fontWeight="normal"/>
        </mx:FormItem>
        <mx:FormItem>
          <mx:Button label="Conectar no Red5" click="conectar()" fontWeight="normal"/>
        </mx:FormItem>
      </mx:Form>
    </mx:VBox>
    <mx:VBox width="100%" height="100%">
      <mx:HBox width="100%" height="100%">
        <mx:VBox height="100%">
          <mx:Canvas left="10"
                 top="85"
                 width="160"
                 height="120"
                 backgroundColor="#000000">
            <mx:UIComponent width="100%" height="100%" id="uiCaixaDoVideo"/>
          </mx:Canvas>
          <mx:Button id="btPublicar"
                 label="Publicar WebCam"
                 click="publicar()"
                 toggle="true"/>
          <mx:DataGrid id="datagridUsuarios" width="100%" height="100%">
            <mx:columns>
              <mx:DataGridColumn headerText="Usuários" dataField="USER_NOME"/>
            </mx:columns>
          </mx:DataGrid>
        </mx:VBox>
        <mx:VBox height="100%" width="100%">
          <mx:TextArea id="areaMensagem"
                 width="100%"
                 height="100%"
                 borderStyle="none"
                 alpha="0.63"
                 editable="false"/>
          <mx:HBox width="100%">
            <mx:TextInput id="mensagem" width="100%" enter="enviarMensagem()"/>
            <mx:Button label="Enviar" click="enviarMensagem()"/>
          </mx:HBox>
        </mx:VBox>
      </mx:HBox>
    </mx:VBox>
  </mx:ViewStack>
</mx:Application>

Basicamente o funcionamento é o seguinte: Quando clicar o em conectar, é criado uma instancia do NetConnection e enviado junto o nome da pessoa que esta conectando. Assim que a classe que criamos receber esta conexão, ela replica a todas as todas as conexões enviando a lista de usuários conectados. Estalista é recebida pelo método listaUsuarios do Flex.

No Red5 é verificado se foi enviado o nome e e aceita a conexão. Assim que a conexão for aceita, o Flex cria uma instancia do SharedObject e da play no canal publishVideo para quando alguém publicar um vídeo já estar instanciado.

A instancia do SharedObject é responsável pelo chat. para enviar uma mensagem, utiliza-se o método send, passando como parametro a o método que irá receber a resposta e a mensagem.

Quando clicamos em “publicar vídeo!”, uma instancia do NetStream é criada e publicamos no mesmo canal que foi dados play na lista acima.

Abaixo segue o exemplo finalizado, mais para testar terás que possuir um servidor de Red5.

Fonte do aplicativo Flex esta aqui.
O Aplicativo confDemo compilado para ser depositado no Red5 esta aqui.