BrowserCaptureMediaStreamTrack: cropTo()-Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die cropTo()-Methode des BrowserCaptureMediaStreamTrack-Interfaces schneidet einen Selbstaufnahme-Stream auf den Bereich zu, in dem ein bestimmtes DOM-Element gerendert wird.

Syntax

js
cropTo(cropTarget)

Parameter

cropTarget

Eine CropTarget-Instanz, die den Elementrenderingbereich darstellt, auf den der Stream zugeschnitten werden soll, oder null/undefined, in welchem Fall ein zuvor eingestellter Zuschnitt vom Track entfernt wird.

Rückgabewert

Ein Promise, das zu undefined aufgelöst wird.

Der Promise wird abgelehnt, wenn:

  • Der Track kind nicht "video" ist oder sein readyState nicht "live" ist.
  • Das Ziel-Element für den Zuschnitt nicht mehr existiert.
  • Der zugeschnittene Track nicht von dem Bildschirm des Nutzers erfasst wurde.
  • cropTarget keine Instanz von CropTarget, null oder undefined ist.
  • cropTarget in einem anderen Tab als dem erfassten erstellt wurde.

Hinweis: In Chromium wird cropTo() abgelehnt, wenn ein Track Klone hat (siehe Chrome-Issue 41482026).

Beispiele

Einfaches Beispiel für das Zuschneiden

js
// Options for getDisplayMedia()
const displayMediaOptions = {
  preferCurrentTab: true,
};

// Create crop target from DOM element
const demoElem = document.querySelector("#demo");
const cropTarget = await CropTarget.fromElement(demoElem);

// Capture video stream from user's webcam and isolate video track
const stream =
  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
const [track] = stream.getVideoTracks();

// Crop video track
await track.cropTo(cropTarget);

// Broadcast cropped stream in <video> element
videoElem.srcObject = stream;

Siehe Verwendung der Element- und Region-Capture-APIs für kontextbezogenen Beispielcode.

Das Zuschneiden stoppen

Sie können das Zuschneiden stoppen, indem Sie einen Aufruf von cropTo() auf einem zuvor zugeschnittenen Track tätigen und ihm das Argument null übergeben:

js
// Stop cropping
await track.cropTo(null);

Spezifikationen

Specification
Region Capture
# dom-browsercapturemediastreamtrack-cropto

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch