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.
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 diePresentation
-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.
-
Ein PresentationAvailability-Objekt ist mit verfügbaren Präsentationsanzeigen verbunden und repräsentiert die Verfügbarkeit von Präsentationsanzeigen für eine Präsentationsanfrage.
-
Das
PresentationConnectionAvailableEvent
wird bei einerPresentationRequest
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 denclosed
-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
:
<button id="presentBtn" class="hidden">Present</button>
.hidden {
display: none;
}
// 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
:
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
:
<button id="reconnectBtn" class="hidden">Reconnect</button>
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
:
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
:
<button id="disconnectBtn" class="hidden">Disconnect</button>
<button id="stopBtn" class="hidden">Stop</button>
<button id="reconnectBtn" class="hidden">Reconnect</button>
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
:
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
:
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
:
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
Loading…
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.