Signatur
Beschreibung
Die schreibgeschützte Eigenschaft Presentation.receiver gehört zur Presentation API, mit der eine Webseite (der Controller) Inhalte auf einem zweiten Bildschirm ausgibt, etwa auf einem Beamer, einem Chromecast oder einem angeschlossenen Monitor. Die Seite, die auf diesem zweiten Bildschirm läuft, ist der Receiver. Nur in diesem empfangenden Kontext liefert navigator.presentation.receiver ein PresentationReceiver-Objekt.
Über receiver.connectionList erhält die Empfangsseite ein Promise auf eine PresentationConnectionList. Diese enthält alle aktuellen Verbindungen zu steuernden Seiten und löst bei neuen Verbindungen das Ereignis connectionavailable aus. Über jede PresentationConnection tauschen Controller und Receiver dann Nachrichten per send() und dem message-Ereignis aus.
In einem normalen Browser-Tab, also einem steuernden oder gar keinem Präsentationskontext, ist der Wert null. Deshalb eignet sich die Eigenschaft auch, um zu erkennen, ob eine Seite gerade als Präsentation angezeigt wird, und die Oberfläche darauf abzustimmen, zum Beispiel ohne Bedienelemente und im Vollbild.
Rückgabewert
PresentationReceiver-Objekt des empfangenden Kontexts. In allen anderen Kontexten ist der Wert null.Beispiele
Prüfen, ob die Seite als Präsentation läuft
const isReceiver = Boolean(navigator.presentation?.receiver);
if (isReceiver) {
document.body.classList.add('presentation-mode');
console.log('Seite läuft als Präsentation auf einem zweiten Bildschirm.');
} else {
console.log('Normaler Browser-Kontext.');
}Eingehende Verbindungen annehmen und Nachrichten empfangen
const setupConnection = (connection) => {
connection.addEventListener('message', (event) => {
const { type, slide } = JSON.parse(event.data);
if (type === 'goto') {
document.querySelector('#slide').textContent = `Folie ${slide}`;
connection.send(JSON.stringify({ type: 'ack', slide }));
}
});
connection.addEventListener('close', () => console.log('Controller getrennt'));
};
const initReceiver = async () => {
const receiver = navigator.presentation?.receiver;
if (!receiver) return;
const list = await receiver.connectionList;
// Bereits bestehende Verbindungen
list.connections.forEach(setupConnection);
// Später hinzukommende Verbindungen
list.addEventListener('connectionavailable', (event) => {
setupConnection(event.connection);
});
};
initReceiver();Nachricht an alle verbundenen Controller senden
const broadcast = async (payload) => {
const receiver = navigator.presentation?.receiver;
if (!receiver) return 0;
const { connections } = await receiver.connectionList;
const open = connections.filter((c) => c.state === 'connected');
open.forEach((c) => c.send(JSON.stringify(payload)));
return open.length;
};
broadcast({ type: 'status', message: 'Präsentation bereit' })
.then((n) => console.log(`An ${n} Controller gesendet`));// Wichtig · Fallstricke
- Experimentell: Die Presentation API wird nur von Chromium-basierten Browsern und dort nur teilweise unterstützt. Firefox und Safari bieten sie nicht an. Prüfen Sie deshalb immer mit Optional Chaining (
navigator.presentation?.receiver), ob die API vorhanden ist. - Der Wert ist in steuernden Seiten und normalen Tabs
null. Werreceiver.connectionListaufruft, ohne vorher aufnullzu prüfen, erhält einenTypeError. - Die API funktioniert nur in einem sicheren Kontext (HTTPS).
- Nachrichten von Controllern sollten Sie als nicht vertrauenswürdige Eingaben behandeln. Prüfen Sie sie und setzen Sie sie nie ungefiltert per
innerHTMLin die Seite ein (XSS-Gefahr). - Ob
navigator.presentationin einem empfangenden Kontext existiert, hängt vom Browser ab. Einige Implementierungen stellen die Empfangsseite nur über bestimmte Anzeigeziele wie Cast-Geräte bereit.