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 der BrowserCaptureMediaStreamTrack-Schnittstelle beschneidet einen Selbstaufnahme-Stream auf den Bereich, in dem ein angegebenes DOM-Element gerendert wird.

Syntax

js
cropTo(cropTarget)

Parameter

cropTarget

Eine Instanz von CropTarget, die den Bereich des renderten Elements repräsentiert, auf den der Stream beschnitten werden soll, oder null/undefined. In diesem Fall wird ein zuvor festgelegtes Beschneiden vom Track entfernt.

Rückgabewert

Ein Promise, das zu undefined aufgelöst wird.

Das Promise wird abgelehnt, wenn:

  • Der Track kind nicht "video" ist oder dessen readyState nicht "live" ist.
  • Das Element des Beschneidungsziels nicht mehr existiert.
  • Der zu beschneidende Track nicht von dem Bildschirm des Benutzers erfasst wurde.
  • cropTarget keine Instanz von CropTarget ist, oder null/undefined ist.
  • cropTarget in einem anderen Tab erstellt wurde, als der, der erfasst wird.

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

Beispiele

Einfaches Beispiel für das Beschneiden

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 Capture und Region Capture APIs für Beispielcode im Kontext.

Beenden des Beschneidens

Sie können das Beschneiden beenden, indem Sie einen Aufruf von cropTo() auf einen zuvor beschnittenen Track machen und ihm das Argument null übergeben:

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

Spezifikationen

Specification
Region Capture
# dom-browsercapturemediastreamtrack-cropto

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
cropTo
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch