PresentationRequest.reconnect() — Methode · JavaScript-Referenz

Signatur

PresentationRequest.prototype.reconnect(presentationId)

Beschreibung

Die Methode reconnect() der Presentation API stellt die Verbindung zu einer bereits gestarteten Präsentation wieder her, etwa auf einem Chromecast oder einem zweiten Bildschirm. Das ist nützlich, wenn die steuernde Seite neu geladen wurde, der Nutzer in einem anderen Tab weitermacht oder die Verbindung zwischenzeitlich abgebrochen ist. Die Präsentation auf dem Empfänger läuft in der Zwischenzeit weiter.

Anders als bei start() öffnet sich keine Geräteauswahl. Der User-Agent sucht unter den bekannten Präsentationen eine, deren URL zu einer der URLs des PresentationRequest passt und deren ID mit presentationId übereinstimmt. Wird eine gefunden, wird das Promise mit einer PresentationConnection erfüllt. Ist diese schon verbunden, wird die vorhandene Verbindung zurückgegeben, ansonsten geht sie über den Zustand connecting in connected über.

In der Praxis speichert man connection.id nach einem erfolgreichen start() (zum Beispiel in localStorage) und ruft beim nächsten Seitenaufruf reconnect() mit dieser ID auf. Wird keine passende Präsentation gefunden, wird das Promise mit einer NotFoundError-DOMException abgelehnt.

Parameter

Name	Typ	Default	Beschreibung
$presentationId Pflicht	string		Die ID einer bestehenden Präsentation, also der Wert von `PresentationConnection.id` aus einer früheren Verbindung.

Rückgabewert

Typ

Promise<PresentationConnection>

Beschreibung

Ein Promise, das mit der (wieder) verbundenen PresentationConnection erfüllt wird. Es wird mit NotFoundError abgelehnt, wenn keine passende Präsentation existiert, und mit InvalidAccessError oder SecurityError, wenn der Aufruf nicht erlaubt ist, etwa in einem Sandbox-Iframe ohne Berechtigung.

Beispiele

Präsentations-ID speichern und nach dem Neuladen wiederverbinden

const request = new PresentationRequest(['https://example.com/receiver.html']);

// Beim ersten Start die ID merken
const startPresentation = async () => {
  const connection = await request.start();
  localStorage.setItem('presentationId', connection.id);
  return connection;
};

// Beim Laden der Seite versuchen, wieder zu verbinden
const tryReconnect = async () => {
  const id = localStorage.getItem('presentationId');
  if (!id) return null;
  try {
    const connection = await request.reconnect(id);
    console.log('Wieder verbunden, Zustand:', connection.state);
    return connection;
  } catch (err) {
    if (err.name === 'NotFoundError') {
      localStorage.removeItem('presentationId');
      console.log('Präsentation existiert nicht mehr.');
    }
    return null;
  }
};

tryReconnect();

Wieder verbunden, Zustand: connected

Auf den Verbindungsaufbau warten und Nachrichten senden

const request = new PresentationRequest('https://example.com/slides.html');

const resume = async (presentationId) => {
  const connection = await request.reconnect(presentationId);

  const send = () => connection.send(JSON.stringify({ action: 'goto', slide: 5 }));

  if (connection.state === 'connected') {
    send();
  } else {
    connection.addEventListener('connect', send, { once: true });
  }

  connection.addEventListener('message', (event) => {
    console.log('Empfänger meldet:', event.data);
  });
};

resume(localStorage.getItem('presentationId'));

Empfänger meldet: {"slide":5}

Feature-Erkennung mit Rückfall auf start()

const connectToDisplay = async (savedId) => {
  if (!('PresentationRequest' in window)) {
    console.warn('Presentation API wird nicht unterstützt.');
    return null;
  }
  const request = new PresentationRequest(['/receiver.html']);
  if (savedId) {
    try {
      return await request.reconnect(savedId);
    } catch {
      // Präsentation beendet oder unbekannt
    }
  }
  // start() braucht eine Nutzeraktion, deshalb im Klick-Handler aufrufen
  return null;
};

document.querySelector('#cast').addEventListener('click', async () => {
  const request = new PresentationRequest(['/receiver.html']);
  const connection = await request.start();
  localStorage.setItem('presentationId', connection.id);
});

// Wichtig · Fallstricke

Experimentelle API: Die Presentation API wird praktisch nur von Chromium-basierten Browsern auf dem Desktop und unter Android unterstützt. Firefox und Safari bieten sie nicht an. Prüfe deshalb immer mit 'PresentationRequest' in window, ob sie vorhanden ist.
Die API funktioniert nur in einem sicheren Kontext (HTTPS). In Iframes muss die Permissions-Policy presentation erlaubt sein.
Anders als start() braucht reconnect() keine Nutzeraktion. Man kann es also direkt beim Laden der Seite aufrufen.
Die Präsentations-URL muss zu einer der URLs des PresentationRequest passen. Eine korrekte ID mit einer anderen URL führt zu NotFoundError.
Präsentationen, die mit connection.terminate() beendet wurden, lassen sich nicht wiederverbinden. Eine mit close() nur geschlossene Verbindung schon.
Die gespeicherte ID ist zwar kein Geheimnis, trotzdem solltest du sie nur für den eigenen Ursprung speichern. Veraltete IDs räumst du nach einem NotFoundError am besten weg.

Siehe auch

PresentationRequest.getAvailability() PresentationRequest.start() PresentationConnection.send() PresentationConnection.close() new PresentationRequest()