RestrictionTarget: Methode fromElement()

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 fromElement() statische Methode der RestrictionTarget Schnittstelle gibt eine RestrictionTarget Instanz zurück, die verwendet werden kann, um eine aufgezeichnete Videospur auf ein bestimmtes DOM-Element (plus dessen Nachkommen) zu beschränken.

Syntax

js
RestrictionTarget.fromElement(element)

Parameter

element

Ein Verweis auf ein Element, das Sie als Beschränkungsziel verwenden möchten. Damit ein Element als Beschränkungsziel verwendet werden kann, muss es:

  • Einen Stacking-Kontext bilden.
  • Im 3D-Raum abgeflacht sein (zum Beispiel nicht von 3D-Transformationen betroffen).
  • Gerendert sein (zum Beispiel nicht außerhalb des Bildschirms oder über display: none versteckt sein).
  • Nur ein Box-Fragment enthalten (zum Beispiel nicht über mehrere Zeilen hinweg gebrochen sein).

Wenn es die oben genannten Kriterien nicht erfüllt, wird es als nicht für die Beschränkung geeignet angesehen.

Zudem wird das Element nicht erfasst, wenn die eingeschränkte Spur Klone hat (das heißt, erstellt durch BrowserCaptureMediaStreamTrack.clone()) oder von einem anderen Tab als dem aktuellen Tab des Benutzers aufgenommen wird (zum Beispiel über Window.postMessage() übergeben).

Hinweis: Wenn das Element erfasst wird, ist ein darauf gesetzter Alpha-Kanal-Wert nicht enthalten. Ist das Beschränkungsziel-Element halbtransparent, wird es in der Aufnahme vollständig undurchsichtig und sieht daher anders aus.

Rückgabewert

Ein Promise, das sich zu einem RestrictionTarget-Objekt auflöst, das dann an BrowserCaptureMediaStreamTrack.restrictTo() übergeben werden kann, um das in der Spur aufgenommene Video nur auf das bestimmte DOM-Element zu beschränken, mit dem das RestrictionTarget erstellt wurde.

RestrictionTarget-Objekte sind serialisierbar. Sie können an ein anderes Dokument mit Mechanismen wie Window.postMessage() übergeben werden.

Das Versprechen wird abgelehnt, wenn das Beschränkungsziel-Element nicht für die Beschränkung geeignet ist.

Beispiele

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

// Create restriction target from DOM element
const demoElem = document.querySelector("#demo");
const restrictionTarget = await RestrictionTarget.fromElement(demoElem);

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

// Restrict video track
await track.restrictTo(restrictionTarget);

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

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

Spezifikationen

Specification
Element Capture
# dom-restrictiontarget-fromelement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch