Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Aprenda a integrar a sua webcam com o navegador usando html5 e javascript - Kolaborativa

Aprenda a integrar a sua webcam com o navegador usando html5 e javascript

Pessoal,

Neste post vou falar sobre um assunto que está sendo muito falado, que é a integração do navegador com uma webcam, usando apenas javascript e html5. Atualmente, apenas o e o possuem suporte para este recurso. O Firefox Nightly, uma versão em desenvolvimento do , também apresenta este suporte e em breve será adotado pela versão oficial.

Veja o código abaixo:

Este código foi o que eu usei para testar na minha máquina. Ele funciona somente no .

Primeiramente, temos uma função chamada “verificar_GetUserMedia”, que verifica se o navegador possui este recurso. Observe que o usa o método “webkitGetUserMedia”, o , getUserMedia e, por último, o Firefox Nightly, o mozGetUserMedia. Caso o navegador não apresente este suporte, irá exibir uma mensagem na tela “O seu navegador não suporta o método getUserMedia!”.

Após isso, há um vídeo com a sintaxe normal utilizada no html5. O atributo “autoplay” é apenas para que o vídeo comece a rodar logo após de ser ativada a câmera.

Em seguida temos o método “webkitGetUserMedia”. Ele contem 3 argumentos.

O primeiro se refere às entradas que o navegador irá receber, que pode ser áudio (microfone) e/ou vídeo (webcam). No exemplo, apesar de ter selecionado áudio e vídeo, nenhum navegador oferece suporte ainda para microfones.

O segundo descreve o que irá acontecer com o vídeo no navegador, caso este aceite este recurso. Observem que eu defini as propriedades do vídeo, como largura e altura, e URL. É importante notar que o método “window.webkitURL.createObjectURL” cria uma URL simples que pode ser usada para fazer referência a dados armazenados em um arquivo DOM ou objeto Blob. Portanto, ela é temporária. Não tentem rodar este arquivo localmente, sem antes instalar um servidor no seu computador.

O terceiro aponta o que irá acontecer, em caso de falha por algum motivo, ao executar o método “webkitGetUserMedia”.

E pronto!

Clique abaixo para ver este exemplo funcionando no navegador .

http://jsfiddle.net/Dukountra/yPWkj/2/

Confira aqui o tutorial HTML5

Valeu pessoal, até a próxima!

Author Description

dukountra

There are 6 comments. Add yours

  1. 28th setembro 2012 | Tomas Vasquez says: Responder
    acho que é o caso de esperar a tag device ser aprovada pelo W3C. Muitas possibilidades... :)
  2. 21st setembro 2013 | Paulo says: Responder
    Seria fácil implementar neste script a implementação de um botão para tirar a foto com a webcam?
    • 22nd setembro 2013 | entedi4do says: Responder
      Não sabemos responder isso, amigo, mas se você testar e funcionar nos avise que acrecentamos ao post ;)
  3. 17th outubro 2013 | Beatriz says: Responder
    Alguém pode me indicar um servidor urgentemente?
    • 18th outubro 2013 | entedi4do says: Responder
      Depende, para o que vc precisa? Tem o hostinger, que é gratuito com suporte a php, mysql... tem o openshift... ambos gratuitos.
  4. 21st agosto 2014 | Giovanni Gavino says: Responder
    Fala galera, curti muito o exemplo, mas preciso de ajuda. Como faço p entrar em contato com alguem que possa me ajudar?? Estou fazendo um projeto para conclusão de curso e sou muito juvenil em programação.

Join the Conversation