Como acessar a câmera no navegador com HTML5

Aprenda a abrir e usar a câmera de seu computador no navegador, usando HTML5 e Javascript. Com HTML5 e javascript é possível abrir a sua câmera usando o browser.

Por Programação Pular para comentários
Como acessar a câmera no navegador com HTML5

O HTML5 vem trazendo muitas novidades. E não só com relação a novas tags, ou atributos. Com HTML5 + JavaScript podemos até mesmo criar aplicações para smartphones, através de ferramentas com PhoneGap. Neste tutorial, vamos ver como acessar a câmera do seu computador, smartphone ou tablet, via browser. Antes de começar, vale lembrar que isso só funciona em navegadores atuais (Chrome, Fifefox) que suportam muito bem HTML5 + API.

Vamos ao script JS responsável pela manipulação da câmera:

var video, canvas, context, localMediaStream;

//Tira foto.
function snapshot()
{
??? if (localMediaStream)
??? {
??????? context.drawImage(video, 0, 0, canvas.width, canvas.height);
??? ??? document.querySelector('img').src = canvas.toDataURL('image/webp');
??? }
}

//Fallback de erro a fun??o getUserMedia.
function userMediaError()
{
}
?
window.onload = function()
{
??? if(!!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia))
??? {
??? ??? video = document.getElementById('video');
??? ??? canvas = document.getElementById('canvas');
??? ??? context = canvas.getContext('2d');
??? }
??? else
??? {
??? ??? alert("Desculpa! Seu navegador n?o apresenta suporte.");
??? }
};
?
navigator.getMedia = ( navigator.getUserMedia ||
??? ??? navigator.webkitGetUserMedia ||
??? ??? navigator.mozGetUserMedia ||
??? ??? navigator.msGetUserMedia);
?
navigator.getMedia({video: true}, function(stream)
{
??? video.src = window.URL.createObjectURL(stream);
??? localMediaStream = stream;
}, userMediaError());

Logo após o evento window.onload, nós definimos o tipo do getMedia, e logo depois iniciamos a câmera. Neste momento será solicitado a permissão para acessar a câmera.A função snapshot é responsável por tirar as fotos. Com a função drawImage do objeto context, pegamos a imagem atual da câmera, exibida no elemento DOM video, definimos a posição e o tamanho da foto. Então selecionamos o elemento DOM img-photo a foto capturada.

Estrutura HTML:


???


???


??? Como acessar a câmera no navegador com HTML5


???

 

Confira o resultado: (veja o exemplo funcionando)

Como acessar a câmera no navegador com HTML5
Nícolas testando o funcionamento

Download dos arquivos:
Como acessar a câmera no navegador com HTML5

Também pode ser visto no meu blog

Mais sobre: html5, javascript
Compartilhe com seus amigos:
Leandro Dias
Leandro Dias Leandro Dias é programador e desenvolvedor web. Tem experiencia em instalação, criação de temas e plugins para Wordpress. Possui conhecimentos em SEO e usabilidade.
Leandro Dias - Web e Programação
FACEBOOK // TWITTER: @le17i
Quer conversar com o(a) Leandro, comente:
Carregar comentários
Últimas notícias