ImageCapture

Die ImageCapture-Schnittstelle der MediaStream Image Capture API bietet Methoden zum Erfassen von Bildern oder Fotos von einer Kamera oder einem anderen fotografischen Gerät. Sie stellt eine Schnittstelle zur Verfügung, um Bilder von einem fotografischen Gerät zu erfassen, das über einen gültigen MediaStreamTrack referenziert wird.

Konstruktor

ImageCapture(): Erstellt ein neues ImageCapture-Objekt, das verwendet werden kann, um Standbilder (Fotos) von einem gegebenen MediaStreamTrack, der einen Videostream darstellt, aufzunehmen.

Instanz-Eigenschaften

ImageCapture.track Schreibgeschützt: Gibt eine Referenz zu dem MediaStreamTrack zurück, der dem Konstruktor übergeben wurde.

Instanz-Methoden

ImageCapture.takePhoto(): Nimmt eine Einzelaufnahme mit dem Videogerät auf, das einen MediaStreamTrack bereitstellt, und gibt ein Promise zurück, das mit einem Blob aufgelöst wird, der die Daten enthält.
ImageCapture.getPhotoCapabilities(): Gibt ein Promise zurück, das mit einem Objekt aufgelöst wird, das die Bereiche der verfügbaren Konfigurationsoptionen enthält.
ImageCapture.getPhotoSettings(): Gibt ein Promise zurück, das mit einem Objekt aufgelöst wird, das die aktuellen Fotoeinstellungen enthält.
ImageCapture.grabFrame(): Nimmt einen Schnappschuss des Live-Videos in einem MediaStreamTrack auf und gibt ein ImageBitmap zurück, wenn erfolgreich.

Beispiel

Der folgende Code ist aus Chrome's Grab Frame - Take Photo Sample entnommen. Da ImageCapture eine Quelle benötigt, um ein Bild aufzunehmen, beginnt das folgende Beispiel mit dem Mediengerät eines Geräts (mit anderen Worten, einer Kamera).

Dieses Beispiel zeigt, grob gesagt, einen MediaStreamTrack, der aus einem Gerät's MediaStream extrahiert wurde. Der Track wird dann verwendet, um ein ImageCapture-Objekt zu erstellen, damit takePhoto() und grabFrame() aufgerufen werden können. Schließlich wird gezeigt, wie man die Ergebnisse dieser Aufrufe auf ein Canvas-Objekt anwendet.

let imageCapture;

function onGetUserMediaButtonClick() {
  navigator.mediaDevices
    .getUserMedia({ video: true })
    .then((mediaStream) => {
      document.querySelector("video").srcObject = mediaStream;

      const track = mediaStream.getVideoTracks()[0];
      imageCapture = new ImageCapture(track);
    })
    .catch((error) => console.error(error));
}

function onGrabFrameButtonClick() {
  imageCapture
    .grabFrame()
    .then((imageBitmap) => {
      const canvas = document.querySelector("#grabFrameCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.error(error));
}

function onTakePhotoButtonClick() {
  imageCapture
    .takePhoto()
    .then((blob) => createImageBitmap(blob))
    .then((imageBitmap) => {
      const canvas = document.querySelector("#takePhotoCanvas");
      drawCanvas(canvas, imageBitmap);
    })
    .catch((error) => console.error(error));
}

/* Utils */

function drawCanvas(canvas, img) {
  canvas.width = getComputedStyle(canvas).width.split("px")[0];
  canvas.height = getComputedStyle(canvas).height.split("px")[0];
  let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width * ratio) / 2;
  let y = (canvas.height - img.height * ratio) / 2;
  canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
  canvas
    .getContext("2d")
    .drawImage(
      img,
      0,
      0,
      img.width,
      img.height,
      x,
      y,
      img.width * ratio,
      img.height * ratio,
    );
}

document.querySelector("video").addEventListener("play", () => {
  document.querySelector("#grabFrameButton").disabled = false;
  document.querySelector("#takePhotoButton").disabled = false;
});

Spezifikationen

Specification
MediaStream Image Capture # imagecaptureapi

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden