Signatur
Beschreibung
Die Eigenschaft value eines PresentationAvailability-Objekts gibt an, ob der Browser derzeit mindestens ein Präsentationsdisplay findet, das mit den URLs des zugehörigen PresentationRequest kompatibel ist. Laut Spezifikation muss sie immer den zuletzt vom Browser gesetzten Wert liefern – sie ist also ein Momentaufnahme-Zustand, der sich jederzeit ändern kann.
An ein PresentationAvailability-Objekt kommt man über PresentationRequest.prototype.getAvailability(), das ein Promise zurückgibt. Typischer Anwendungsfall: Einen „Auf Bildschirm übertragen“-Button nur dann einblenden oder aktivieren, wenn tatsächlich ein Zielgerät verfügbar ist.
Weil sich die Verfügbarkeit ändert (Gerät eingeschaltet, WLAN verlassen, Kabel abgezogen), sollte man value nicht nur einmal auslesen, sondern zusätzlich auf das change-Event reagieren – per addEventListener("change", …) oder über die Eigenschaft onchange. Im Handler liest man dann erneut value aus.
Rückgabewert
true, wenn mindestens ein kompatibles Präsentationsdisplay verfügbar ist, sonst false. Schreibgeschützt.Beispiele
Verfügbarkeit einmalig abfragen
const request = new PresentationRequest(['https://example.com/receiver.html']);
const checkAvailability = async () => {
try {
const availability = await request.getAvailability();
console.log('Display verfügbar:', availability.value);
} catch (err) {
// NotSupportedError: Hintergrund-Überwachung nicht unterstützt
console.warn('Verfügbarkeit nicht ermittelbar:', err.name);
}
};
checkAvailability();Cast-Button dynamisch ein- und ausblenden
const castButton = document.querySelector('#cast-button');
const request = new PresentationRequest(['/slides/receiver.html']);
const updateButton = (available) => {
castButton.hidden = !available;
};
request.getAvailability()
.then((availability) => {
updateButton(availability.value);
// Auf spätere Änderungen reagieren
availability.addEventListener('change', () => {
updateButton(availability.value);
});
})
.catch(() => updateButton(true)); // Fallback: Button zeigen, start() zeigt Geräteauswahl
castButton.addEventListener('click', async () => {
const connection = await request.start();
console.log('Verbunden, Status:', connection.state);
});Mit onchange und Feature-Erkennung
if ('PresentationRequest' in window) {
const request = new PresentationRequest(['https://example.com/tv.html']);
const availability = await request.getAvailability();
availability.onchange = () => {
console.log(availability.value
? 'Präsentationsdisplay gefunden'
: 'Kein Präsentationsdisplay mehr erreichbar');
};
} else {
console.log('Presentation API wird nicht unterstützt');
}// Wichtig · Fallstricke
- Browser-Kompatibilität: Die Presentation API ist experimentell und praktisch nur in Chromium-Browsern (Chrome, Edge, Opera) verfügbar. Firefox und Safari unterstützen sie nicht – immer per
'PresentationRequest' in windowprüfen. - Sicherer Kontext: Nur über HTTPS (bzw.
localhost) nutzbar. valueist schreibgeschützt; eine Zuweisung wird ignoriert (im Strict ModeTypeError).getAvailability()kann mitNotSupportedErrorabgelehnt werden, wenn der Browser keine dauerhafte Überwachung unterstützt (z. B. auf manchen Mobilgeräten). Dann trotzdem einen Button anbieten –start()kann weiterhin funktionieren.value === falseheißt nicht zwingend „nie verfügbar“: Die Geräteerkennung läuft asynchron, der Wert kann kurz nach dem Abruf auftruewechseln. Deshalb immer aufchangereagieren.- Die Hintergrundsuche nach Displays verbraucht Energie; den Listener entfernen, wenn er nicht mehr benötigt wird.