Una aplicación web progresiva con Vue JS, Webpack y diseño de materiales [Parte 4]

Este artículo es parte de una serie que tiene como objetivo construir una aplicación web progresiva básica pero completa con VueJs, Webpack & Material Design, paso a paso y desde cero. Si aún no lo ha leído, puede encontrar la parte inicial aquí.

Si aún no los ha leído, puede encontrar las partes anteriores a continuación:

  • [Parte 1] Cree una aplicación de página única con VueJS, Webpack y Material Design Lite (por Charles Bochet)
  • [Parte 2] Conecte la aplicación con una API distante con Vue-Resource y VueFire
  • [Parte 3] Experiencia fuera de línea con trabajadores del servicio (por Charles Bochet)

El código fuente está disponible en este repositorio de GitHub. Y puedes ver el resultado final aquí.

Aquí es donde nos detuvimos:

Este cuarto tutorial se enfoca en implementar una funcionalidad nativa en una aplicación web progresiva. Vamos a:

  • Muestre la cámara nativa con la API MediaDevices;
  • Cargue imágenes en el almacenamiento de Firebase;
  • Publicar imágenes en Firebase.
Vista de cámara (escritorio)

¡Disfruta leyendo!

[PARTE 4] Acceda a la cámara del dispositivo para tomar fotos

Muestra la cámara

Cree una nueva vista vacía de componentes / CameraView.vue:

Y vincule la acción del botón a esta nueva vista:

  • Importe la nueva vista en la configuración del enrutador (router / index.js)
 importar CameraView desde '@ / components / CameraView'

Agregue la nueva vista en el objeto de rutas (router / index.js)

{
  ruta: '/ camera',
  nombre: 'cámara',
  componente: CameraView
}
  • Agregue un nuevo botón con el enlace a la nueva CameraView (homeView.vue)

Ahora podemos usar la API de mediaDevices

  • Primero, necesitamos una etiqueta de video vacía en cameraView que contendrá la transmisión (CameraView.vue):

Agregamos un atributo de referencia a esta etiqueta para poder atribuir dinámicamente una fuente de video a la etiqueta de video.

Durante el montaje CameraView iniciaremos la cámara

Y tadaaa

Una pequeña explicación:

navigator.mediaDevices.getUserMedia ({video: true})

Este método solicita al usuario a través de un aviso el permiso para usar su cámara, luego enciende una cámara en el sistema y proporciona un objeto MediaStream que contiene un video / pista. Para obtener más información, consulte el documento API.

NB: esta API también se puede usar para grabar audio.

¡Ahora estamos listos para tomar una foto!

Toma una foto

Comience a agregar un nuevo botón para tomar la foto y cree una función vacía "capturar" vinculada a este botón:

Ahora puedes ver esto:

¡Es hora de capturar una imagen en MediaStream! Para que esto suceda, utilizaremos una nueva interfaz HTML. La interfaz ImageCapture, que proporciona una interfaz para capturar una imagen de un MediaStreamTrack. Para obtener un MediaStreamTrack debemos guardar el MediaStream actual en nuestros datos de vista. Esta función solo es compatible con Chrome 59 o superior.

Ahora podemos completar nuestra función de captura:

Normalmente veremos un blob en tu consola

Cierra la camara

Esta parte puede parecer inútil, pero es primordial. Primero, el usuario no quiere mantener su cámara abierta. En segundo lugar, la cámara es una batería muy codiciosa, por lo que debemos usarla con parsimonia.

Durante el evento destruir ciclo de vida, obtenemos todas las pistas abiertas en nuestra transmisión y las detenemos:

// CameraView.vue
exportación predeterminada {
  ...
  destruido () {
    const tracks = this.mediaStream.getTracks ()
    tracks.map (track => track.stop ())
  }
  ...
}

Sube la foto

Para agregar la imagen tomada al chat, debemos almacenar la imagen en un servidor. En la parte 2, usamos Firebase como base de datos, ¡pero Firebase también ofrece un servicio de almacenamiento gratuito! Para ver la documentación completa de almacenamiento, haga clic aquí.

Configuremos nuestro almacenamiento de Firebase en la consola de Firebase. Vaya a la interfaz de Firebase> pestaña de almacenamiento> reglas y actualice las reglas para hacer público el almacenamiento. Esta manipulación solo es buena para la creación de prototipos, para asegurar el almacenamiento, use la autenticación firebase.

¿Recuerdas el servicio de Firebase? Agregaremos una nueva línea a este servicio para exportar el servicio de almacenamiento desde firebase

Ahora podemos importar este servicio en nuestros componentes para acceder a nuestro almacenamiento de Firebase.

Ok, intentemos subir una imagen, debería verla en su consola de Firebase.

Agregar la imagen a la lista

Después de la carga, agreguemos la imagen en el

Cree un nuevo archivo mixin que contenga nuestro método postCat escrito durante la parte 2 (mixins / postCat.js).

Podemos actualizar el postView con los mixins

Y usa el mixin en la vista de cámara

Eso es todo ! ¡Felicitaciones, ahora podemos tomar y subir una foto en nuestra lista!

Conclusiones

Espero que comprenda mejor cómo implementar una funcionalidad nativa con una API HTML5. Aprendimos:

  • cómo usar MediaStream para acceder a la cámara nativa;
  • cómo almacenar imágenes en Firebase con VueFire;

Echemos un vistazo a nuestra lista de verificación de Progressive Web App:

Uno de nuestros últimos requisitos aún no se cumple. Los manejaremos en las siguientes partes. La Parte 5 le mostrará cómo "usar notificaciones push para atraer a su usuario".