Testando sua Webcam com Flash Communication Server/Flash Media Server

O Flash Media Server/Flash Communication Server é um servidor de stream desenvolvido pela Macromedia, com ele pode-se desenvolver aplicativos dos mais variados como complexas videoconferências, chats, stream de audio, de video e o que mais a imaginação permitir.
Veremos com o tempo como desenvolver uma aplicação complexa e robusta usando o FMS/FCS, no entanto, vou procurar mostrar como fazer isso sem usar os componentes prontos do Flash.

Instalando e criando sua primeira aplicação em FlahCom
Tendo o FMS/FCS instalado corretamente na sua máquina ou no servidor, vamos testar a conexao e criar um pequeno aplicativo que testará sua webcam

Abra um novo documento no Flash, aperte F11 para abrir a biblioteca, depois insira um novo item na biblioteca (New Video) como na imagem abaixo:

Inserindo novo video

Arraste este item para o palco do Flash, dê o nome de estância de “aovivo”.
Aperte F9 para abrir a janela de Actions.
criamos uma variavel para conexao.

ActionScript

  1. var teste_nc:NetConnection = new NetConnection();

testando a conexao.

ActionScript

  1. teste_nc.onStatus = function(info) {
  2.     trace("Level: "+info.level+"   Code: "+info.code);
  3. };

Conectando ao servidor FMS/FCS

ActionScript

  1. teste_nc.connect("rtmp://dominio");//para localhost use rtmp:/aplicacao

Pegando as imagens da webcam

ActionScript

  1. var teste_cam:Camera = Camera.get();

Inserindo as imagens da webcam na istância de video criada

ActionScript

  1. aovivo.attachVideo(teste_cam);

O código completo:

ActionScript

  1. var teste_nc:NetConnection = new NetConnection();
  2. teste_nc.onStatus = function(info) {
  3.     trace("Level: "+info.level+"   Code: "+info.code);
  4. };
  5. teste_nc.connect("rtmp://dominio");//para localhost use
  6. var teste_cam:Camera = Camera.get();
  7. aovivo.attachVideo(teste_cam);

Teste o filme (ctrl+enter) e se tudo estiver certo o swf lhe perguntará se poderá acessar sua webcam, aceitando você verá sua webcam funcionando.
veja o teste

***UPDATE*** 18/02/2006
Quando você usa o método Camera.get(); automaticamente o Flash Player mostra ao usuario a opção de permitir ou negar o acesso do flash a webcam.
Nisso podemos saber se o acesso foi ou não permitido usando a função onStatus posteriormente como no seguinte exemplo:

ActionScript

  1. var client_cam = Camera.get();
  2. client_cam.onStatus = function(infoObj:Object) {
  3.             switch (infoObj.code) {
  4.             case 'Camera.Muted' :
  5.                 trace("Camera negada");
  6.                 break;
  7.             case 'Camera.Unmuted' :
  8.                 trace("Camera accessada");
  9.                 break;
  10.             }

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, Flash Media Server, Flash Platform, Principal, RIA

29 comments


  1. Amigo,

    Bem legal este tutorial. Valeu!!!

    Estou precisando de um Help em um componente que estou criando.. Vc poderia me dar uma força?

  2. Roger

    Olá, ótimo artigo!!! me ajudou muito no que estou fazendo. Mas preciso saber como fazer para parar a conexão de video. Valeu..

  3. Ola Roger, você pode usar isso para cancelar a cam

    aovivo.attachVideo(false);

    ou mostrar a janela de autorização do flash player

    System.showSettings(0);

    ou ainda parar o stream usando o metodo pause da classe NetStream:

    var nc:NetConnection = new NetConnection();
    nc.connect(“rtmp://localhost/app”);
    var ns:NetStream = new NetStream(nc);
    video.attachVideo(ns);
    ns.pause();

    Até mais

  4. Roger

    Valeu Leonardo. Estou começando com o flashcom e não tenho muita experiência, a dica que vc me deu resolveu o problema, mas estou tendo duficuldades em fazer a integração cliente/atendimento. Não quero usar o componente AVPresence, estou montando um atendimento online com VideoChat, estou usando os componentes do flashCommunication, e preciso de fazer com que o cliente veja a cam do atendente, mas quando eu entro no site os clientes não enchergam a cam do atentente ela fica no instante do login, equanto quem entra na cam do atendente está vendo tudo. Como faço para resolver este problema? dá uma olhada no sistema se vc puder, aguardo sua ajuda.
    http://www.veadeiros.com.br/flashcom/chat.html

    Obrigado

  5. Roger

    Esqueci do login

    nome:123
    senha:123

  6. Roger

    Olá Leonardo,

    Valeu a dica, está quase pronto, falta alguns detalhes mas tá indo bem. Montei o lado do cliente e o lado do servidor, agora estou montando um esquema do lado do servidor que possa controlar o chat,tipo tirar alguem da sala,parar a conexão do cliente, se vc tiver uma dica de como tirar alguém da sala eu agradeço, no mais valeu a ajuda até agora.
    Um abraço e
    parabéns pelo ótimo trabalho.

    Rogério Corrêa

  7. Roger

    Olá,
    Estou precisando colocar uma galeria de videos no meu atendimento online, como faço para carregar um video dentro do servidor flashcom, que pasta coloco o arquivo FLV, como faço para criar um alias para o arquivo?enfim preciso de uma dica para isso.Agradeço desde já.
    Roger

  8. eu escrevi um artigo fazendo isso com audio, com video ja esta saindo do forno 😉

    http://www.dotpix.com.br/~leo/?p=26

    Ate mais
    Leonardo França

  9. Roger

    Olá, estarei esperando o video sair do forno, eu agradeço suas dicas e continue com seu ótimo trabalho.
    um abraço
    Roger

  10. Roger

    Olá Leonardo,
    VC tem algum exemplo ou dica de como eu poderia restringir a conexão para apenas duas pessoas, e retornar uma menssagem caso a sala esteja cheia?
    Atenciosamente
    Roger

  11. vc pode determinar isso diretamento no main.asc.

    por exemplo:

    usuarios = [“user_1”, “user_2”];

    application.onAppStart = function ( ) {
    users_so = SharedObject.get(“users”);
    };

    application.onConnect = function (client, name) {
    if (usuarios.length > 2) {
    application.rejectConnection(client, {msg:”Sala cheia.”});
    }
    client.id = usuarios.pop( );
    application.acceptConnection(client);
    };

    application.onDisconnect = function (client) {
    usuarios.push(client.id);
    users_so.setProperty(client.id, null);
    };

  12. Olá, Vc ministra cursos de flashcom? Estou querendo me aprofundar nessa tecnologia.Se tiver por favor me avise ou me passe um lugar onde poderia fazer. Moro em Brasília mas vou onde for preciso para fazer o curso.
    Atenciosamente

    Roger

  13. Olá Leonardo

    Serei mais um a te parabenizar pelos artigos. Parabéns!

    Gostaria de uma ajuda se vc puder.
    Estou montando um site com video chat. Gostaria de colocar instancias variaveis vindas de um PHP na conexão do video.

    client_nc.connect(“rtmp:/fixo/variavel”);

    E na publicação do video.

    out_ns.publish(“variavel”);

    Eu consegui resgatar a Variavel para ser mostrada num “Dynamic Text”. Mas para a publicação e conexão tá difícil.
    Sou mais um daqueles q aprenderam “metendo a cara” e “fuçando” tutoriais. Caso minha dúvida seja muito ridícula para vc, por favor perdoe minha ignorância.

    Abraço

  14. client_nc.connect(“rtmp:/fixo/”+variavel);
    e
    out_ns.publish(variavel);
    essa “variavel” será o valor que vc pegou do PHP por exemplo

  15. Obrigado pela resposta leonardo, mas continuo sem conseguir. SErá q vc pode me ajudar?

    O meu código está assim:
    —————xxxxx—————
    import mx.controls.Label;
    System.useCodepage = true;
    //////////////////////////
    var nomes:String = “”;
    var receber:LoadVars = new LoadVars();
    receber.onLoad = function($sucesso){
    trace($sucesso);
    if($sucesso == true){
    nomes += this.variavelphp;
    }else{
    nomes = “erro”;
    }
    }
    receber.loadvariaveis.php”);
    ///////////////////////////
    var teste_cam:Camera = Camera.get();
    aovivo.attachAudio(Microphone.get());
    aovivo.attachVideo(teste_cam);
    ///////////////////////////
    function doConnect() {
    client_nc = new NetConnection();
    client_nc.onStatus = function(info) {
    trace(“Level: “+info.level+” Code: “+info.code);
    txt_status.text = “Level: “+info.level+” Code: “+info.code;
    };
    client_nc.connect(“rtmp:/application/”);
    }
    ///////////////////////////
    function publishMe() {
    out_ns = new NetStream(_root.client_nc);
    out_ns.attachVideo(teste_cam);
    out_ns.publish(+this.variavelphp);
    }
    // Connect to the server
    doConnect();
    // Publish the live stream
    publishMe();

    —————xxxxx—————
    Recebo a variavelphp na função no começo do código e joga sem problemas para o texto dinamico. Mas qdo tento recuperar essa mesma variavel para conectar em uma instancia e para dar um nome a pulicação, não vai.

    No php eu tenho:

    $variavellogin = $_SESSION[‘login’];

    print(“&variavelphp=$variavellogin”);
    ?>

    Mas uma vez obrigado pela resposta.

  16. Onde vc esta chamando o arquivo php?

  17. Eu estava chamando lá no começo.

    receber.load(“variaveis.php”);

    Eu consegui resolver. Fiz um loadvar p/ kda comando. Um p/ texto dinamico, um p/ conectar e um p/ publicar, não sei se é o melhor jeito, mas por enquanto está funcionando.

    Obrigado pela ajuda Leonardo. Sucesso…

    Abraço

  18. Olá denovo Leonardo. Como vão as coisas?

    Pow,… Estou com outro pepino, será q vc pode me ajudar? Estou fazendo um chat, mas não consigo configurar o p/ enviar a msgm. Só consigo enviar pelo botao. Tenho esse código:

    k = new Object();
    k.onKeyDown = function() {

    if (Key.getCode() == Key.ENTER && msg_ti.text != undefined && msg_ti.text != “”) {

    //nao chama a funcao onsend, mas
    //se eu coloco trace qqer coisa funciona
    onSendMessage(msg_ti.text); }
    };
    Key.addListener(k);

    E na função eu tenho:

    private function onSendMessage() {

    var msg = msg_ti.text;
    if (msg == “”){ return; }

    var fromwho = _username;

    _chatSO.send(“chatMsg”, msg, fromwho);

    msg_ti.text = “”; }

    É isso. O q eu estou fazendo errado Leonardo?
    Desde já, obrigado!

  19. Olá Leonardo! será que você poderia fazer um tutorial ensinando a fazer um chat de bate-papo com limete de usuários e tudo mais, um que fique bem interessante?

  20. realmente to devendo um tuto assim ;o) logo logo esterei colocando um no ar

  21. Sidney Lacerda

    Oi Leonardo!

    Estou tentando colocar minha imagem de webcam em meu site não consigo inserir a imagem… Como posso fazer isso?

  22. Excelente sugestão a do Marcio, Leonardo.

    Aliás, eu consegui resolver aquela “pendenga”. Agora eu to pegado no client.call();

    Mas deixa eu tentar mais um pouquinho. Qualquer coisa eu volto a chatear. Abraço

  23. Jadson

    Ola Leornado,

    Você sabe se é possível capturar imagem de uma câmera com o RED5?
    Estou desenvolvendo uma aplicação de monitoramento para segurança na qual usuário remotamente pela internet vejam o que está se passando em outro ambiente. Inicialmente pensei na seguinte solução. O RED5 capturaria imagens de N câmeras e tramitiria o stream dos vídeos, clientes em flash se conectariam ao RED5 e pegariam o stream de vídeo.

    Cliente Flash1 –>
    Cliente Flash2 –> RED5

    Até agora nas minha pesquisa só encontro código parecidos com o seu exemplo no qual o cliente flash
    (Action Script) captura imagens da web cam. Mas não era isso que eu queria.

    Desde já agradeço.

  24. Bruno Salgado

    Parabéns pelo tutorial!
    Você poderia me ajudar, por favor?
    Estou tentando importar um vídeo de um FMS que contratei na Locaweb mas exibe um erro “Failed to open [URL]”.
    Não sei o que fazer.

    Obrigado,
    Bruno Salgado

  25. importar o video direto do servidor? se for isso nao é possivel

  26. rafael

    Amigo, parabens pero tutorial, mas sou iniciante e gostaria de uma ajuda, como eu faço para o meu flash pegar a imagem da outra pessoa no chat e mostrar pra mim, esse dai pega a minha e aparece no swf, precise montar um chat onde aparecam todas as webcams de quem estiver no chat, tem como????

  27. Rafael não tive muito tempo para postar um código bem explicado mais da uma olhada neste aki.

    client_nc = new NetConnection();
    client_nc.onStatus = function(info) {
    if(info.code==”NetConnection.Connect.Success” or “NetStream.Publish.BadName”){
    trace(info.code);
    };
    client_nc.connect(“rtmp://localhost/max”);

    conecta();

    uid = “max”;

    //liga camera e microfone e envia para a rede

    var publish_ns:NetStream = new NetStream(_root.client_nc); // Open stream within connection.
    var active_mic:Microphone = Microphone.get();
    var my_cam:Camera = Camera.get();
    my_cam.setMode(vidWidth, vidHeight, vidFps);
    my_cam.setQuality(vidBandwidth, 90);
    publish_ns.attachAudio(active_mic);
    publish_ns.attachVideo(my_cam);
    publish_ns.publish(uid);

    my_cam.onStatus = function(infoObj:Object) {
    if (my_cam.muted) {
    //trace(“User denied access to Camera”);
    msg_cam.text=”Você não aceitou logar a Camera!”;
    System.showSettings(0);
    }else{
    msg_cam.text=”Obrigado por aceitar a Camera!”;
    }
    };

    //recebe a imagem e o som enviado anteriormente

    var play_ns:NetStream = new NetStream(_root.client_nc);
    var my_video:Video;
    my_video.attachVideo(play_ns);
    play_ns.play(uid);

Leave a Reply