Cómo activar la cámara del móvil y capturar fotos con una PWA

En este tutorial aprenderemos a utilizar la API nativa de navegador que nos permite activar la cámara de nuestro dispositivo móvil.

📷 Aprende a capturar fotos desde la cámara móvil de tu dispositivo con tan sólo un poco de HTML y algo de JavaScript

Desde hace un tiempo los navegadores han aumentado el número de funcionalidades permitiendo acceder a elementos nativos de los dispositivos móvilessin tener que desarrollar un componente en el lenguaje nativo que tocara, por ejemplo, Java para Android o Swift para iOS. En este caso, y gracias a esta estandarización utilizando los elementos HTML necesarios y algo de código JavaScript, podemos hacer uso de estas características nativas de nuestro dispositivo móvil y capturar fotos desde una interface web.

Qué elemento HTML nos permite acceder a la cámara

Hay un elemento, o componente web, que siempre ha estado en nuestras vidas y que los navegadores han empezado a sacarle más partido, el olvidado "input" tipo "file".

Desde siempre, se ha utilizado este elemento para capturar desde una web archivos locales de un ordenador y que, por ejemplo, un usuario puediera subir un archivo a un servidor online para que nuestra web realizara los trámites pertinentes con el mismo.

Hace relativamente poco tiempo ha vuelto a coger importancia, y se le ha dotado de posibilidades que lo adaptan a las necesidades del usuario final en un dispositivos móvil permitiendo, como por ejemplo, que con la cámara del mismo poder capturar una foto o vídeo directamente.

Como puedes ver en la documentación de la W3C el atributo "capture" con el que permite activar de forma directa la cámara del dispositivo especificando el tipo de archivo que necesitamos capturar. En este caso sería un elemento desde la cámara de fotos, por lo que tendríamos que setear el valor "camera".

  <img id="photo" class="photo">
  <input type="file" accept="image/*" capture="camera" id="camera" />
  

Cómo obtener la imagen y mostrarla en un elemento HTML

Para mostrar la imagen capturada utilizaremos un elemento "img" al que le asignaremos la url de nuestro objeto capturado, siendo generada dicha url desde el elemento "input" mediante el método "createObjectURL".

  const photo = document.querySelector('#photo');
  const camera = document.querySelector('#camera');
  camera.addEventListener('change', function(e) {
    photo.src = URL.createObjectURL(e.target.files[0]);
  });

Como puedes comprobar, hemos utilizado la función JavaScript "createObjectURL" que nos permite generar una url de un elemento, o varios, capturado desde un "input" tipo "file". Aquí tienes más información sobre este método: URL.create​ObjectURL()

Ejemplo

Finalmente os dejo un ejemplo en mi cuenta de GitHub que podréis probar en vuestro ordenador: Tutorial PWA Camera Capture

Si tienes dudas, deja un comentario para que entre todos podamos ir mejorando.

Espero que os haya gustado y gracias por leerlo! 😝