new PresentationRequest() — Methode · JavaScript-Referenz

Signatur

new PresentationRequest(url | urls)

Beschreibung

Der Konstruktor PresentationRequest() gehört zur Presentation API. Er legt fest, welche Seite (Präsentations-URL) auf einem externen Anzeigegerät laufen soll. Das kann ein per Kabel angeschlossener Monitor, ein Beamer oder ein Cast-Empfänger im Netzwerk sein. Beim Erzeugen passiert noch nichts Sichtbares. Das Objekt hält nur die Anfrage fest.

Erst ein Aufruf von request.start() öffnet den Geräte-Auswahldialog des Browsers. Wählt die Person ein Gerät aus, wird das Promise mit einer PresentationConnection erfüllt. Über diese Verbindung tauschen die steuernde Seite (Controller) und die dargestellte Seite (Receiver) Nachrichten aus. Mit request.reconnect(id) verbindet man sich erneut mit einer schon laufenden Präsentation. request.getAvailability() meldet, ob gerade passende Anzeigegeräte erreichbar sind.

Man kann eine einzelne URL oder ein Array von URLs übergeben. Bei einem Array wählt der Browser die erste URL, die das gewählte Gerät unterstützt. So lassen sich Ausweichlösungen angeben, z. B. zuerst eine Cast-spezifische URL (cast:) und danach eine normale HTTPS-Seite. Relative URLs werden relativ zur Basis-URL des Dokuments aufgelöst.

Parameter

Name	Typ	Default	Beschreibung
$url Pflicht	string		Eine einzelne Präsentations-URL. Entweder `url` oder `urls` muss übergeben werden. Relative Angaben werden gegen die Dokument-URL aufgelöst.
$urls	string[]		Alternative zu `url`: ein nicht leeres Array von URLs, nach Priorität sortiert. Der Browser nimmt die erste URL, die das gewählte Anzeigegerät unterstützt.

Rückgabewert

Typ

PresentationRequest

Beschreibung

Ein neues PresentationRequest-Objekt mit den Methoden start(), reconnect() und getAvailability() und dem Ereignis connectionavailable.

Beispiele

Präsentation per Button-Klick starten

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

// Standard-Request für die Browser-Cast-Schaltfläche festlegen (optional)
navigator.presentation.defaultRequest = request;

document.querySelector('#present').addEventListener('click', async () => {
  try {
    const connection = await request.start(); // öffnet den Geräte-Dialog
    localStorage.setItem('presId', connection.id);
    connection.addEventListener('connect', () => {
      connection.send(JSON.stringify({ slide: 1 }));
    });
  } catch (err) {
    // NotAllowedError: Dialog abgebrochen, NotFoundError: kein Gerät
    console.error(`${err.name}: ${err.message}`);
  }
});

Mehrere URLs als Ausweichlösungen und Verfügbarkeit prüfen

const request = new PresentationRequest([
  'cast:ABCD1234?clientId=42', // Cast-Receiver-App (wenn unterstützt)
  '/receiver.html'             // Fallback: normale Webseite
]);

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

try {
  const availability = await request.getAvailability();
  const update = () => { button.hidden = !availability.value; };
  update();
  availability.addEventListener('change', update);
} catch {
  // Überwachung der Verfügbarkeit nicht unterstützt: Button trotzdem anzeigen
  button.hidden = false;
}

Erneut mit laufender Präsentation verbinden

const request = new PresentationRequest('/receiver.html');
const savedId = localStorage.getItem('presId');

if (savedId) {
  try {
    const connection = await request.reconnect(savedId);
    console.log('Wieder verbunden:', connection.state);
    connection.addEventListener('message', (e) => console.log('Empfänger:', e.data));
  } catch {
    console.log('Keine laufende Präsentation gefunden.');
  }
}

Wieder verbunden: connected

// Wichtig · Fallstricke

Browser-Kompatibilität: Die API ist experimentell und praktisch nur in Chromium-Browsern verfügbar (Chrome, Edge, Opera). Firefox und Safari unterstützen sie nicht. Vor der Nutzung sollte man die Verfügbarkeit prüfen, z. B. mit if ('PresentationRequest' in window).
Nur in sicheren Kontexten: Die API funktioniert nur über HTTPS. Unsichere Präsentations-URLs wie http: lösen beim Konstruktor-Aufruf einen SecurityError aus.
Ein leeres Array oder eine ungültige URL löst einen NotSupportedError bzw. SyntaxError aus.
start() braucht eine Nutzeraktion (z. B. einen Klick). Ohne sie wird das Promise mit InvalidAccessError abgelehnt.
Die Presentation API kann per Permissions-Policy: presentation eingeschränkt sein, besonders in iframes.
Nachrichten über PresentationConnection gelten als nicht vertrauenswürdig. Auf der Empfängerseite sollte man sie immer prüfen und niemals ungefiltert per innerHTML einfügen.

Siehe auch

Presentation new EventSource() new PaymentRequest() new TransitionEvent() new XMLHttpRequest()