Een progressieve webapplicatie met Vue JS, Webpack & Material Design [Deel 4]

Dit artikel maakt deel uit van een serie die erop gericht is om een ​​eenvoudige maar complete progressieve webapplicatie te bouwen met VueJ's, Webpack & Material Design, stap voor stap en helemaal opnieuw. Als u het nog niet hebt gelezen, kunt u het eerste deel hier vinden.

Als je ze nog niet hebt gelezen, kun je de volgende onderdelen hieronder vinden:

  • [Deel 1] Maak een applicatie met één pagina met VueJS, Webpack en Material Design Lite (door Charles Bochet)
  • [Deel 2] Verbind de app met een API op afstand met Vue-Resource en VueFire
  • [Deel 3] Offline ervaring met servicemedewerkers (door Charles Bochet)

Codebron is beschikbaar op deze GitHub-repository. En u kunt het eindresultaat hier zien.

Hier zijn we gestopt:

Deze vierde tutorial richt zich op het implementeren van een native functionaliteit in een progressieve web-app. Wij gaan:

  • Geef de native camera weer met de MediaDevices API;
  • Upload foto's op firebase-opslag;
  • Plaats foto's op Firebase.
Cameraweergave (desktop)

Veel plezier met lezen!

[DEEL 4] Toegang tot camera van apparaat om foto's te maken

Geef de camera weer

Maak een nieuwe lege weergavecomponenten / CameraView.vue:

En koppel de knopactie aan deze nieuwe weergave:

  • Importeer de nieuwe weergave in de routerconfiguratie (router / index.js)
 CameraView importeren uit '@ / componenten / CameraView'

Voeg de nieuwe weergave toe aan het routesobject (router / index.js)

{
  pad: '/ camera',
  naam: 'camera',
  component: CameraView
}
  • Voeg een nieuwe knop toe met de link naar de nieuwe CameraView (homeView.vue)

Nu kunnen we de mediaDevices API gebruiken

  • Eerst hebben we een lege videotag in de cameraView nodig die de stream zal bevatten (CameraView.vue):

We voegen een ref-kenmerk toe aan deze tag om een ​​videobron dynamisch aan de videotag te kunnen toeschrijven.

Tijdens de CameraView-mount zullen we de camera initialiseren

En tadaaa

Een kleine uitleg:

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

Deze methode vraagt ​​de gebruiker via een prompt de toestemming om zijn camera te gebruiken, schakelt vervolgens een camera op het systeem in en levert een MediaStream-object met een video / track. Zie het API-document voor meer informatie.

NB: deze API kan ook worden gebruikt om audio op te nemen.

Nu zijn we klaar om een ​​foto te maken!

Maak een foto

Begin met het toevoegen van een nieuwe knop om de foto te maken en maak een lege functie ‘vastleggen’ gebonden aan deze knop:

Nu kunt u dit zien:

Het is tijd om een ​​afbeelding vast te leggen in de MediaStream! Om dit mogelijk te maken, zullen we één nieuwe HTML-interface gebruiken. De ImageCapture-interface, die een interface biedt om een ​​afbeelding van een MediaStreamTrack vast te leggen. Om een ​​MediaStreamTrack te krijgen, moeten we de huidige MediaStream opslaan in onze weergavegegevens. Deze functie wordt alleen ondersteund in Chrome 59 of hoger.

Nu kunnen we onze vastlegfunctie voltooien:

Normaal zien we een klodder in uw console

Sluit de camera

dit deel kan nutteloos lijken, maar het is primordiaal. Ten eerste wil de gebruiker zijn camera niet open houden. Ten tweede is de camera erg hebzuchtig in batterij, dus we moeten hem gebruiken met parsimony.

Tijdens het evenement Lifecycle krijgen we alle open tracks in onze stream en stoppen we ze:

// CameraView.vue
standaard exporteren {
  ...
  vernietigd () {
    const tracks = this.mediaStream.getTracks ()
    tracks.map (track => track.stop ())
  }
  ...
}

Upload de foto

Om de genomen foto aan de chat toe te voegen, moeten we de foto op een server opslaan. In deel 2 gebruiken we Firebase als database, maar Firebase biedt ook een gratis opslagservice! Ga naar de volledige opslagdocumentatie.

Laten we onze firebase-opslag in de firebase-console instellen. Ga naar de firebase-interface> tabblad opslag> regels en werk de regels bij om de opslag openbaar te maken. Deze manipulatie is alleen goed voor prototyping, om de opslag te beveiligen, gebruik de firebase auth.

Hebt u de vuurbasisdienst opnieuw? We zullen een nieuwe regel aan deze service toevoegen om de opslagservice vanuit firebase te exporteren

We kunnen deze service nu in onze componenten importeren voor toegang tot onze firebase-opslag.

Oké, laten we proberen een foto te uploaden, je zou je foto in je firebase-console moeten zien.

Voeg de afbeelding toe aan de lijst

Voeg na de upload de foto toe aan de

Maak een nieuwe mixin-bestanden die onze postCat-methode bevatten, geschreven tijdens deel 2 (mixins / postCat.js).

We kunnen de postView bijwerken met de mixins

En gebruik de mixin in de cameraweergave

Dit is het ! Gefeliciteerd, we kunnen nu een foto in onze lijst maken en uploaden!

conclusies

Ik hoop dat je beter begrijpt hoe je een native functionaliteit met een HTML5 API kunt implementeren. We leerden:

  • hoe MediaStream te gebruiken voor toegang tot de native camera;
  • hoe afbeeldingen op te slaan in Firebase met VueFire;

Laten we onze checklist voor Progressive Web-app eens bekijken:

Aan een van onze laatste vereisten is nog niet voldaan. We zullen ze in de volgende delen behandelen. Deel 5 laat zien hoe je "pushmeldingen kunt gebruiken om je gebruiker te betrekken".