Web Dev Drops

Como Acessar Câmera com JavaScript (Frontal e Traseira)

avatar
Douglas Matoso
Updated at 5/30/2020
Reading time: 4 min.

E aí, pessoal! Neste post vou mostrar como acessar as câmeras do dispositivo em uma página web, via JavaScript, com suporte a múltiplos browsers e sem a necessidade de bibliotecas externas.

Como ter acesso à câmera

Para acessar a câmera (e/ou microfone) do usuário usamos a API MediaStream do JavaScript. Esta API permite acessar o vídeo e áudio capturado por estes dispositivos através de streams.

O primeiro passo é verificar se o navegador dá suporte a esta API:

if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
  // ok, o navegador tem suporte
}

O suporte é até decente nos navegadores modernos (nada de Internet Explorer).

Capturando o stream de vídeo

Para capturar o stream de vídeo, ou seja, a sequência de quadros que está sendo gerada pela câmera, usamos o método getUserMedia do objeto mediaDevices.

Este método recebe um objeto com os tipos de mídia que estamos requisitando (video ou audio) e alguns requisitos. Para começar podemos passar apenas { video: true } para pegar o vídeo da câmera.

const videoStream = await navigator.mediaDevices.getUserMedia({ video: true })

Esta chamada vai pedir ao usuário uma permissão para acessar a câmera. Caso o usuário negue, ela lança uma exceção e não retorna o stream. Portanto ela deve ser feita dentro de um bloco try/catch para tratar esta negação.

Popup de permissão para acessar a câmera

Veja que ele retorna uma Promise, então tem que usar o async/await ou o then.

Requisitos de vídeo

Podemos melhorar os requisitos do vídeo passando informações sobre a resolução desejada e limites de mínimo e máximo:

const constraints = {
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 2560,
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 1440,
    },
  },
}

const videoStream = await navigator.mediaDevices.getUserMedia(constraints)

Assim o stream vem na proporção correta de largura e altura. Se for um celular em modo retrato ele cuida de inverter as dimensões.

Exibindo o vídeo na página

Ok, agora que temos o stream, o que podemos fazer com ele?

Podemos exibir o vídeo na página, em um elemento , por exemplo:

// considerando que existe um elemento
// <video autoplay id="video"></video>
// na página
const video = document.querySelector('#video')
const videoStream = await navigator.mediaDevices.getUserMedia(constraints)
video.srcObject = videoStream

Note o atributo autoplay na tag video. Sem ele você precisa chamar video.play() para começar a exibir a imagem de fato.

Acessando as câmeras frontal e traseira do celular

Por padrão o getUserMedia vai usar o dispositivo padrão de gravação de vídeo do sistema. No caso de um celular com duas câmeras, ele usa a câmera frontal.

Para acessar a câmera traseira, devemos incluir facingMode: "environment" nos requisitos de vídeo:

const constraints = {
  video: {
    width: { ... },
    height: { ... },
    facingMode: "environment"
  },
};

O padrão é facingMode: "user", que é a câmera frontal.

Um ponto de atenção: se você quiser alterar a câmera com o vídeo iniciado, é preciso parar o stream atual antes de substituir pelo stream da outra câmera:

videoStream.getTracks().forEach((track) => {
  track.stop()
})

Tirando screenshots

Outra coisa legal que dá pra fazer é capturar imagens (screenshots) do vídeo.

Você pode desenhar o frame atual do vídeo em um canvas, por exemplo:

// considerando que já existe um elemento
// <canvas id="canvas"></canvas>
// na página
const canvas = document.querySelector('#canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
canvas.getContext('2d').drawImage(video, 0, 0)

Você pode ainda passar o conteúdo do canvas para um elemento .

No exemplo que criei para este tutorial, adicionei um botão que cria imagens dinamicamente a partir do canvas e adiciona na página. Algo assim:

const img = document.createElement('img')
img.src = canvas.toDataURL('image/png')
screenshotsContainer.prepend(img)

Conclusão

Veja como ficou o exemplo rodando aqui: https://doug2k1.github.io/javascript-camera/

E o código-fonte completo está aqui: https://github.com/doug2k1/javascript-camera

Este post foi útil? Compartilhe nas suas redes pra dar aquela força. 😉

Tags: javascript

Comments

Comments disabled