CropTarget: fromElement() 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 CropTarget-Interfaces gibt eine CropTarget-Instanz zurück, die verwendet werden kann, um einen aufgenommenen Videokanal auf den Bereich zu beschneiden, in dem ein bestimmtes Element gerendert wird.
Da die Region Capture API auf einen Bereich des aktuellen Browser-Tabs zuschneidet, anstatt ein bestimmtes Element aufzunehmen, wird jeglicher Inhalt, der über dem zugeschnittenen Bereich gezeichnet wird, in der Aufnahme angezeigt.
Syntax
CropTarget.fromElement(element)
Parameter
element-
Ein Verweis auf ein
Element, das Sie als Zuschneideziel verwenden möchten. Damit ein Element als Zuschneideziel verwendet werden kann, muss es:- Auf dem Bildschirm sein
- Sichtbar sein, das heißt, nicht beispielsweise durch
display: noneausgeblendet.
Zusätzlich wird das Element nicht erfasst, wenn der eingeschränkte Kanal Klone hat (das heißt, erstellt durch
BrowserCaptureMediaStreamTrack.clone()) oder von einem anderen Tab als dem aktuellen Tab des Benutzers aufgenommen wird (zum Beispiel überWindow.postMessage()übergeben).
Rückgabewert
Ein Promise, das zu einer CropTarget-Objektinstanz aufgelöst wird, die dann an BrowserCaptureMediaStreamTrack.CropTo() übergeben werden kann, um das im Kanal aufgenommene Video nur auf den Bereich, in dem das angegebene DOM-Element gerendert wird, zu beschneiden.
CropTarget-Objekte sind serialisierbar. Sie können an ein anderes Dokument mit Mechanismen wie Window.postMessage() übergeben werden.
Beispiele
// Options for getDisplayMedia()
const displayMediaOptions = {
preferCurrentTab: true,
};
// Create crop target from DOM element
const demoElem = document.querySelector("#demo");
const cropTarget = await CropTarget.fromElement(demoElem);
// Capture video stream from user's webcam and isolate video track
const stream =
await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
const [track] = stream.getVideoTracks();
// Crop video track
await track.cropTo(cropTarget);
// Broadcast cropped stream in <video> element
videoElem.srcObject = stream;
Sehen Sie Verwendung der Element Capture und Region Capture APIs für kontextbezogene Beispielcodes.
Spezifikationen
| Specification |
|---|
| Region Capture # dom-croptarget-fromelement |