RestrictionTarget: fromElement() statische Methode

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: none ausgeblendet 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 über Window.postMessage() übermittelt).

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.

// 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.

• Screen Capture API
• Verwendung der Element Capture und Region Capture APIs