RestrictionTarget: statische 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 aufgenommene Videospur auf ein angegebenes DOM-Element (plus seine Nachkommen) zu beschränken.
Syntax
RestrictionTarget.fromElement(element)
Parameter
element-
Eine Referenz zu einem
Element, das Sie als Einschränkungsziel verwenden möchten. Damit ein Element als Einschränkungsziel verwendet werden kann, muss es:- Einen Stacking-Kontext bilden.
- Im 3D-Raum abgeflacht sein (zum Beispiel darf es keinen 3D-Transformationen unterliegen).
- Gerendert sein (zum Beispiel nicht außerhalb des Bildschirms oder über
display: noneversteckt sein). - Nur ein Box-Fragment enthalten (zum Beispiel nicht über mehrere Zeilen hinweg gebrochen sein).
Wird keines der oben genannten Kriterien erfüllt, gilt es als nicht für eine Einschränkung geeignet.
Zusätzlich wird das Element nicht erfasst, wenn die eingeschränkte Spur Klone hat (d.h. erstellt durch
BrowserCaptureMediaStreamTrack.clone()) oder aus einem anderen Tab als dem aktuellen Benutzer-Tab erfasst wurde (z. B. überWindow.postMessage()übermittelt).
Hinweis: Wenn das Element erfasst wird, wird jeder darauf gesetzte Alpha-Kanal-Wert nicht eingeschlossen. Wenn das Einschränkungsziel-Element halbtransparent ist, wird es in der Aufnahme vollständig undurchsichtig und sieht daher anders aus.
Rückgabewert
Ein Promise, der zu einer RestrictionTarget-Objektinstanz aufgelöst wird, die dann an BrowserCaptureMediaStreamTrack.restrictTo() übergeben werden kann, um das im Track aufgenommene Video auf genau das bestimmte DOM-Element, mit dem das RestrictionTarget erstellt wurde, zu beschränken.
RestrictionTarget-Objekte sind serialisierbar. Sie können über Mechanismen wie Window.postMessage() an ein anderes Dokument übergeben werden.
Das Versprechen wird abgelehnt, wenn das Einschränkungsziel-Element nicht für eine Einschränkung geeignet ist.
Beispiele
// 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;
Sehen Sie sich Verwendung der Element Capture- und Region Capture-APIs für Beispielcode im Kontext an.
Spezifikationen
| Specification |
|---|
| Element Capture # dom-restrictiontarget-fromelement |