In Chrome 66 können Webseiten über die Presentation API und deren Inhalt über die Präsentation Receiver API
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Hintergrund
Bisher konnten Webentwickler Inhalte erstellen, bei denen Nutzern lokale Erlebnisse angezeigt wurden. Inhalte in Chrome, die sich von den Inhalten unterscheiden, die sie auf einer Fernbedienung sehen und die Anzeige trotzdem lokal steuern. Beispiele die Wiedergabeliste auf youtube.com, während Videos auf dem Fernseher abgespielt werden, oder eine Präsentation mit Vortragsnotizen auf einem Laptop im Vollbildmodus sehen, Präsentation wird in einer Hangout-Sitzung gezeigt.
Es gibt Szenarien, in denen Nutzer Inhalte einfach auf ihren ein zweites, angeschlossenes Display. Stellen Sie sich beispielsweise vor, eine nutzende Person in einem Konferenzraum mit einem Beamer ausgestattet, an den sie über ein HDMI-Kabel angeschlossen werden. Anstatt die Präsentation auf einem Remote-Endpunkt zu spiegeln, kann der Nutzer die Folien im Vollbildmodus auf dem Projektor präsentieren möchte, sodass die Laptopbildschirm für Vortragsnotizen und zur Steuerung per Schieberegler verfügbar. Die Website Autor könnte dies rudimentär unterstützen (z.B. indem er eine neue das der Nutzer manuell auf den zweiten Bildschirm ziehen muss, auf Vollbild maximieren), ist dies umständlich und sorgt für eine zwischen lokaler und Remote-Präsentation.
Seiten präsentieren
Ich zeige Ihnen Schritt für Schritt, wie Sie mit der Presentation API eine Webseite präsentieren auf Ihrem sekundären angehängten Display. Das Endergebnis ist verfügbar unter https://googlechrome.github.io/samples/presentation-api/.
Zuerst erstellen wir ein neues PresentationRequest-Objekt, das die
die auf dem sekundären angehängten Display
angezeigt werden soll.
const presentationRequest = new PresentationRequest('receiver.html');
In this article, I won’t cover use cases where the parameter passed to
`PresentationRequest` can be an array like `['cast://foo’, 'apple://foo',
'https://example.com']` as this is not relevant there.
We can now monitor presentation display availability and toggle a "Present"
button visibility based on presentation displays availability. Note that we can
also decide to always show this button.
<aside class="caution"><b>Caution:</b> The browser may use more energy while the <code>availability</code> object is alive
and actively listening for presentation display availability changes. Please
use it with caution in order to save energy on mobile.</aside>
```js
presentationRequest.getAvailability()
.then(availability => {
console.log('Available presentation displays: ' + availability.value);
availability.addEventListener('change', function() {
console.log('> Available presentation displays: ' + availability.value);
});
})
.catch(error => {
console.log('Presentation availability not supported, ' + error.name + ': ' +
error.message);
});
Für die Anzeige einer Aufforderung zur Präsentation ist eine Nutzergeste, z. B. ein Klicken, erforderlich
auf einer Schaltfläche. Rufen wir also presentationRequest.start() per Mausklick auf
Warten, bis das Versprechen aufgelöst wurde, nachdem der Nutzer eine Präsentation ausgewählt hat
(z. B. ein sekundäres Display in unserem Anwendungsfall).
function onPresentButtonClick() {
presentationRequest.start()
.then(connection => {
console.log('Connected to ' + connection.url + ', id: ' + connection.id);
})
.catch(error => {
console.log(error);
});
}
Die Liste, die dem Nutzer angezeigt wird, kann auch Remote-Endpunkte enthalten, z. B. Chromecast-Geräte, wenn Sie mit einem Netzwerk verbunden sind, das sie bewirbt. Beachten Sie, dass gespiegelte Bildschirme werden nicht in der Liste angezeigt. Weitere Informationen finden Sie unter http://crbug.com/840466.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Wenn Promise aufgelöst wird, wird die Webseite unter der Objekt-URL PresentationRequest
ausgewählten Bildschirm angezeigt wird. Und voilà!
Wir können jetzt weiter gehen
und die „Schließen“- und „beenden“ Ereignisse wie gezeigt
unten. Beachten Sie, dass es möglich ist, erneut eine Verbindung zu einem geschlossenen
presentationConnection mit presentationRequest.reconnect(presentationId)
Dabei ist presentationId die ID des vorherigen presentationRequest-Objekts.
function onCloseButtonClick() {
// Disconnect presentation connection but will allow reconnection.
presentationConnection.close();
}
presentationConnection.addEventListener('close', function() {
console.log('Connection closed.');
});
function onTerminateButtonClick() {
// Stop presentation connection for good.
presentationConnection.terminate();
}
presentationConnection.addEventListener('terminate', function() {
console.log('Connection terminated.');
});
Mit der Seite kommunizieren
Nun denken Sie: Das ist gut, aber wie kann ich Nachrichten zwischen meinen
Controllerseite (die wir gerade erstellt haben) und die Empfängerseite (die
an das PresentationRequest-Objekt übergeben wird)?
Rufen wir zunächst die bestehenden Verbindungen auf der Empfängerseite mit
navigator.presentation.receiver.connectionList und empfange eingehende Nachrichten
wie unten dargestellt.
// Receiver page
navigator.presentation.receiver.connectionList
.then(list => {
list.connections.map(connection => addConnection(connection));
list.addEventListener('connectionavailable', function(event) {
addConnection(event.connection);
});
});
function addConnection(connection) {
connection.addEventListener('message', function(event) {
console.log('Message: ' + event.data);
connection.send('Hey controller! I just received a message.');
});
connection.addEventListener('close', function(event) {
console.log('Connection closed!', event.reason);
});
}
Eine Verbindung, die eine Nachricht empfängt, löst eine „Nachricht“ aus auf das Sie warten können.
Die Nachricht kann eine Zeichenfolge, ein Blob, ein ArrayBuffer oder eine ArrayBufferView sein.
Zum Senden müssen Sie nur connection.send(message) über die
die Seite „Controller“ oder „Empfänger“.
// Controller page
function onSendMessageButtonClick() {
presentationConnection.send('Hello!');
}
presentationConnection.addEventListener('message', function(event) {
console.log('I just received ' + event.data + ' from the receiver.');
});
Hörprobe hier: https://googlechrome.github.io/samples/presentation-api/, um ein Gefühl für die wie es funktioniert. Ich bin mir sicher, dass Ihnen dies genauso gut gefällt wie mir.
Beispiele und Demos
Sehen Sie sich das offizielle Chrome-Beispiel an, das wir für diesen Artikel verwendet haben.
Ich empfehle Ihnen auch die interaktive Photowall-Demo. Diese Web-App ermöglicht mehrere Controller, um gemeinsam eine Diashow auf Präsentationsansicht. Den Code findest du unter https://github.com/GoogleChromeLabs/presentation-api-samples.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Eine Sache noch
Chrome bietet ein Cast-Symbol Browsermenü, das Nutzer jederzeit aufrufen können, während sie eine
Website. Wenn Sie die Standardpräsentation für dieses Menü steuern möchten, dann
navigator.presentation.defaultRequest einem benutzerdefinierten
Zuvor erstelltes presentationRequest-Objekt.
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
Tipps für Entwickler
Um die Empfängerseite zu überprüfen und Fehler zu beheben, gehen Sie zur internen
chrome://inspect auswählen, wählen Sie „Sonstige“ aus und klicken Sie auf den Link „Prüfen“ neben
die aktuell angezeigte URL.
<ph type="x-smartling-placeholder">Sie können sich auch die interne chrome://media-router-internals
.
Nächste Schritte
Ab Chrome 66 werden ChromeOS-, Linux- und Windows-Plattformen unterstützt. Mac wird die Unterstützung später folgen.
Ressourcen
- Chrome-Funktionsstatus: https://www.chromestatus.com/features#presentation%20api
- Implementierungsfehler: https://crbug.com/?q=component:Blink>PresentationAPI
- Presentation API-Spezifikation: https://w3c.github.io/presentation-api/
- Spezifikationsprobleme: https://github.com/w3c/presentation-api/issues