Um exemplo simples que captura a imagem da Webcam e salva em uma pasta no Servidor. Este exemplo utiliza a classe ImageSnapshot para capturar uma imagem baseado em um objeto. Ele esta gerando um JPG com 85% de qualidade, configurada em new JPEGEncoder( 85 ). Você também poderá usar a classe PNGEncoder() se quiser salvar em PNG.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="#f6f6f6" creationComplete="application1_creationCompleteHandler(event)" viewSourceURL="231/index.html"> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.events.FlexEvent; import mx.graphics.ImageSnapshot; import mx.graphics.codec.JPEGEncoder; private var imagemBase64:String protected function application1_creationCompleteHandler(event:FlexEvent):void { var camera:Camera=Camera.getCamera(); camera.setMode( 320, 240, 10 ); webcam.attachCamera( camera ); } private function capturarImagem():void { // JPEGEncoder você configura a qualidade do JPEG No caso esta 85% var imagemWebcam:ImageSnapshot=ImageSnapshot.captureImage( webcam, 0, new JPEGEncoder( 85 )); imagemBase64=ImageSnapshot.encodeImageAsBase64( imagemWebcam ); imgWebcam.source=imagemWebcam.data btSalvar.enabled=true; } protected function salvar():void { var loader:URLLoader = new URLLoader(); loader.addEventListener(Event.COMPLETE, loader_completeHandler); var variables:URLVariables = new URLVariables(); variables.imagem = imagemBase64; var request:URLRequest = new URLRequest(); request.method = URLRequestMethod.POST; request.data = variables; request.url = "/code/231/recebeImagem.php"; loader.load( request ); } private function loader_completeHandler( event:Event ):void { var resposta:String = (event.currentTarget as URLLoader).data; if ( resposta == 'erro' ) Alert.show( "Erro ao salvar imagem", "Erro" ); else link.text = "http://flex.eduardokraus.com/code/231/" + resposta } protected function btVisualizar_clickHandler(event:MouseEvent):void { capturarImagem(); } protected function btSalvarDireto_clickHandler(event:MouseEvent):void { capturarImagem(); salvar(); } protected function btSalvar_clickHandler(event:MouseEvent):void { salvar() } protected function link_clickHandler(event:MouseEvent):void { navigateToURL( new URLRequest( link.text )); } ]]> </fx:Script> <!-- Texto Superior --> <s:Label x="10" y="10" fontSize="20" fontWeight="bold" text="Capturar imagem da WebCam e salvar com PHP"/> <!-- Barra Horizontal --> <mx:HRule x="10" y="49" width="690"/> <mx:VideoDisplay id="webcam" x="10" y="59" width="320" height="240"/> <s:Image id="imgWebcam" x="338" y="59" width="320" height="240"/> <mx:Button id="btVisualizar" x="10" y="307" label="Pré Visualizar" click="btVisualizar_clickHandler(event)"/> <mx:Button id="btSalvarDireto" x="122" y="307" label="Visualizar e Salvar" click="btSalvarDireto_clickHandler(event)"/> <mx:Button id="btSalvar" x="338" y="307" label="Salvar no servidor" enabled="false" click="btSalvar_clickHandler(event)"/> <s:Label x="10" y="338" color="#0048FF" textDecoration="underline" id="link" click="link_clickHandler(event)" useHandCursor="true"/> </s:Application>
Veja como ficará este exemplo compilado.
Source aqui.
new JPEGEncoder( 100 )
Gostou? Não esqueça de curtir!
Ou compartilhe o link com seus amigos
Siga-me
[...] import mx.controls.Alert; import flash.net.navigateToURL; import mx.rpc.events.ResultEvent; Leia mais no post do autor... Veja o post original no blog do autor [...]
Esta dando esse erro na minha tentativa de aplicar.
http://felipebusiness.hostmach.com.br/php/[object%20Object]
Seu swf de exemplo não esta carregando aqui acima.
Desculpe a pergunta, mas como faço pra colocar isso em swf? Tenho q usar o adobe flash ou o teria q usar outra ferramenta para a tecnologia "flex"? Como disse entendo de PHP mas não entendo de Flex ou Flash :(
Obrigado!
PS. O tutorial está muito bom e é algo que com certeza muita gente vai usar. Vlw!
@Corintho Você pode faze-lo em Flash sem problema, eu fiz em Flex que é mais prático e rápido e domino.
Agora para isso terás que conhecer Flash ou Flex. No caso do Flex, você terá que usar o Flex Builder 3, que tem versão Free.
Quando vou compilar o projeto da o seguinte erro:File not found: file:/H:/Documents%20and%20Settings/Administrador/Meus%20documentos/Downloads/post231/bin-debug/main.swf
Como faço pra resolver esse problema
Desde ja agradeço
@thiagoLima Certamente esta acontecendo algum erro na compilação do seu projeto. Verifique no projeto se existe la a pasta bin-debug e se dentro dela tem um arquivo swf.
Cara num tem esse script funcionando em algum lugar não!?
que eu tou baixando o Flex Builder mas vai demorar dias
Aqui no Blog esta rodando...
Olá Eduardo,
Pra rodar esse aplicativo eu preciso do servidor de cfc ou nada disso, eu preciso desenvolver um sistema de cobrança on-line onde a pessoa do caixa captura a imagem do cliente e envia para o dpto de cobrança na matriz, isso dentro da intranet da empresa. Ficarei grato pela dica.
Não, somente de um servidor PHP.
Eduardo,
No flash, eu insiro isso como action script? Desculpe minha ignorância nisso, é que não trabalho com flash/flex.
grato.
Consegui, utilizando o flashdevelop.
obrigado.
Olá Eduardo,
Eu preciso usar esta solução num aplicativo Air. É possível salvar a imagem numa pasta no computador do usuário sem precisar do PHP (já que estou usando o Air)?
Desde já agradeço qualquer ajuda.
@Silva Sim, use a classe File do AIR e salve a imagem em qualquer pasta.
Eduardo, estou usando perfeitamente esta aplicação sua, mas gostaria de capturar foto em 3x4, teria como me ajudar?
Agradeço antecipadamente.
@André Simples, apenas defina a area de captura assim:
<mx:VideoDisplay id="webcam" width="120" height="150"/>
de novo eu..... =]
Simples, apenas defina a area de captura assim: ...
Como eu faço para passar uma variavel da pagina para o recebeimagem.php?
pois tenho um formulario em html/php, cujo um campo é o ID e gostaria de passar o ID na hora de salvar.
desde já agradeço.
@Jonnas
Adicione a variável a lista de <strong>request</strong>.
<mx:request>
<IMG>{imagemBase64}</IMG><
<ID>{variavelID}</ID>
</mx:request>
Eu não entende nda de Flash ou FLEX, voce poderia me ajudar, como eu adiciono a variavel a lista de requst? como passo o valor da variavel em php ou html para o flex?
Qual erro que acontece?
Olá, tudo bom?!?!
Eu não estou conseguindo fazer que webcam seja capturada.
Diferente do seu.
Será que há algum erro em meu código? Ou da Forma que estou fazendo?
site--> http://atalaiasdosenhor.com.br/teste/lol/bin-debug/lol.html
COMO FARIA ISSO USANDO ASP?
@Cleverton Analise o código PHP e faça em ASP.
@Wellington Testei e esta funcionando
Eduardo poderia me explicar como fazer para esse código rodar mesmo q eu não esteja logado com a internet?
Precisava desse código pra uma Intranet ..
Como faço para ele rodar em LocalHost ?
Aguardo resposta ..
Valeu .
Funciona perfeitamente em independente se esta em Intranet ou extranet. Não existe diferença!!!!
eduardo consegui fazer rodar em localhost mais estou com dificuldade em relação a onde o arquivo é salvo .
ele esta abrindo atravez de um link pelo seu site poderia me dizer qual alteração deve ser feita para salver em um diretório do meu servidor ?
Valeu .
Eduardo favor desconciderar minha pergunta ..
ja solucioneio o problema ..
era sóprestar mais atenção ...
Valeu aeee ..
abraço.
Fala Eduardo, tdo tranquilo?
bomm, eu testei no meu macbook porém não funciona, sabe me dizer pq nao funciona no mac?
valeu!
não aparece a imagem, a permissao nao deve acessar a webcam do mac, tem uma alternativa na erb que vi que corrigi isso no flash pode adaptar pra flex será?
abraços
nao conseguir salvar a imagem em localhost, ele ta salvando no servidor do seu site, e quando eu altero pra localhost nao salva. desde ja meus agradecimentos!
@James O Exemplo aponta para http://code.mxml.com.br/231/recebeImagem.php. Altere isso para uma URL relativa ao seu flash. Se em Localhost não salva tens problema de erro no PHP.
Veja os logs que la esta o erro.
Olá Eduardo, estou iniciando no mundo do flex, usando o flex sdk 3.5, terias uma dica de como complidar esse teu exemplo no sk?
Grato
Ola!!
Baixei os fontes mas sinceramente não sei por onde começar... alguém pode me ajudar?
Tenho o WAMP2.0i instalado e tenho vários aplicativos que rodam normal, irei fazer um que ira receber a imagem da webcam e gravar no BD...
Como faço para usar??
Por favor me ajudem, esse material e de excelencia!!
Tenho que configurar algum arquivo? se sim quais, por favor...
...tem q fazer as telas em flash?
Olá, o Scrip roda mas não chama a webcam grava uma imagem toda preta na pasta.
Ele não dá o prompt pedindo a permissão da camera e não captura nada.
O que poderia estar errado?
Duas opções:
1° A sua webcam não esta disponível;
2° Você bloqueou o acesso da Webcam ao Flash player. Clique com o botão direito sobre o Flash Player, vá em configurações e selecione privacidade. Ali tem que estar marcado o "Permitir" e o "Lembrar".
Eduardo bom dia, eu coloquei este seu exemplo em minha aplicação nele eu gravo no banco, o endereço onde está a foto, tudo funciona tranquilamente, o problema é que quando ja tem uma foto para o cadastro, eu preciso limpar o cach para ele poder mostrar a nova. como eu contorno isso?
Chame assim: pasta/arquivo.jpg?nocache=<strong>{numAleatório}</strong>
Altere o <strong>numAleatório</strong> por um número aleatório.
[...] http://www.bytearray.org/?p=90 http://blog.mxml.com.br/capturar-imagem-da-webcam-e-salvar-com-php [...]
Olá, como eu faria para integrar essa imagem um formulário onde ela poderia ser enviada por e-mail ou enviar o link do endereço dela no servidor?
Veja em http://blog.mxml.com.br/submetendo-um-formulario-no-flex-usando-o-metodo-get-com-php
Olá Eduardo,
Estou com um problema que não consigo resolver de forma alguma. Se eu executar o código fonte de minha máquina, que é onde encontra-se o servidor web, o código funciona 100%. Porém se eu acessar este código de outra máquina a imagem não é salva no meu servidor e não dá mensagem nenhuma.
O que posso estar fazendo de errado ?
Verifique se não estas configurando a URL de envio para Localhost.
Ola teria como vc passar esse codigo todo em php.....
So para eu ter uma ideia de como é...
Obrigado
Os códigos estão todos disponíveis no site.
È possivel capturar e exibir foto tirada da webcam dentro de uma página php?
baixei o código aki e instalei o flex builder 3, tudo certinho, o código ta sem nenhum erro, mas quando rodo a tela fica preta e nao mostra a imagem da webcam, sabes me dizer o que é, se eu abrir no seu tutorial funciona normal!
Eduardo, quero lhe agradeçer, ótimo post, consegui rodar agora. ficou muito bom, adapatei as minhas necessidas e ficou ótimo, apesar de não saber programar em flex consegui adaptar certinho, espero que continue com esse trabalho ótimo. Parabens
Parabéns pelo artigo. Tudo funciona perfeitamente. Tenho apenas uma pergunta. Dá para melhorar a qualidade da imagem? Usando o software da cam ela fica bem nitida, já no flash fica meio embaçado.
Agradeço a cordial atenção.
@Wender podes melhorar assim:
var camera:Camera=Camera.getCamera();
webcam.setMode(320, 240, 30);
webcam.attachCamera( camera );
Agora a Webcam tem que ter qualidade boa, se não sairá ruim também.
Kraus ,
Gostaria de saber se é possivel eu aplicar essa função no PHP e gerar um site na rede para que as pessoas possam vizualizar minha webcam ao vivo ?????? Obrigado
@Douglas Não, PHp não da para fazer live streaming. Para isso terás que ter um servidor de FMS (http://influxis.com/) ou servidor dedicado com Red5(http://code.google.com/p/red5/)
Eduardo, desculpe minha ignorância em relação ao Flex, mais u to importando o projeto e quando rodo o main.mxml ele da erro "File not Found" main.swf
Como proceder?
@Rayfcrols Deve estar havendo erros quando compilas seu projeto. Se o main.swf não existe significa que o main.mxml não foi compilado por algum erro.
Correto, é porque estava importado eu projeto, apos excluir o proj e criar uma apenas usando seu script a aplicação rodou. PS: a aplicação captura a imagem, gera o foto, mais não salva no servidor fica so dando erro al salvar foto.
Ola. Edita o caminho /code/231/recebeImagem.php que esta no seu código fonte.
Olá Eduardo! Primeiramente parabéns pelo blog. É de boas iniciativas como a sua que precisamos para lutar por nossos objetivos.
Aproveitando, gostaria de saber como posso criar algo semelhante ao seu exemplo só que ao invés de enviar para uma pasta qualquer, gostaria de poder enviar essa imagem por email e postar no facebook e também adicionar uma moldura personalizada sobre a imagem capturada. Isso é possível? Grande abraço!
@Anderson. Com esta imagem você pode fazer com ela o que precisar.
Eduardo, por favor estou desenvolvendo um sistema de controle de acesso em PHP MySql, e estou com dificuldade para implemtar esta rotina de capturar a imagem de uma webcam e salvar no servidor remoto. Como faço ? Pois através desta sua aplicação não to sabemdo fazer funcionar, quando testo em seu site o exemplo aparece tudo preto e não captura a imagem da webcam.
Preciso de um script pronto que possa adaptar ao meu sistema. Tem commo me ajudar nisso ? Abraço. Ailton.
Ola eduardo, muito bom cara, estava procurando esta funcionalidade a tempos... Porém eu sou iniciante ainda, e não entendo nada de flex, uso o flash 8 ainda, antes de começar a mexer nesta funcionalidade preciso saber se funciona programando com o flash 8 ou preciso fazer o download do flex. antes de mais nada ja estou fazendo o download para aprender mais um prog bom...
Obrigado!! Continue assim, ajudando a quem precisa. abraçoss!
@Junio É necessário que você saiba programar em AS3 pelo menos para conseguir algo com este exemplo. Eu só sei programar em AS3.
como colocar isso na pagina do html
@Cesar É necessário que você compile o fonte do Flex e depois importe em seu site. O resultado é um SWF.
Tambem estou com dificuldade para implementar este codigo no meu localhost. nao entendo nada de flex e isso me impede. Gostaria de saber mais detalhes sobre esse codigo, eu estou trabalhando com a linguagem PHP em mvc.
Sou aluno da unochapecó e isso me ajudaria muito.
Obrigado pela atençao.
Pegue o SWF do próprio site. Esta em http://flex.eduardokraus.com/code/231/main.swf
e nao t5em como vc mandar
o swf que vc gera pq aqui nao funcionou
Olá Eduardo,
sabe me dizer se existe alguma restrição quanto ser aplicado em um servidor linux,
pois a imagem é criada mas acaba ficando em branco ou toda distorcida. Comparei a string com a imagem codificada a nível de interface e ao chegar no php e, estavam iguais... não consegui chegar a uma solução. Obrigado.
Sem restrição. Algumas versões de Adobe Flash Player não fecha a caixa de permissão.
Boa Noite Eduardo!
Parabéns antes de tudo.
Estou com um problema, estou fazendo tudo como você indicou, aparece a web, clico pra salvar, vai tudo direito, mas não salva a imagem,já verifiquei o endereço, isso acontece tanto no localhost como numa host online.
Tem como pegar esta imagem e imprimir atravéz de um template, sem ter que salvá-la em disco?
Boa tarde!
eu copiei e colei esse código no Fb. não conheço o flex, gostaria de saber se preciso de mais alguma coisa para ele rodar, e deu esses erros aqui.
Description Resource Path Location Type
'webcam': identifier and class may not have the same name. webcam.mxml /webcam/src line 93 Flex Problem
/---------------------------------------------------------
Description Resource Path Location Type
Could not resolve <s:Image> to a component implementation. webcam.mxml /webcam/src line 98 Flex Problem
Só é possivel compilar o codigo acima no Flex? ou no Flash tb dá?
Boa tarde Eduardo!
Não conheço muito bem AS
Gostaria de saber como posso testar isso em localhost pois aqui não abre.
Desde já agradeço a atenção
Ola, Eduardo como faço pra pegar a imagem tirada e guarda em uma vareavel!
Muito Bom o script parabens, so uma obs.
<s:Image
talves de erro em algumas versao do flex para quem nao sabe como solucionar é só trocar por:
<mx:Image
Eduardo Kraus,
como eu faço para usar com java web em página jsp?
se tiver como você me mandar um exemplo, depois passo o e-mail. Obrigado.
Curti, muito bom
vlww
o navegado não ta mais ligando a camera, tenho esse script rodando desde 2009, mas agora ele não liga mais a camera, até aki no blog, que antes abria, agora não abre mais
Tenta reinstalar o Flash player ou verificar se a sua Câmera é identificada pelo Flash Player.