RestrictionTarget: fromElement() statische 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 fromElement() statische Methode des RestrictionTarget Interfaces gibt eine RestrictionTarget Instanz zurück, die verwendet werden kann, um eine aufgenommene Videospur auf ein bestimmtes DOM-Element (plus dessen Nachkommen) zu beschränken.
Syntax
RestrictionTarget.fromElement(element)
Parameter
element-
Eine Referenz auf ein
Element, das als Beschränkungsziel verwendet werden soll. Damit ein Element als Beschränkungsziel verwendet werden kann, muss es:- Einen Stacking-Kontext bilden.
- Im 3D-Raum abgeflacht sein (zum Beispiel, es unterliegt keinen 3D Transformierungen).
- Gerendert sein (zum Beispiel, nicht außerhalb des Bildschirms oder über
display: noneausgeblendet sein). - Nur ein Box-Fragment enthalten (zum Beispiel, nicht über mehrere Zeilen verteilt sein).
Wenn es die obigen Kriterien nicht erfüllt, wird es als nicht für die Beschränkung geeignet angesehen.
Darüber hinaus wird das Element nicht erfasst, wenn die beschränkte Spur Klone hat (das heißt, erstellt durch
BrowserCaptureMediaStreamTrack.clone()) oder aus einem anderen Tab als dem aktuellen Nutzertab aufgenommen wird (zum Beispiel überWindow.postMessage()übermittelt).
Hinweis: Wenn das Element erfasst wird, ist ein darauf gesetzter Alpha-Kanal-Wert nicht enthalten. Wenn das Beschränkungsziel-Element halbtransparent ist, wird es in der Aufnahme vollständig opak und sieht daher anders aus.
Rückgabewert
Ein Promise, das auf ein RestrictionTarget Objektinstanz auflöst, das dann an BrowserCaptureMediaStreamTrack.restrictTo() übergeben werden kann, um das in der Spur erfasste Video nur auf das bestimmte DOM-Element zu beschränken, mit dem das RestrictionTarget erstellt wurde.
RestrictionTarget Objekte sind serialisierbar. Sie können mit Mechanismen wie Window.postMessage() an ein anderes Dokument übergeben werden.
Das Promise wird abgelehnt, wenn das Beschränkungsziel-Element nicht für die Beschrä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;
Siehe Verwendung der Element Capture und Region Capture APIs für Beispielcode im Kontext.
Spezifikationen
| Specification |
|---|
| Element Capture # dom-restrictiontarget-fromelement |
Browser-Kompatibilität
Loading…