BrowserCaptureMediaStreamTrack: restrictTo()-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 restrictTo()-Methode der BrowserCaptureMediaStreamTrack-Schnittstelle beschränkt einen Selbstaufnahme-Stream auf ein bestimmtes DOM-Element (und dessen Nachkommen).

Syntax

js
restrictTo(restrictionTarget)

Parameter

restrictionTarget

Eine Instanz von RestrictionTarget, die das Element repräsentiert, auf das der Stream beschränkt werden soll, oder null/undefined, in welchem Fall jegliche zuvor gesetzte Einschränkung von der Spur entfernt wird.

Rückgabewert

Ein Promise, das zu undefined aufgelöst wird.

Das Promise wird abgelehnt, wenn:

  • Der kind der Spur nicht "video" ist, oder ihr readyState nicht "live" ist.
  • Das Ziel-Element der Einschränkung nicht mehr existiert.
  • Die eingeschränkte Spur keine Spur ist, die vom Bildschirm des Benutzers aufgenommen wurde.
  • restrictionTarget keine Instanz von RestrictionTarget, null oder undefined ist.
  • restrictionTarget in einem anderen Tab erstellt wurde als dem, der aufgenommen wird.

Hinweis: In Chromium wird ein Aufruf von restrictTo() abgelehnt, wenn eine Spur Klone hat (siehe Chrome issue 41482026).

Beispiele

Grundlegendes Einschränkungsbeispiel

js
// 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 Verwendung der Element-Capture- und Region-Capture-APIs für Beispielcode im Kontext.

Beenden der Einschränkung

Sie können die Einschränkung aufheben, indem Sie restrictTo() auf demselben Track aufrufen und null als Argument übergeben:

js
// Stop restricting
await track.restrictTo(null);

Spezifikationen

Specification
Element Capture
# dom-browsercapturemediastreamtrack-restrictto

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
restrictTo
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch