Presentation — Schnittstelle · JavaScript-Referenz

Signatur

interface Presentation

Beschreibung

Das Interface Presentation ist der zentrale Zugriffspunkt auf die Presentation API. Du erreichst es ausschließlich über navigator.presentation. Die API unterscheidet zwei Rollen: Der steuernde Benutzeragent (Controlling User Agent) ist die Seite, die eine Präsentation startet und fernsteuert, etwa eine Folien-Fernbedienung auf dem Laptop. Der empfangende Benutzeragent (Receiving User Agent) ist die Seite, die auf dem Zweitbildschirm läuft und die Inhalte anzeigt.

Je nach Rolle stellt das Objekt unterschiedliche Eigenschaften bereit:

defaultRequest: Nur für die steuernde Seite. Hier hinterlegst du einen PresentationRequest. Wählt der Nutzer im Browser-Menü „Streamen…“ bzw. „Cast“ aus, verwendet der Browser diese Anfrage statt der normalen Tab-Spiegelung.
receiver: Nur für die empfangende Seite. Liefert ein PresentationReceiver-Objekt, über das die Seite eingehende Verbindungen von steuernden Seiten entgegennimmt. Auf einer normalen Seite ist der Wert null.

Die API ist für Präsentations-Apps, Medienwiedergabe auf dem Fernseher, Dashboards auf Großbildschirmen und Zweitbildschirm-Spiele gedacht. Die eigentliche Verbindung baust du mit new PresentationRequest(urls).start() auf. Danach tauschen beide Seiten über eine PresentationConnection mit send() und dem message-Event Nachrichten aus.

Parameter

Name	Typ	Default	Beschreibung
$defaultRequest	PresentationRequest \| null	null	Nur steuernder Benutzeragent: Standardanfrage, die der Browser verwendet, wenn der Nutzer die Präsentation über die Browser-Oberfläche startet (z. B. über das Cast-Menü).
$receiver	PresentationReceiver \| null	null	Nur lesbar. Im empfangenden Benutzeragenten ein `PresentationReceiver`, sonst `null`.

Rückgabewert

Typ

Presentation

Beschreibung

Über navigator.presentation erhältst du die einzige Presentation-Instanz des Dokuments. Einen öffentlichen Konstruktor gibt es nicht. In Browsern ohne Unterstützung ist die Eigenschaft undefined.

Beispiele

Unterstützung und Rolle ermitteln

const presentation = navigator.presentation;

if (!presentation) {
  console.log('Presentation API wird nicht unterstützt');
} else if (presentation.receiver) {
  console.log('Diese Seite läuft auf dem Zweitbildschirm (Empfänger)');
} else {
  console.log('Diese Seite ist die steuernde Seite');
}

Diese Seite ist die steuernde Seite

Steuernde Seite: Standardanfrage setzen und Präsentation starten

const request = new PresentationRequest(['/folien/empfaenger.html']);

// Wird genutzt, wenn der Nutzer im Browser-Menü „Streamen…“ wählt
navigator.presentation.defaultRequest = request;

// Das Browser-Menü startet die Präsentation: Verbindung übernehmen
request.addEventListener('connectionavailable', ({ connection }) => {
  connection.addEventListener('connect', () => connection.send('folie:1'));
});

// Alternativ selbst starten (erfordert eine Nutzeraktion)
document.querySelector('#start').addEventListener('click', async () => {
  try {
    const connection = await request.start();
    connection.addEventListener('message', (e) => console.log('Antwort:', e.data));
    document.querySelector('#weiter').onclick = () => connection.send('weiter');
  } catch (err) {
    console.error('Start abgebrochen oder kein Bildschirm:', err.name);
  }
});

Antwort: ok

Empfangende Seite: Verbindungen über receiver annehmen

// empfaenger.html – läuft auf dem Beamer bzw. Chromecast
const handleConnection = (connection) => {
  connection.addEventListener('message', (event) => {
    console.log('Befehl erhalten:', event.data);
    connection.send('ok');
  });
};

if (navigator.presentation?.receiver) {
  const list = await navigator.presentation.receiver.connectionList;
  list.connections.forEach(handleConnection);
  list.addEventListener('connectionavailable', (e) => handleConnection(e.connection));
}

Befehl erhalten: weiter

Verfügbarkeit von Anzeigen überwachen

const request = new PresentationRequest(['/empfaenger.html']);
const button = document.querySelector('#start');

try {
  const availability = await request.getAvailability();
  button.hidden = !availability.value;
  availability.addEventListener('change', () => {
    button.hidden = !availability.value;
  });
} catch {
  // Keine Hintergrund-Überwachung möglich: Button trotzdem anzeigen
  button.hidden = false;
}

// Wichtig · Fallstricke

Experimentell und eingeschränkt verfügbar: Die API ist nur in Chromium-Browsern implementiert. Firefox und Safari unterstützen sie nicht. Prüfe immer vorher mit 'presentation' in navigator bzw. navigator.presentation?., ob sie vorhanden ist.
Nur in sicheren Kontexten: Die API funktioniert nur über HTTPS oder localhost. Aus iframes ist der Zugriff nur möglich, wenn die Permissions Policy presentation ihn erlaubt.
PresentationRequest.start() braucht eine Nutzeraktion (z. B. einen Klick). Ohne sie wird das Promise mit InvalidAccessError abgelehnt. Bricht der Nutzer die Geräteauswahl ab, wird es mit NotAllowedError abgelehnt.
receiver ist auf normalen Seiten immer null. Nur die vom Browser geöffnete Empfängerseite erhält ein PresentationReceiver-Objekt.
Nachrichten über PresentationConnection.send() kommen von einer anderen Seite. Prüfe und validiere sie deshalb, bevor du sie weiterverarbeitest. Setze sie nie ungeprüft per innerHTML ein, sonst droht XSS.
getAvailability() kann mit NotSupportedError abgelehnt werden, wenn der Browser Anzeigen nicht dauerhaft im Hintergrund überwachen kann (z. B. um Akku zu sparen).

Siehe auch

Navigator.presentation PresentationReceiver CSSAnimation Credential Geolocation