PresentationAvailability — Schnittstelle · JavaScript-Referenz

Signatur

interface PresentationAvailability extends EventTarget

Beschreibung

Ein PresentationAvailability-Objekt gehört zur Presentation API und beschreibt, ob für eine bestimmte PresentationRequest gerade mindestens eine passende Präsentationsanzeige verfügbar ist, zum Beispiel ein Chromecast, ein Smart-TV oder ein zweiter Bildschirm. Man erzeugt es nicht selbst. Man erhält es, indem man PresentationRequest.prototype.getAvailability() aufruft. Diese Methode liefert ein Promise, das mit dem Verfügbarkeitsobjekt erfüllt wird.

Die schreibgeschützte Eigenschaft value (boolean) ist true, solange mindestens eine kompatible Anzeige gefunden wird. Weil PresentationAvailability von EventTarget erbt, löst es das Event change aus, sobald sich value ändert. Du kannst es über addEventListener("change", …) oder die Eigenschaft onchange abonnieren.

Typischer Einsatz: Du blendest einen „Auf Bildschirm übertragen“-Button nur dann ein, wenn wirklich ein Ziel verfügbar ist. So klickt niemand ins Leere. Klickt der Nutzer den Button, startest du die Präsentation mit request.start().

Die Überwachung läuft im Hintergrund und kann Energie und Netzwerk belasten. Behalte das Objekt nur, solange du es wirklich brauchst, und entferne die Listener, wenn die Oberfläche nicht mehr sichtbar ist.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean		Schreibgeschützte Eigenschaft: `true`, wenn mindestens eine passende Präsentationsanzeige verfügbar ist, sonst `false`.
$onchange	((event: Event) => void) \| null	null	Event-Handler-Eigenschaft für das `change`-Event. Wird aufgerufen, sobald sich `value` ändert.

Rückgabewert

Typ

PresentationAvailability

Beschreibung

Wird von PresentationRequest.prototype.getAvailability() als erfüllter Wert eines Promise geliefert. Einen öffentlichen Konstruktor gibt es nicht.

Beispiele

Verfügbarkeit abfragen und Cast-Button steuern

const castButton = document.querySelector('#cast');
const request = new PresentationRequest(['https://example.com/receiver.html']);

const initCast = async () => {
  try {
    const availability = await request.getAvailability();
    // Ausgangszustand setzen
    castButton.hidden = !availability.value;
    console.log('Anzeige verfügbar:', availability.value);

    // Auf Änderungen reagieren
    availability.addEventListener('change', () => {
      castButton.hidden = !availability.value;
      console.log('Verfügbarkeit geändert:', availability.value);
    });
  } catch (err) {
    // NotSupportedError: Hintergrund-Überwachung wird nicht unterstützt
    console.warn('Keine Verfügbarkeitsüberwachung:', err.name);
    castButton.hidden = false; // Button trotzdem anbieten
  }
};

castButton.addEventListener('click', () => request.start());
initCast();

Anzeige verfügbar: false Verfügbarkeit geändert: true

onchange-Property verwenden und wieder abmelden

const request = new PresentationRequest('https://example.com/slides-receiver.html');

const watchAvailability = async () => {
  const availability = await request.getAvailability();
  availability.onchange = (event) => {
    console.log('Präsentationsziel:', event.target.value ? 'bereit' : 'nicht verfügbar');
  };
  // Überwachung nach 60 Sekunden beenden
  setTimeout(() => {
    availability.onchange = null;
    console.log('Überwachung beendet');
  }, 60_000);
};

watchAvailability();

Präsentationsziel: bereit Überwachung beendet

Feature-Erkennung vor der Nutzung

const supportsPresentation = () =>
  'PresentationRequest' in window &&
  typeof PresentationRequest.prototype.getAvailability === 'function';

if (supportsPresentation()) {
  const request = new PresentationRequest('/receiver.html');
  request.getAvailability()
    .then((a) => console.log('Startwert:', a.value))
    .catch((e) => console.log('Fehler:', e.name));
} else {
  console.log('Presentation API nicht unterstützt');
}

Presentation API nicht unterstützt

// Wichtig · Fallstricke

Browser-Kompatibilität: Die API ist experimentell und praktisch nur in Chromium-Browsern (Chrome, Edge) verfügbar. Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer per Feature-Erkennung, ob sie vorhanden ist.
Die API funktioniert nur in einem sicheren Kontext (HTTPS). In eingebetteten iframes ist sie außerdem an die Permissions Policy presentation gebunden.
getAvailability() kann mit NotSupportedError abgelehnt werden, wenn der Browser keine dauerhafte Überwachung im Hintergrund unterstützt, etwa auf manchen Mobilgeräten. In dem Fall kannst du request.start() trotzdem aufrufen. Der Browser zeigt dann selbst eine Geräteauswahl an.
value === false heißt nicht zwingend, dass kein Gerät existiert. Die Erkennung kann verzögert sein, zum Beispiel durch Netzwerk-Discovery wie mDNS oder DIAL.
Mehrfache Aufrufe von getAvailability() auf derselben Anfrage können dasselbe Objekt zurückgeben. Registriere Listener deshalb nicht doppelt.
Die Überwachung verbraucht Energie und Netzwerk. Gib nicht mehr benötigte Referenzen frei und entferne die Listener.

Siehe auch

Presentation PresentationConnectionAvailableEvent PresentationConnection PresentationConnectionList PresentationReceiver