En progressiv webapplikation med Vue JS, Webpack & Material Design [Del 4]

Denne artikel er del af en serie, der sigter mod at opbygge en grundlæggende, men komplet progressiv webapplikation med VueJs, Webpack & Material Design, trin for trin og fra bunden. Hvis du endnu ikke har læst den, kan du finde den første del her.

Hvis du ikke har læst dem endnu, kan du finde tidligere dele nedenfor:

  • [Del 1] Opret en enkelt sides applikation med VueJS, Webpack og Material Design Lite (af Charles Bochet)
  • [Del 2] Forbind appen med et fjernt API med Vue-Resource og VueFire
  • [Del 3] Offline-erfaring med servicemedarbejdere (af Charles Bochet)

Kodekilde er tilgængelig på dette GitHub-lager. Og du kan se det endelige resultat her.

Her stoppede vi:

Denne fjerde tutorial fokuserer på implementering af en native funktionalitet i en progressiv webapp. Vi skal:

  • Vis det indbyggede kamera med MediaDevices API;
  • Upload billeder på ildstedlager;
  • Send billeder til Firebase.
Kameravisning (desktop)

Nyd at læse!

[DEL 4] Åbn enhedskameraet for at tage billeder

Vis kameraet

Opret en ny tom visningskomponenter / CameraView.vue:

Og link knaphandlingen til denne nye visning:

  • Importer den nye visning i routerkonfigurationen (router / index.js)
 importer CameraView fra '@ / komponenter / CameraView'

Tilføj den nye visning i ruteobjektet (router / index.js)

{
  sti: '/ kamera',
  navn: 'kamera',
  komponent: CameraView
}
  • Tilføj en ny knap med linket til den nye CameraView (homeView.vue)

Nu kan vi bruge mediaDevices API

  • Først har vi brug for et tomt videotag i cameraView, der indeholder strømmen (CameraView.vue):

Vi tilføjer en ref-attribut til dette tag for at være i stand til dynamisk atribut til en videokilde til videokoden.

Under CameraView-monteringen starter vi kameraet

Og tadaaa

En lille forklaring:

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

Denne metode beder brugeren om en hurtig tilladelse til at bruge sit kamera, tænder derefter et kamera på systemet og giver et MediaStream-objekt, der indeholder en video / spor. Se API-dokumentet for at få flere oplysninger.

NB: denne API kan også bruges til at optage lyd.

Nu er vi klar til at tage et billede!

Tag et billede

Begynd med at tilføje en ny knap for at tage billedet, og opret en tom funktion 'capture' bundet til denne knap:

Nu kan du se dette:

Det er tid til at fange et billede i MediaStream! For at gøre dette sker, bruger vi en ny HTML-grænseflade. ImageCapture-interface, som giver en grænseflade til at fange et billede fra en MediaStreamTrack. For at få en MediaStreamTrack skal vi gemme den aktuelle MediaStream i vores visningsdata. Denne funktion understøttes kun i Chrome 59 eller nyere.

Nu kan vi afslutte vores optagefunktion:

Normalt ser vi en klat i din konsol

Luk kameraet

denne del kan synes at være ubrugelig, men den er overordentlig. For det første ønsker brugeren ikke at holde sit kamera åbent. For det andet er kameraet meget grådigt i batteriet, så vi må bruge det sammen med parsimon.

Under den ødelæggende livscyklusbegivenhed får vi alle åbne spor i vores strøm, og vi stopper dem:

// CameraView.vue
eksport standard {
  ...
  ødelagt () {
    const tracks = this.mediaStream.getTracks ()
    tracks.map (track => track.stop ())
  }
  ...
}

Upload billedet

For at tilføje det tagede billede til chatten, skal vi gemme billedet på en server. I del 2 bruger vi Firebase som en database, men Firebase tilbyder også en gratis opbevaringstjeneste! Gå her for at se den fulde lagringsdokumentation.

Lad os konfigurere vores ildstedlager i ildbaskonsollen. Gå til firebase-grænsefladen> fanebladet> lagring, og opdater reglerne for at gøre lagringen offentlig. Denne manipulation er kun god til prototyper, for at sikre opbevaringen, brug ildkrabben autorisation.

Kan du huske ildstedstjenesten? Vi tilføjer en ny linje til denne tjeneste for at eksportere lagringstjenesten fra ildbase

Vi kan nu importere denne service i vores komponenter for at få adgang til vores ildstedlager.

Ok, lad os prøve at uploade et billede, du skal se dit billede i din ildkonsol.

Føj billedet til listen

Efter uploaden tilføjes billedet i

Opret en ny mixin-filer, der indeholder vores postCat-metode, der er skrevet under del 2 (mixins / postCat.js).

Vi kan opdatere postView med mixins

Og brug mixin i kameravisningen

Dette er det ! Tillykke, vi kan nu tage og uploade et billede på vores liste!

konklusioner

Jeg håber, du har en bedre forståelse af, hvordan du implementerer en native funktionalitet med en HTML5 API. Vi lærte:

  • hvordan man bruger MediaStream til at få adgang til det indbyggede kamera;
  • hvordan man gemmer billede i Firebase med VueFire;

Lad os se på vores liste over Progressive Web App:

Et af vores sidste krav er endnu ikke opfyldt. Vi vil håndtere dem i næste dele. Del 5 viser dig, hvordan man "bruger push-meddelelser til at engagere din bruger".