Comment accéder à la caméra dans un PWA

Précédemment présenté dans notre article détaillant les capacités matérielles de PWA, l'accès à la caméra est l'une des fonctionnalités les plus importantes que nous voyons de plus en plus. Mais intégrer correctement cette capacité dans votre PWA n'est pas non plus une tâche facile, c'est pourquoi dans notre article d'aujourd'hui, nous essaierons de vous guider tout au long de ce processus :

Conditions préalables

• Une PWA de base qui peut être facilement créée à l'aide de ReactJS et de notre guide écrit
• Une solide compréhension de HTML et JavaScript

Comment accéder à la caméra dans un PWA

Les bases

Présentation de getUserMedia() — une API de webRTC

Pour obtenir un accès direct à une caméra et/ou un microphone, le Web utilise une API appelée getUserMedia() qui est largement prise en charge dans presque tous les navigateurs modernes. Cette API, ainsi que RTCPeerConnection et RTCDataChannel , font partie du WebRTC - un cadre intégré aux navigateurs qui permet une communication en temps réel.

Fondamentalement, l'API ( navigator.mediaDevices.getUserMedia(constraints) ) demande à l'utilisateur l'autorisation d'accéder à l'entrée audio et vidéo du téléphone (par exemple, microphone, webcam, appareil photo, etc.). En utilisant quelle autorisation, l'API génère un objet JavaScript MediaStream appelé local qui peut être davantage manipulé.

Exemples

Disons, par exemple, que nous avons un bouton :

 <button>Montrer mon visage</button>

Et en cliquant sur quel bouton appelle la méthode navigator.mediaDevices.getUserMedia() (sans entrée audio) :

 navigator.mediaDevices.getUserMedia({
 vidéo : vrai
})

Heck, nous pouvons aussi nous déchaîner avec les contraintes:

 navigator.mediaDevices.getUserMedia({
  vidéo: {
    minAspectRatio : 1,333,
    minFrameRate : 30,
    largeur : 1280,
    hauteur : 720
  }
})

De plus, nous pouvons spécifier une propriété facingMode dans l'objet vidéo qui indique au navigateur quelle caméra de l'appareil utiliser :

 {
  vidéo: {
    ...
    faceMode : {
//Utiliser la caméra arrière
      exact : 'environnement'
    }
  }
}

Ou

 {
 vidéo : {
  …
//Utiliser la caméra frontale
  faceMode : 'utilisateur'
 }
}

Remarques :

• L'API n'est disponible que sur une origine sécurisée (HTTPS)

• Pour obtenir une liste des contraintes prises en charge sur l'appareil actuel, exécutez :

 navigator.mediaDevices.getSupportedConstraints()

La partie compliquée

Maintenant que nous avons une solide compréhension des bases, passons à la partie avancée. Dans cette partie, nous allons essayer de créer un bouton dans notre PWA et, en cliquant dessus, il ouvre notre caméra et nous permet de faire d'autres travaux.

Création du bouton [Get access to camera]

Commençons d'abord par le <button> dans notre index.html :

 <button>Accéder à la caméra</button>
<lecture automatique de la vidéo></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Remarques :

• La lecture automatique est là pour indiquer au flux multimédia de se lire automatiquement et de ne pas se figer sur la première image.
• L'adaptateur-latest.js est un shim pour isoler les applications des changements de spécifications et des différences de préfixes.

Diffusez la vidéo en temps réel en cliquant sur le bouton

Pour diffuser une vidéo en temps réel lors d'un clic sur le bouton, nous devrons ajouter un EventListener qui sera appelé lors de l'émission de l'événement click :

 document.querySelector('#get-access').addEventListener('click', async function init(e) {
  essayer {
 }
attrape (erreur) {
 }
})

Ensuite, il appelle navigator.mediaDevices.getUserMedia() et demande un flux vidéo à l'aide de la webcam de l'appareil :

 document.querySelector('#get-access').addEventListener('click', async function init(e) {
  essayer {
    flux const = attendre navigator.mediaDevices.getUserMedia({
      audio : faux,
      vidéo : vrai
    })
    const videoTracks = stream.getVideoTracks()
    const piste = videoTracks[0]
    alert(`Obtenir la vidéo de : ${track.label}`)
    document.querySelector('video').srcObject = flux
    document.querySelector('#get-access').setAttribute('hidden', true)
//Le flux vidéo est arrêté par track.stop() après 3 secondes de lecture.
    setTimeout(() => { track.stop() }, 3 * 1000)
  } capture (erreur) {
    alert(`${error.name}`)
    console.error (erreur)
  }
})

De plus, comme indiqué ci-dessus dans la section Basique , vous pouvez également spécifier d'autres exigences pour le flux vidéo :

 navigator.mediaDevices.getUserMedia({
  vidéo: {
    obligatoire : { minAspectRatio : 1,333, maxAspectRatio : 1,334, faceMode : 'utilisateur'},
    optionnel: [
      { minFrameRate : 60 },
      { maxLargeur : 640 },
      { hauteur max : 480 }
    ]
  }
}, successCallback, errorCallback);

Création d'une toile

Avec l'élément <video> combiné avec un <canvas> , vous pouvez poursuivre le traitement de notre flux vidéo en temps réel. Cela inclut la possibilité d'effectuer une variété d'effets tels que l'application de filtres personnalisés, l'incrustation en chrominance (alias «l'effet d'écran vert») - le tout en utilisant du code JavaScript.

Au cas où vous souhaiteriez en savoir plus à ce sujet, Mozilla a rédigé un guide détaillé sur la manipulation de vidéos à l'aide de canvas, alors n'oubliez pas de le consulter !

Capturez un instantané de la toile en utilisant takePhoto() et grabFrame()

Les nouvelles méthodes takePhoto et grabFrame de l'API getUserMedia peuvent être utilisées pour capturer un instantané de la vidéo en cours de diffusion. Il existe encore des différences importantes entre les deux méthodes :

Fondamentalement, ce que fait grabFrame , c'est qu'il saisit simplement l'image vidéo suivante - une méthode simpliste et moins efficace pour capturer des photos. La méthode takePhoto , d'autre part, utilise une meilleure méthode de capture d'images qui consiste à interrompre le flux vidéo actuel pour utiliser la "résolution de caméra photographique la plus élevée disponible" de l'appareil photo pour capturer une image Blob.

Dans les exemples ci-dessous, nous allons dessiner le cadre capturé dans un élément canvas en utilisant la méthode grabFrame :

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

grabFrameButton.onclick = grabFrame;

fonction saisirCadre() {
  imageCapture.grabFrame()
  .alors(fonction(imageBitmap) {
    console.log('Cadre saisi :', imageBitmap);
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('caché');
  })
  .catch(fonction(erreur) {
    console.log('erreur GrabFrame() : ', erreur);
  });
}

Et dans cet exemple, nous utilisons la méthode takePhoto() :

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

takePhotoButton.onclick = prendre une photo ;

// Récupère un Blob de la source caméra actuellement sélectionnée et
// affiche ceci avec un élément img.
fonction prendrePhoto() {
  imageCapture.takePhoto().then(function(blob) {
    console.log('Photo prise :', blob);
    img.classList.remove('caché');
    img.src = URL.createObjectURL(blob);
  }).catch(fonction(erreur) {
    console.log('erreur takePhoto() : ', erreur);
  });
}

Pour avoir une idée de ce à quoi ressemblent les méthodes ci-dessus en action, nous recommandons Simple Image Capture ; et alternativement, PWA Media Capture est également un bon exemple de ce à quoi ressemblerait une fonctionnalité de capture multimédia de base dans PWA.

Conclusion

Dans ce didacticiel, nous vous avons présenté les bases ainsi que quelques astuces avancées pour implémenter des fonctionnalités de caméra dans votre PWA. Le reste ne dépend que de votre imagination pour tirer le meilleur parti de cette fonctionnalité.

Pour les marchands Magento qui cherchent à développer un magasin alimenté par PWA de nouvelle génération, ici à SimiCart, nous fournissons des solutions PWA complètes adaptées à vos besoins.