RestrictionTarget: Die statische Methode fromElement()

element

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

• Einen Stacking Context bilden.
• Im 3D-Raum abgeflacht sein (zum Beispiel darf es keinen 3D-Transforms unterliegen).
• Gerendert sein (zum Beispiel darf es sich nicht außerhalb des sichtbaren Bereichs befinden oder durch display: none ausgeblendet sein).
• Nur ein Box-Fragment enthalten (zum Beispiel darf es nicht über mehrere Zeilen aufgeteilt sein).

Wenn es die oben genannten Kriterien nicht erfüllt, gilt es als nicht geeignet für die Einschränkung.

Zusätzlich wird das Element nicht erfasst, wenn die eingeschränkte Spur Klone hat (zum Beispiel durch BrowserCaptureMediaStreamTrack.clone() erstellt) oder aus einem anderen Tab als dem aktuellen Benutzer-Tab erfasst wird (zum Beispiel über Window.postMessage() übergeben).

Ein Promise, das in eine RestrictionTarget-Objektinstanz aufgelöst wird, die dann an BrowserCaptureMediaStreamTrack.restrictTo() übergeben werden kann, um das in der Spur erfasste Video nur auf das bestimmte DOM-Element einzuschrä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 Eingrenzungsziel-Element nicht für die Einschrä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 kontextbezogene Code-Beispiele.

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