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:


   


   


   


   

 

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

Recomendamos ler:

Acompanhe as últimas notícias de tecnologia aqui no Oficina da Net. Sempre trazendo conteúdos novos e produtos interessantes.

Comentários:
Carregar comentários