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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<meta charset="UTF-8" /><script type="text/javascript">// <![CDATA[ function verificar_GetUserMedia() { return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia); } if (verificar_GetUserMedia()) { } else { alert('O seu navegador não suporta o método getUserMedia'); } // ]]></script><script type="text/javascript">// <![CDATA[ var em_caso_de_erro = function(erro) { console.log('O seu navegador não suporta o método getUserMedia!', erro); }; window.navigator.webkitGetUserMedia({video: true, audio: true}, function(midia_local) { var video = document.querySelector('video'); video.src = window.webkitURL.createObjectURL(midia_local); video.width = 400; video.height = 300; }, em_caso_de_erro); // ]]></script> |
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/
Valeu pessoal, até a próxima!
Author Description
There are 6 comments. Add yours