Come accedere alla fotocamera in una PWA

Pubblicato: 2020-08-19

Sommario

In precedenza descritto nel nostro articolo che descriveva in dettaglio le capacità hardware di PWA, l'accesso alla telecamera è una delle funzionalità più importanti che stiamo vedendo sempre di più. Ma anche integrare correttamente questa capacità nella tua PWA non è un compito facile, motivo per cui nel nostro articolo di oggi cercheremo di guidarti attraverso l'intero processo:

Prerequisiti

  • Una PWA di base che può essere facilmente creata utilizzando ReactJS e la nostra guida scritta
  • Una solida conoscenza di HTML e JavaScript

Come accedere alla fotocamera in una PWA

Le basi

Presentazione di getUserMedia() — un'API di webRTC

Per ottenere l'accesso diretto a una telecamera e/o un microfono, il Web utilizza un'API chiamata getUserMedia() che è ampiamente supportata in quasi tutti i browser moderni. Questa API, insieme a RTCPeerConnection e RTCDataChannel , fanno parte di WebRTC, un framework integrato nei browser che consente la comunicazione in tempo reale.

Fondamentalmente, ciò che fa l'API ( navigator.mediaDevices.getUserMedia(constraints) ) è richiedere all'utente il permesso di accedere all'ingresso audio e video del telefono (ad es. microfono, webcam, fotocamera, ecc.). Utilizzando quale autorizzazione, l'API genera un oggetto JavaScript MediaStream chiamato locale che può essere ulteriormente manipolato.

Esempi

Supponiamo, ad esempio, di avere un pulsante: 

 <button>Mostra la mia faccia</button>

E facendo clic su quale pulsante chiama il metodo navigator.mediaDevices.getUserMedia() (senza input audio): 

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

Diamine, possiamo anche scatenarci con i vincoli: 

 navigator.mediaDevices.getUserMedia({
  video: {
    minAspectRatio: 1.333,
    minFrameRate: 30,
    larghezza: 1280,
    altezza: 720
  }
})

Inoltre, possiamo specificare una proprietà facingMode nell'oggetto video che indica al browser quale telecamera del dispositivo utilizzare: 

 {
  video: {
    ...
    modalità di fronte: {
//Usa la fotocamera posteriore
      esatto: 'ambiente'
    }
  }
}

O 

 {
 video : {
  …
//Usa la fotocamera frontale
  faceMode: 'utente'
 }
}

Note :

  • L'API è disponibile solo su un'origine sicura (HTTPS)
  • Per ottenere un elenco dei vincoli supportati sul dispositivo corrente, eseguire: 
 navigator.mediaDevices.getSupportedConstraints()

La parte complicata

Ora che abbiamo una solida comprensione delle basi, passiamo alla parte avanzata. In questa parte, proveremo a creare un pulsante nella nostra PWA e, cliccando su di esso, si aprirà la nostra fotocamera e ci permetterà di lavorare ulteriormente.

Creazione del pulsante [Get access to camera] .

Innanzitutto, iniziamo con il <button> nel nostro index.html : 

 <button>Ottieni l'accesso alla fotocamera</button>
<riproduzione automatica video></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Note s:

  • L'autoplay è lì per dire al flusso multimediale di riprodurre automaticamente e non bloccarsi sul primo fotogramma.
  • Adapter-latest.js è uno spessore per isolare le app dalle modifiche alle specifiche e dalle differenze di prefisso.

Riproduci video in streaming in tempo reale facendo clic sul pulsante

Per eseguire lo streaming di un video in tempo reale quando si fa clic sul pulsante, dovremo aggiungere un EventListener che verrà chiamato quando viene emesso l'evento click : 

 document.querySelector('#get-access').addEventListener('click', funzione asincrona init(e) {
  Tentativo {
 }
cattura (errore) {
 }
})

Successivamente, chiama navigator.mediaDevices.getUserMedia() e richiede un flusso video utilizzando la webcam del dispositivo: 

 document.querySelector('#get-access').addEventListener('click', funzione asincrona init(e) {
  Tentativo {
    const stream = attendi navigator.mediaDevices.getUserMedia({
      audio: falso,
      video: vero
    })
    const videoTracks = stream.getVideoTracks()
    const track = videoTracks[0]
    alert(`Ricevi video da: ${track.label}`)
    document.querySelector('video').srcObject = flusso
    document.querySelector('#get-access').setAttribute('nascosto', true)
//Il flusso video viene interrotto da track.stop() dopo 3 secondi di riproduzione.
    setTimeout(() =&gt; { track.stop() }, 3 * 1000)
  } cattura (errore) {
    avviso(`${nome.errore}`)
    console.error(errore)
  }
})

Inoltre, come specificato sopra nella sezione Base , puoi anche specificare più requisiti per il flusso video: 

 navigator.mediaDevices.getUserMedia({
  video: {
    obbligatorio: { minAspectRatio: 1.333, maxAspectRatio: 1.334, faceMode: 'user'},
    facoltativo: [
      { minFrameRate: 60 },
      { Larghezza massima: 640 },
      {altezza massima: 480}
    ]
  }
}, successCallback, errorCallback);

Creazione di una tela

Con l'elemento <video> combinato con un <canvas> , puoi elaborare ulteriormente il nostro flusso video in tempo reale. Ciò include la possibilità di eseguire una varietà di effetti come l'applicazione di filtri personalizzati, chroma-keying (noto anche come "effetto schermo verde"), il tutto utilizzando il codice JavaScript.

Nel caso in cui desideri saperne di più, Mozilla ha scritto una guida dettagliata sulla manipolazione dei video utilizzando la tela, quindi non dimenticare di dare un'occhiata!

Cattura un'istantanea della tela usando takePhoto() e grabFrame()

I nuovi metodi takePhoto e grabFrame dell'API getUserMedia possono essere utilizzati per acquisire un'istantanea del video attualmente in streaming. Ci sono ancora differenze significative tra i due metodi:

Fondamentalmente, ciò che fa grabFrame è semplicemente catturare il fotogramma video successivo, un metodo semplicistico e non altrettanto efficiente per acquisire foto. Il metodo takePhoto , d'altra parte, utilizza un metodo migliore per catturare i fotogrammi che consiste nell'interrompere il flusso video corrente per utilizzare la "risoluzione della fotocamera fotografica più alta disponibile" della fotocamera per acquisire un'immagine Blob.

Negli esempi seguenti, disegneremo il fotogramma catturato in un elemento canvas usando il metodo grabFrame : 

 var grabFrameButton = document.querySelector('button#grabFrame');
var canvas = document.querySelector('canvas');

grabFrameButton.onclick = grabFrame;

funzione grabFrame() {
  imageCapture.grabFrame()
  .quindi(funzione(immagineBitmap) {
    console.log('Frame catturato:', imageBitmap);
    canvas.width = immagineBitmap.width;
    canvas.height = immagineBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('nascosto');
  })
  .catch(funzione(errore) {
    console.log('grabFrame() errore: ', errore);
  });
}

E in questo esempio, utilizziamo il metodo takePhoto() : 

 var takePhotoButton = document.querySelector('button#takePhoto');
var canvas = document.querySelector('canvas');

takePhotoButton.onclick = prendiFoto;

// Ottieni un BLOB dalla sorgente della telecamera attualmente selezionata e
// visualizzalo con un elemento img.
funzione prendi foto() {
  imageCapture.takePhoto().then(function(blob) {
    console.log('Scatta foto:', blob);
    img.classList.remove('nascosto');
    img.src = URL.createObjectURL(blob);
  }).catch(funzione(errore) {
    console.log('takePhoto() errore: ', errore);
  });
}

Per avere un'idea dell'aspetto dei metodi precedenti in azione, consigliamo Simple Image Capture; e in alternativa, PWA Media Capture è anche un buon esempio di come sarebbe una funzione di acquisizione multimediale di base in PWA.

Conclusione

In questo tutorial, ti abbiamo presentato le basi e alcuni trucchi avanzati per implementare le funzionalità della fotocamera nella tua PWA. Il resto dipende solo dalla tua immaginazione per sfruttare al meglio questa funzione.

Per i commercianti Magento che desiderano sviluppare un negozio basato su PWA di nuova generazione, qui in SimiCart forniamo soluzioni PWA complete su misura per le tue esigenze.

Esplora simicart PWA