ImageCapture

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die ImageCapture-Schnittstelle der MediaStream Image Capture API bietet Methoden, um die Aufnahme von Bildern oder Fotos von einer Kamera oder einem anderen fotografischen Gerät zu ermöglichen. Sie stellt eine Schnittstelle zum Erfassen von Bildern von einem fotografischen Gerät bereit, das durch einen gültigen MediaStreamTrack referenziert wird.

Konstruktor

ImageCapture()

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

Instanz-Eigenschaften

ImageCapture.track Schreibgeschützt

Gibt eine Referenz auf den MediaStreamTrack zurück, der an den Konstruktor übergeben wurde.

Instanz-Methoden

ImageCapture.takePhoto()

Macht eine einzelne Belichtung mit dem Videogerät, das einen MediaStreamTrack liefert, 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 Foto-Konfigurationseinstellungen enthält.

ImageCapture.grabFrame()

Macht einen Schnappschuss des Live-Videos in einem MediaStreamTrack, wobei ein ImageBitmap zurückgegeben wird, wenn erfolgreich.

Beispiel

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

Dieses Beispiel zeigt, grob gesagt, einen MediaStreamTrack, der aus dem MediaStream eines Geräts extrahiert wurde. Der Track wird dann verwendet, um ein ImageCapture-Objekt zu erstellen, sodass takePhoto() und grabFrame() aufgerufen werden können. Schließlich zeigt es, wie die Ergebnisse dieser Aufrufe auf ein Canvas-Objekt angewendet werden können.

js
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

BCD tables only load in the browser