Usando o browser para tirar fotos com o seu dispositivo
Acessar a câmera de um smartphone em uma aplicação Web é uma tarefa relativamente simples: Web APIs disponibilizam interfaces de alto nível que permitem a comunicação entre seu código e a câmera do dispositivo. Nesse artigo, vamos aprender como tirar uma foto e salvá-la.
Esse artigo é voltado para iniciantes em JavaScript.
Para que a demonstração funcione, é necessário que o seu dispositivo possua uma câmera.
Preparando o <canvas>
Para começar, vamos criar a pasta browser-camera e adicionar 2 arquivos: index.html e main.js. Nossa estrutura deve ficar assim:
browser-camera
|_ index.html
|_ main.jsNo arquivo index.html, nós vamos adicionar a estrutura básica da página, um elemento <canvas> ao <body> e um <script> referenciando o nosso arquivo main.js:
No arquivo main.js, vamos criar o context que possui as funções que vão nos permitir desenhar no canvas:
Feito isso, vamos então requisitar acesso à câmera.
Utilizando o navigator.mediaDevices
Vamos utilizar navigator.mediaDevices.getUserMedia()para que possamos acessar a câmera do dispositivo:
A função getUserMedia() retorna uma Promise que resolve para um objeto MediaStream, que contém a captura da câmera. Explicando superficialmente, uma Promise é um objeto que, de forma assíncrona, resolve para (ou retorna) um valor que estará disponível no futuro.
Como precisamos da permissão do usuário para requisitar o acesso à câmera, a getUserMedia()foi implementada utilizando Promise para que seja possível esperar a escolha do usuário para continuar com o fluxo de execução.
Para manipular o valor resolvido, precisamos chamar o método .then() presente em toda Promise:
Renderizando a captura da câmera
Para mostrar para o usuário o que a câmera está capturando, precisamos criar um elemento <video> e desenhá-lo no <canvas>:
Com isso, ao abrirmos o arquivo index.html no browser e aceitar o acesso à câmera, já podemos ver o que está sendo capturado pelo dispositivo.
Tirando uma foto com o <canvas>
O último passo é salvar a foto a partir do que está sendo renderizado pelo <canvas>:
O código completo do main.js pode ser acessado nesse gist.
Qualquer dúvida, sugestão ou erro no artigo, estou à disposição pra responder. Até mais!

