This article is part of a serie that aims to build a basic but complete Progressive Web Application with VueJs, Webpack & Material Design, step-by-step and from scratch. If you have not yet read it, you can find the initial part here.

If you have not read them yet, you can find previous parts below:

Code source is available on this GitHub repository. And you can see the final result here.

Here is where we stopped:

This fourth tutorial focuses on implementating a native functionality in a progressive web app. We are going to:

Display the native camera with the MediaDevices API;

Upload pictures on firebase storage;

Post pictures to Firebase.

Camera view (desktop)

Enjoy reading!

[PART 4] Access device camera to take pictures

Display the camera

Create a new empty view components/CameraView.vue:

And link the button action to this new view :

Import the new view in the router config (router/index.js)

import CameraView from '@/components/CameraView'

Add the new view in the routes object (router/index.js)

{

path: '/camera',

name: 'camera',

component: CameraView

}

Add a new button with the link to the new CameraView (homeView.vue)

Now we can use the mediaDevices API

First, we need an empty video tag in the cameraView that will contain the stream (CameraView.vue) :

We add a ref attribute to this tag to be able to dynamically attribute a video source to the video tag.

During the CameraView mount we will initiliaze the camera

And tadaaa

A little explanation :

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

This method ask to the user throught a prompt the permission to use his camera, then turns on a camera on the system and provides a MediaStream object containing a video/track. To more information see the API doc.

NB : this API can be use to record audio too.

Now we are ready to take a picture !