Foto por Ben White no Unsplash

Usando o browser para tirar fotos com o seu dispositivo

Remerson Carvalho
Sep 3, 2018 · 2 min read

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.js

No 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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade