PresentationReceiver — Schnittstelle · JavaScript-Referenz

Signatur

interface PresentationReceiver

Beschreibung

PresentationReceiver ist Teil der Presentation API und steht ausschließlich in dem Browsing-Kontext zur Verfügung, der als Präsentation gestartet wurde, also zum Beispiel die Seite, die auf einem Chromecast oder einem zweiten Bildschirm läuft. Man greift nicht über einen Konstruktor darauf zu, sondern über navigator.presentation.receiver. In einer normalen (steuernden) Seite ist dieser Wert null.

Die einzige Eigenschaft ist connectionList. Sie liefert ein Promise<PresentationConnectionList>, das mit der Liste aller eingehenden PresentationConnection-Objekte erfüllt wird. Über jede Verbindung empfängt man mit dem message-Event Nachrichten und sendet mit send() Nachrichten an die steuernde Seite zurück. Neue Controller, die sich später verbinden, meldet das Event connectionavailable der Liste.

Typische Anwendungsfälle sind Präsentationsfolien, Spiele mit zweitem Bildschirm oder Medienwiedergabe: Das Smartphone oder der Laptop steuert, und die Empfängerseite zeigt den Inhalt an und reagiert auf Befehle.

Rückgabewert

Typ

PresentationReceiver | null

Beschreibung

navigator.presentation.receiver liefert im Empfängerkontext ein PresentationReceiver-Objekt, sonst null. Die Eigenschaft connectionList liefert ein Promise<PresentationConnectionList>.

Beispiele

Empfänger erkennen und Verbindungen abrufen

const receiver = navigator.presentation?.receiver;

if (!receiver) {
  console.log('Diese Seite läuft nicht als Präsentation.');
} else {
  const list = await receiver.connectionList;
  console.log(`Verbundene Controller: ${list.connections.length}`);
}

Verbundene Controller: 1

Befehle der Controller-Seite verarbeiten und antworten

const slides = document.querySelectorAll('.slide');
let current = 0;

const show = (index) => {
  slides.forEach((s, i) => s.hidden = i !== index);
};

const setupConnection = (connection) => {
  connection.addEventListener('message', (event) => {
    const { command } = JSON.parse(event.data);
    if (command === 'next') current = Math.min(current + 1, slides.length - 1);
    if (command === 'prev') current = Math.max(current - 1, 0);
    show(current);
    // Status an den Controller zurücksenden
    connection.send(JSON.stringify({ slide: current }));
  });

  connection.addEventListener('close', (event) => {
    console.log('Verbindung geschlossen:', event.reason);
  });
};

const list = await navigator.presentation.receiver.connectionList;
list.connections.forEach(setupConnection);
// Später hinzukommende Controller ebenfalls einbinden
list.addEventListener('connectionavailable', (event) => {
  setupConnection(event.connection);
});

Nachricht an alle Controller verteilen (Broadcast)

const broadcast = async (payload) => {
  const list = await navigator.presentation.receiver.connectionList;
  const message = JSON.stringify(payload);
  list.connections
    .filter((c) => c.state === 'connected')
    .forEach((c) => c.send(message));
};

const video = document.querySelector('video');
video.addEventListener('ended', () => broadcast({ event: 'videoEnded' }));

// Wichtig · Fallstricke

Experimentell und nur eingeschränkt verfügbar: Die Presentation API wird praktisch nur von Chromium-Browsern unterstützt. Die Empfängerseite (receiver) gibt es nur, wenn der Browser selbst als Präsentationsanzeige dient, etwa beim Cast-Empfänger oder beim 1-UA-Modus. Firefox und Safari unterstützen sie nicht.
Außerhalb eines Präsentationskontexts ist navigator.presentation.receiver null. Prüfe den Wert deshalb immer, zum Beispiel mit optionaler Verkettung (?.).
Die API erfordert einen sicheren Kontext (HTTPS).
connectionList ist ein Promise und keine synchrone Liste. Denke an await bzw. then().
Sicherheit: Behandle eingehende Nachrichten als nicht vertrauenswürdige Eingaben. Parse JSON in einem try/catch, prüfe die Befehle gegen eine Positivliste und füge Inhalte niemals ungeprüft per innerHTML ein (XSS-Gefahr).
Sende nur Nachrichten über Verbindungen mit state === 'connected', sonst wird eine InvalidStateError-Ausnahme ausgelöst.

Siehe auch

Presentation PresentationRequest PresentationConnection OrientationSensor FragmentDirective