Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Presentation API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die Presentation API ermöglicht einem user agent (wie etwa einem Webbrowser) Webinhalte effektiv auf großen Präsentationsgeräten wie Projektoren und netzwerkverbundenen Fernsehern anzuzeigen. Unterstützte Arten von Multimedia-Geräten umfassen sowohl Displays, die über HDMI, DVI oder ähnliche Kabel verbunden sind, als auch kabellose Verbindungen wie DLNA, Chromecast, AirPlay oder Miracast.

1-UA-Modus lädt die Controlling- und Präsentationsseiten zusammen, bevor diese auf Displays ausgegeben werden. 2-UA-Modus lädt sie separat mithilfe des Presentation Control Protocol.

Im Allgemeinen verwendet eine Webseite die Presentation Controller API, um die Webinhalte anzugeben, die auf einem Präsentationsgerät gerendert werden sollen, und um die Präsentationssitzung zu starten. Mit der Presentation Receiver API erhält der präsentierende Webinhalt den Sitzungsstatus. Durch die Bereitstellung eines nachrichtenbasierten Kanals sowohl für die Controller-Seite als auch die Empfängerseite kann ein Webentwickler die Interaktion zwischen diesen beiden Seiten implementieren.

Abhängig vom Verbindungsmechanismus, der vom Präsentationsgerät bereitgestellt wird, können Controller- und Empfängerseite durch denselben oder durch separate Nutzeragenten gerendert werden.

  • Bei 1-UA-Modus-Geräten werden beide Seiten vom selben Nutzeragenten geladen. Das Rendering-Ergebnis der Empfängerseite wird jedoch über ein unterstütztes Fernrendering-Protokoll an das Präsentationsgerät gesendet.
  • Bei 2-UAs-Modus-Geräten wird die Empfängerseite direkt auf dem Präsentationsgerät geladen. Der kontrollierende Nutzeragent kommuniziert über ein unterstütztes Präsentationskontrollprotokoll mit dem Präsentationsgerät, um die Präsentationssitzung zu steuern und Nachrichten zwischen den beiden Seiten zu übermitteln.

Schnittstellen

Presentation

In einem steuernden Browsing-Kontext bietet die Presentation-Schnittstelle einen Mechanismus, um das Standardverhalten des Browsers beim Start einer Präsentation auf einem externen Bildschirm zu überschreiben. In einem empfangenden Browsing-Kontext bietet die Presentation-Schnittstelle Zugriff auf die verfügbaren Präsentationsverbindungen.

PresentationRequest

Initiiert oder verbindet sich erneut mit einer Präsentation, die von einem steuernden Browsing-Kontext erstellt wurde.

PresentationAvailability

Ein PresentationAvailability-Objekt ist mit verfügbaren Präsentationsanzeigen verbunden und repräsentiert die Verfügbarkeit von Präsentationsanzeigen für eine Präsentationsanfrage.

PresentationConnectionAvailableEvent

Das PresentationConnectionAvailableEvent wird bei einer PresentationRequest ausgelöst, wenn eine Verbindung, die mit dem Objekt assoziiert ist, erstellt wird.

PresentationConnection

Jede Präsentationsverbindung wird durch ein PresentationConnection-Objekt dargestellt.

PresentationConnectionCloseEvent

Ein PresentationConnectionCloseEvent wird ausgelöst, wenn eine Präsentationsverbindung in den closed-Zustand übergeht.

PresentationReceiver

Der PresentationReceiver ermöglicht einem empfangenden Browsing-Kontext, auf die steuernden Browsing-Kontexte zuzugreifen und mit ihnen zu kommunizieren.

PresentationConnectionList

PresentationConnectionList repräsentiert die Sammlung von nicht beendeten Präsentationsverbindungen und überwacht das Ereignis neuer verfügbarer Präsentationsverbindungen.

Beispiel

Die folgenden Beispielcodes veranschaulichen die Verwendung der Hauptfunktionen der Presentation API: controller.html implementiert den Controller und presentation.html die Präsentation. Beide Seiten werden von der Domain https://example.org bereitgestellt (https://example.org/controller.html und https://example.org/presentation.html). Diese Beispiele setzen voraus, dass die steuernde Seite jeweils eine Präsentation verwaltet. Bitte sehen Sie sich die Kommentare in den Codebeispielen für weitere Details an.

Überwachung der Verfügbarkeit von Präsentationsanzeigen

In controller.html:

html
<button id="presentBtn" class="hidden">Present</button>
css
.hidden {
  display: none;
}
js
// The Present button is visible if at least one presentation display is available
const presentBtn = document.getElementById("presentBtn");

// It is also possible to use relative presentation URL e.g. "presentation.html"
const presUrls = [
  "https://example.com/presentation.html",
  "https://example.net/alternate.html",
];

// Show or hide present button depending on display availability
const handleAvailabilityChange = (available) => {
  if (available) {
    presentBtn.classList.remove("hidden");
  } else {
    presentBtn.classList.add("hidden");
  }
};

// Promise is resolved as soon as the presentation display availability is known.
const request = new PresentationRequest(presUrls);
request
  .getAvailability()
  .then((availability) => {
    // availability.value may be kept up-to-date by the controlling UA as long
    // as the availability object is alive. It is advised for the web developers
    // to discard the object as soon as it's not needed.
    handleAvailabilityChange(availability.value);
    availability.onchange = () => {
      handleAvailabilityChange(availability.value);
    };
  })
  .catch(() => {
    // Availability monitoring is not supported by the platform, so discovery of
    // presentation displays will happen only after request.start() is called.
    // Pretend the devices are available for simplicity; or, one could implement
    // a third state for the button.
    handleAvailabilityChange(true);
  });

Start einer neuen Präsentation

In controller.html:

js
presentBtn.onclick = () => {
  // Start new presentation.
  request
    .start()
    // The connection to the presentation will be passed to setConnection on success.
    .then(setConnection);
  // Otherwise, the user canceled the selection dialog or no screens were found.
};

Wiederverbindung zu einer Präsentation

In der Datei controller.html:

html
<button id="reconnectBtn" class="hidden">Reconnect</button>
js
const reconnect = () => {
  const presId = localStorage.getItem("presId");
  // presId is mandatory when reconnecting to a presentation.
  if (presId) {
    request
      .reconnect(presId)
      // The new connection to the presentation will be passed to
      // setConnection on success.
      .then(setConnection);
    // No connection found for presUrl and presId, or an error occurred.
  }
};
// On navigation of the controller, reconnect automatically.
reconnect();
// Or allow manual reconnection.
reconnectBtn.onclick = reconnect;

Präsentationseinleitung durch das steuernde UA

In der Datei controller.html:

js
navigator.presentation.defaultRequest = new PresentationRequest(presUrls);
navigator.presentation.defaultRequest.onconnectionavailable = (evt) => {
  setConnection(evt.connection);
};

Das Setzen von presentation.defaultRequest ermöglicht es der Seite, den PresentationRequest anzugeben, der verwendet werden soll, wenn das steuernde UA eine Präsentation initiiert.

Überwachung des Verbindungsstatus und Datenaustausch

In controller.html:

html
<button id="disconnectBtn" class="hidden">Disconnect</button>
<button id="stopBtn" class="hidden">Stop</button>
<button id="reconnectBtn" class="hidden">Reconnect</button>
js
let connection;

// The Disconnect and Stop buttons are visible if there is a connected presentation
const stopBtn = document.querySelector("#stopBtn");
const reconnectBtn = document.querySelector("#reconnectBtn");
const disconnectBtn = document.querySelector("#disconnectBtn");

stopBtn.onclick = () => {
  connection?.terminate();
};

disconnectBtn.onclick = () => {
  connection?.close();
};

function setConnection(newConnection) {
  // Disconnect from existing presentation, if not attempting to reconnect
  if (
    connection &&
    connection !== newConnection &&
    connection.state !== "closed"
  ) {
    connection.onclose = undefined;
    connection.close();
  }

  // Set the new connection and save the presentation ID
  connection = newConnection;
  localStorage.setItem("presId", connection.id);

  function showConnectedUI() {
    // Allow the user to disconnect from or terminate the presentation
    stopBtn.classList.remove("hidden");
    disconnectBtn.classList.remove("hidden");
    reconnectBtn.classList.add("hidden");
  }

  function showDisconnectedUI() {
    disconnectBtn.classList.add("hidden");
    stopBtn.classList.add("hidden");
    if (localStorage.getItem("presId")) {
      // If there is a presId in localStorage, allow the user to reconnect
      reconnectBtn.classList.remove("hidden");
    } else {
      reconnectBtn.classList.add("hidden");
    }
  }

  // Monitor the connection state
  connection.onconnect = () => {
    showConnectedUI();

    // Register message handler
    connection.onmessage = (message) => {
      console.log(`Received message: ${message.data}`);
    };

    // Send initial message to presentation page
    connection.send("Say hello");
  };

  connection.onclose = () => {
    connection = null;
    showDisconnectedUI();
  };

  connection.onterminate = () => {
    localStorage.removeItem("presId");
    connection = null;
    showDisconnectedUI();
  };
}

Verfügbare Verbindung(en) überwachen und Hallo sagen

In presentation.html:

js
const addConnection = (connection) => {
  connection.onmessage = (message) => {
    if (message.data === "Say hello") connection.send("hello");
  };
};

navigator.presentation.receiver.connectionList.then((list) => {
  list.connections.forEach((connection) => {
    addConnection(connection);
  });
  list.onconnectionavailable = (evt) => {
    addConnection(evt.connection);
  };
});

Übermittlung von Sprachinformationen mit einer Nachricht

In der Datei controller.html:

html
connection.send('{"string": "你好,世界!", "lang": "zh-CN"}');
connection.send('{"string": "こんにちは、世界!", "lang": "ja"}');
connection.send('{"string": "안녕하세요, 세계!", "lang": "ko"}');
connection.send('{"string": "Hello, world!", "lang": "en-US"}');

In der Datei presentation.html:

js
connection.onmessage = (message) => {
  const messageObj = JSON.parse(message.data);
  const spanElt = document.createElement("SPAN");
  spanElt.lang = messageObj.lang;
  spanElt.textContent = messageObj.string;
  document.body.appendChild(spanElt);
};

Spezifikationen

Specification
Presentation API
# interface-presentation

Browser-Kompatibilität

Siehe auch

Presentation API polyfill enthält ein JavaScript-Polyfill der Presentation API Spezifikation, die im Rahmen der Second Screen Working Group bei W3C standardisiert wird. Das Polyfill ist hauptsächlich dafür gedacht, zu erforschen, wie die Presentation API auf verschiedenen Präsentationsmechanismen umgesetzt werden kann.