So greifen Sie in einer PWA auf die Kamera zu

Der Kamerazugriff, der bereits in unserem Artikel über die Hardwarefunktionen von PWA vorgestellt wurde, ist eine der herausragenden Funktionen, die wir immer häufiger sehen. Aber diese Funktion richtig in Ihre PWA zu integrieren, ist auch keine leichte Aufgabe, weshalb wir in unserem heutigen Artikel versuchen werden, Sie durch diesen gesamten Prozess zu führen:

Voraussetzungen

• Eine einfache PWA, die einfach mit ReactJS und unserem schriftlichen Leitfaden erstellt werden kann
• Ein solides Verständnis von HTML und JavaScript

So greifen Sie in einer PWA auf die Kamera zu

Die Grundlagen

Einführung getUserMedia() – eine API von webRTC

Um direkten Zugriff auf eine Kamera und/oder ein Mikrofon zu erhalten, verwendet das Web eine API namens getUserMedia() , die in fast allen modernen Browsern weitgehend unterstützt wird. Diese API ist zusammen mit RTCPeerConnection und RTCDataChannel Teil von WebRTC – einem in Browser integrierten Framework, das Echtzeitkommunikation ermöglicht.

Grundsätzlich fordert die API ( navigator.mediaDevices.getUserMedia(constraints) ) den Benutzer zur Erlaubnis auf, auf die Audio- und Videoeingabe des Telefons (z. B. Mikrofon, Webcam, Kamera usw.) zuzugreifen. Mit dieser Berechtigung generiert die API ein MediaStream JavaScript-Objekt namens „ local “, das weiter manipuliert werden kann.

Beispiele

Sagen wir zum Beispiel, wir haben eine Schaltfläche:

 <button>Zeig mein Gesicht</button>

Und ein Klick auf welche Schaltfläche ruft die Methode navigator.mediaDevices.getUserMedia() auf (ohne Audioeingabe):

 navigator.mediaDevices.getUserMedia({
 Videos: stimmt
})

Verdammt, wir können auch mit den Einschränkungen wild werden:

 navigator.mediaDevices.getUserMedia({
  Video: {
    minAspectRatio: 1.333,
    minFrameRate: 30,
    Breite: 1280,
    Höhe: 720
  }
})

Zusätzlich können wir im Video-Objekt eine facingMode Eigenschaft angeben, die dem Browser mitteilt, welche Kamera des Geräts verwendet werden soll:

 {
  Video: {
    ...
    FacingMode: {
// Verwenden Sie die Rückkamera
      genau: 'Umwelt'
    }
  }
}

Oder

 {
 Video : {
  …
//Benutze die Frontkamera
  FacingMode: 'Benutzer'
 }
}

Hinweise :

• Die API ist nur auf einem sicheren Ursprung (HTTPS) verfügbar.

• Um eine Liste der unterstützten Einschränkungen auf dem aktuellen Gerät zu erhalten, führen Sie Folgendes aus:

 navigator.mediaDevices.getSupportedConstraints()

Der komplizierte Teil

Nachdem wir nun ein solides Verständnis der Grundlagen haben, gehen wir zum fortgeschrittenen Teil über. In diesem Teil versuchen wir, eine Schaltfläche in unserer PWA zu erstellen, und wenn Sie darauf klicken, öffnet sie unsere Kamera und lässt uns weiterarbeiten.

Erstellen der Schaltfläche [Get access to camera]

Beginnen wir zunächst mit dem <button> in unserer index.html :

 <button>Zugriff auf die Kamera erhalten</button>
<Automatische Videowiedergabe></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Hinweis :

• Die Autoplay-Funktion weist den Medienstream an, automatisch abzuspielen und nicht beim ersten Frame einzufrieren.
• Die adapter-latest.js ist ein Shim, um Apps vor Spezifikationsänderungen und Präfixunterschieden zu schützen.

Streamen Sie Videos in Echtzeit, indem Sie auf die Schaltfläche klicken

Um ein Video in Echtzeit zu streamen, wenn Sie auf die Schaltfläche klicken, müssen wir einen EventListener hinzufügen, der aufgerufen wird, wenn das click -Ereignis ausgegeben wird:

 document.querySelector('#get-access').addEventListener('click', async function init(e) {
  Versuchen {
 }
fangen (Fehler) {
 }
})

Anschließend ruft es navigator.mediaDevices.getUserMedia() auf und fragt nach einem Videostream über die Webcam des Geräts:

 document.querySelector('#get-access').addEventListener('click', async function init(e) {
  Versuchen {
    const stream = warte auf navigator.mediaDevices.getUserMedia({
      Ton: falsch,
      Videos: stimmt
    })
    const videoTracks = stream.getVideoTracks()
    const track = videoTracks[0]
    alert(`Video wird abgerufen von: ${track.label}`)
    document.querySelector('video').srcObject = stream
    document.querySelector('#get-access').setAttribute('hidden', true)
//Der Videostream wird von track.stop() nach 3 Sekunden Wiedergabe gestoppt.
    setTimeout(() => { track.stop() }, 3 * 1000)
  } Fang (Fehler) {
    alert(`${error.name}`)
    Konsole.Fehler (Fehler)
  }
})

Darüber hinaus können Sie, wie oben im Abschnitt Basic angegeben, auch weitere Anforderungen für den Videostream angeben:

 navigator.mediaDevices.getUserMedia({
  Video: {
    obligatorisch: {minAspectRatio: 1.333, maxAspectRatio: 1.334,facingMode: 'user'},
    Optional: [
      { minFrameRate: 60 },
      { maxWidth: 640 },
      {maxHöhe: 480}
    ]
  }
}, successCallback, errorCallback);

Erstellen einer Leinwand

Mit dem Element <video> in Kombination mit einem <canvas> können Sie unseren Echtzeit-Videostream weiterverarbeiten. Dazu gehört die Möglichkeit, eine Vielzahl von Effekten auszuführen, z. B. das Anwenden benutzerdefinierter Filter, Chroma-Keying (auch bekannt als „Green-Screen-Effekt“) – alles mithilfe von JavaScript-Code.

Falls Sie mehr darüber lesen möchten, Mozilla hat eine ausführliche Anleitung zum Bearbeiten von Videos mit Leinwand geschrieben, also vergessen Sie nicht, sie sich anzusehen!

Nehmen Sie mit takePhoto() und grabFrame() einen Schnappschuss der Leinwand auf

Die neuen Methoden takePhoto und grabFrame der getUserMedia API können verwendet werden, um einen Schnappschuss des aktuell gestreamten Videos aufzunehmen. Es gibt immer noch signifikante Unterschiede zwischen den beiden Methoden:

Im Grunde nimmt grabFrame einfach den nächsten Videoframe – eine vereinfachte und nicht so effiziente Methode zum Aufnehmen von Fotos. Die takePhoto Methode hingegen verwendet eine bessere Methode zum Erfassen von Einzelbildern, nämlich das Unterbrechen des aktuellen Videostreams, um die „höchste verfügbare Fotokameraauflösung“ der Kamera zum Erfassen eines Blob-Bildes zu verwenden.

In den folgenden Beispielen zeichnen wir den erfassten Frame mit der Methode grabFrame in ein canvas -Element:

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

grabFrameButton.onclick = grabFrame;

Funktion grabFrame() {
  imageCapture.grabFrame()
  .then(function(imageBitmap) {
    console.log('Grabbed frame:', imageBitmap);
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
    canvas.classList.remove('versteckt');
  })
  .catch(Funktion(Fehler) {
    console.log('grabFrame() error: ', error);
  });
}

Und in diesem Beispiel verwenden wir die Methode takePhoto() :

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

takePhotoButton.onclick = takePhoto;

// Holen Sie sich einen Blob von der aktuell ausgewählten Kameraquelle und
// Dies mit einem img-Element anzeigen.
Funktion takePhoto() {
  imageCapture.takePhoto().then(Funktion(blob) {
    console.log('Foto gemacht:', blob);
    img.classList.remove('versteckt');
    img.src = URL.createObjectURL(blob);
  }).catch(Funktion(Fehler) {
    console.log('takePhoto() error: ', error);
  });
}

Um eine Vorstellung davon zu bekommen, wie die oben genannten Methoden in Aktion aussehen, empfehlen wir Simple Image Capture; und alternativ ist PWA Media Capture auch ein gutes Beispiel dafür, wie eine grundlegende Medienerfassungsfunktion in PWA aussehen würde.

Fazit

In diesem Tutorial haben wir Ihnen die Grundlagen sowie einige fortgeschrittene Tricks zur Implementierung von Kamerafunktionen in Ihrer PWA vorgestellt. Der Rest ist nur Ihrer Vorstellungskraft überlassen, um das Beste aus dieser Funktion zu machen.

Für Magento-Händler, die einen PWA-basierten Shop der nächsten Generation entwickeln möchten, bieten wir hier in SimiCart komplette PWA-Lösungen, die auf Ihre Bedürfnisse zugeschnitten sind.