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.

[as]var teste_nc:NetConnection = new NetConnection();[/as]

testando a conexao.

[as]teste_nc.onStatus = function(info) {
trace(“Level: “+info.level+” Code: “+info.code);
};[/as]

Conectando ao servidor FMS/FCS

[as]teste_nc.connect(“rtmp://dominio”);//para localhost use rtmp:/aplicacao[/as]

Pegando as imagens da webcam

[as]var teste_cam:Camera = Camera.get();[/as]

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

[as]aovivo.attachVideo(teste_cam);[/as]

O código completo:

[as]var teste_nc:NetConnection = new NetConnection();
teste_nc.onStatus = function(info) {
trace(“Level: “+info.level+” Code: “+info.code);
};
teste_nc.connect(“rtmp://dominio”);//para localhost use
var teste_cam:Camera = Camera.get();
aovivo.attachVideo(teste_cam);[/as]

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:

[as]var client_cam = Camera.get();
client_cam.onStatus = function(infoObj:Object) {
switch (infoObj.code) {
case ‘Camera.Muted’ :
trace(“Camera negada”);
break;
case ‘Camera.Unmuted’ :
trace(“Camera accessada”);
break;
}[/as]

Flash Media Server Developer Center
http://www.macromedia.com/devnet/flashmediaserver/

FlashComGuru
http://www.flashcomguru.com/

FlashCom.com.br
http://www.flashcom.com.br/

29 thoughts on “Testando sua Webcam com Flash Communication Server/Flash Media Server

  1. Roger

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

  2. Leonardo França Post author

    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

  3. 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

  4. 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

  5. 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

  6. Roger

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

  7. 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

  8. Leonardo França Post author

    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);
    };

  9. Roger

    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

  10. Rodrigo

    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

  11. Rodrigo

    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.

  12. Rodrigo

    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

  13. Rodrigo

    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!

  14. marcio

    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?

  15. Sidney Lacerda

    Oi Leonardo!

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

  16. Rodrigo

    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

  17. 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.

  18. 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

  19. 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????

  20. Max Oliveira

    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