Navigator.presentation — Eigenschaft · JavaScript-Referenz

Signatur

get Navigator.presentation

Beschreibung

navigator.presentation ist der Einstiegspunkt der Presentation API. Mit ihr zeigt eine Webseite Inhalte auf einem zweiten Bildschirm an, etwa auf einem Beamer, einem externen Monitor oder einem per Chromecast verbundenen Fernseher. Die Eigenschaft liefert ein Presentation-Objekt, das je nach Kontext zwei Rollen übernimmt.

Steuernde Seite (Controller): Über presentation.defaultRequest legt die Seite einen Standard-PresentationRequest fest, den der Browser zum Beispiel über sein Menü „Streamen…“ nutzt. Die eigentliche Präsentation startet meist mit new PresentationRequest(urls).start().
Empfangende Seite (Receiver): Auf der Seite, die auf dem zweiten Bildschirm läuft, liefert presentation.receiver ein PresentationReceiver-Objekt. Darüber erreicht die Seite die eingehenden Verbindungen (connectionList). In einem normalen Browserkontext ist receiver null.

Die Eigenschaft ist sinnvoll für Präsentations-, Foliensatz- oder Mediaplayer-Anwendungen, bei denen ein Gerät steuert und ein anderes anzeigt. Weil die API nur in Chromium-Browsern verfügbar ist, solltest du vor der Nutzung immer mit Feature-Detection prüfen, ob sie vorhanden ist.

Rückgabewert

Typ

Presentation | undefined

Beschreibung

Das Presentation-Objekt mit den Eigenschaften defaultRequest (PresentationRequest | null) und receiver (PresentationReceiver | null). In Browsern ohne Unterstützung ist die Eigenschaft nicht vorhanden, der Zugriff liefert dann undefined.

Beispiele

Unterstützung prüfen

const hasPresentation = 'presentation' in navigator && navigator.presentation !== null;

if (hasPresentation) {
  console.log('Presentation API verfügbar');
  console.log('Empfängerkontext:', navigator.presentation.receiver !== null);
} else {
  console.log('Presentation API nicht unterstützt');
}

Presentation API verfügbar Empfängerkontext: false

Standard-Präsentationsanfrage für das Browser-Menü setzen

if (navigator.presentation) {
  const request = new PresentationRequest(['/slides/receiver.html']);
  // Der Browser nutzt diese Anfrage z. B. über das Menü „Streamen…“
  navigator.presentation.defaultRequest = request;

  request.addEventListener('connectionavailable', (event) => {
    const connection = event.connection;
    connection.addEventListener('connect', () => {
      connection.send(JSON.stringify({ slide: 1 }));
    });
  });
}

Präsentation per Button starten (steuernde Seite)

const button = document.querySelector('#present');

button.addEventListener('click', async () => {
  if (!navigator.presentation) return;
  const request = new PresentationRequest(['/slides/receiver.html']);
  try {
    const connection = await request.start(); // benötigt eine Nutzeraktion
    connection.addEventListener('message', (e) => console.log('Empfänger:', e.data));
    connection.addEventListener('connect', () => connection.send('hallo'));
  } catch (err) {
    console.error('Start fehlgeschlagen:', err.name);
  }
});

Empfänger: bereit

Nachrichten auf der Empfängerseite verarbeiten

// receiver.html – läuft auf dem zweiten Bildschirm
const receiver = navigator.presentation?.receiver;

if (receiver) {
  const list = await receiver.connectionList;
  const handle = (connection) => {
    connection.addEventListener('message', (e) => {
      console.log('Befehl:', e.data);
      connection.send('bereit');
    });
  };
  list.connections.forEach(handle);
  list.addEventListener('connectionavailable', (e) => handle(e.connection));
}

Befehl: hallo

// Wichtig · Fallstricke

Experimentell und eingeschränkt verfügbar: Die API wird im Wesentlichen nur von Chromium-Browsern unterstützt (Chrome, Edge, Opera, auch auf Android). Firefox und Safari bieten sie nicht an. Prüfe deshalb vor jedem Zugriff mit 'presentation' in navigator.
Sicherer Kontext: Die Eigenschaft ist nur über HTTPS (oder auf localhost) verfügbar.
PresentationRequest.prototype.start() funktioniert nur nach einer Nutzeraktion (transiente Aktivierung), sonst wird das Promise mit InvalidAccessError abgelehnt. Bricht der Nutzer die Geräteauswahl ab, wird es mit NotAllowedError abgelehnt.
Über die Permissions-Policy presentation lässt sich die API sperren. In iframes ist sie nur nutzbar, wenn das Element allow="presentation" gesetzt hat.
receiver ist nur in einem vom Browser gestarteten Empfängerkontext gesetzt, sonst ist der Wert null.
Sicherheit: Behandle Nachrichten, die über PresentationConnection ankommen, als nicht vertrauenswürdig. Schreibe sie nicht ungeprüft in innerHTML.

Siehe auch

Presentation Navigator ClipboardItem.presentationStyle Navigator.geolocation Navigator.connection