Webseiten auf sekundären angehängten Bildschirmen präsentieren

François Beaufort
François Beaufort
GitHub

Chrome 66 ermöglicht es Webseiten, einen sekundären angehängten Bildschirm über die Presentation API zu verwenden und ihren Inhalt über die Presentation Receiver API zu steuern.

1/2. Der Nutzer wählt ein zweites angehängtes Display aus
2. Januar. Der Nutzer wählt einen sekundären angehängten Bildschirm aus.
02.02. Eine Webseite wird automatisch dem zuvor ausgewählten Display angezeigt.
2/2. Eine Webseite wird automatisch dem zuvor ausgewählten Display angezeigt.

Hintergrund

Bisher konnten Webentwickler Inhalte erstellen, bei denen einem Nutzer lokale Inhalte in Chrome angezeigt wurden, die sich von den Inhalten auf einem Remote-Display unterscheiden, und dabei weiterhin lokal steuern können. Beispiele sind die Verwaltung einer Wiedergabeliste auf youtube.com, während Videos auf dem Fernseher abgespielt werden, oder das Anschauen einer Videocollage mit Vortragsnotizen auf einem Laptop, während die Vollbildpräsentation in einer Hangout-Sitzung gezeigt wird.

Es gibt jedoch Szenarien, in denen Nutzer Inhalte einfach auf einem zweiten Display präsentieren möchten. Stellen Sie sich beispielsweise einen Nutzer in einem Konferenzraum mit einem Projektor vor, an den er über ein HDMI-Kabel angeschlossen ist. Anstatt die Präsentation auf einem Remote-Endpunkt zu spiegeln, möchte der Nutzer die Folien im Vollbildmodus auf dem Projektor präsentieren, wobei der Laptop-Bildschirm für Vortragsnotizen und die Steuerung von Schiebereglern verfügbar bleibt. Der Autor der Website könnte dies zwar auf sehr rudimentäre Weise unterstützen (z.B. durch Öffnen eines neuen Fensters, das der Nutzer dann manuell zum sekundären Bildschirm ziehen und auf Vollbild maximieren muss), aber dies ist umständlich und bietet eine uneinheitliche Nutzererfahrung zwischen der lokalen und der Remote-Präsentation.

Seiten präsentieren

Ich zeige Ihnen Schritt für Schritt, wie Sie die Presentation API verwenden, um eine Webseite auf einem angeschlossenen Bildschirm zu präsentieren. Das Endergebnis ist unter https://googlechrome.github.io/samples/presentation-api/ verfügbar.

Zuerst erstellen wir ein neues PresentationRequest-Objekt, das die URL enthält, die auf dem sekundär 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);
  });

Wenn Sie eine Aufforderung zum Einblenden einer Präsentation einblenden möchten, ist eine Nutzergeste, z. B. das Klicken auf eine Schaltfläche, erforderlich. Rufen wir also bei einem Klick auf eine Schaltfläche presentationRequest.start() auf und warten, bis das Versprechen aufgelöst wird, sobald der Nutzer eine Präsentation ausgewählt hat (in unserem Anwendungsfall z. B. ein sekundäres angehängtes Display).

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 wie Chromecast-Geräte enthalten, wenn Sie mit einem Netzwerk verbunden sind, das sie bewirbt. Beachten Sie, dass gespiegelte Anzeigen nicht in der Liste enthalten sind. Weitere Informationen finden Sie unter http://crbug.com/840466.

Präsentationsauswahl
Präsentationsauswahl

Wenn Promise aufgelöst wird, wird die Webseite unter der Objekt-URL PresentationRequest in der ausgewählten Anzeige angezeigt. Und voilà!

Jetzt können wir die Ereignisse „close“ und „terminate“ wie unten gezeigt beobachten. Es ist möglich, eine neue Verbindung zu einem „geschlossenen“ presentationConnection mit presentationRequest.reconnect(presentationId) herzustellen. 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

Sie denken jetzt darüber nach, das ist schön, aber wie kann ich Nachrichten zwischen meiner Controller-Seite (der soeben erstellten Seite) und der Empfängerseite (der Seite, die wir an das PresentationRequest-Objekt übergeben haben) übergeben?

Rufen Sie zuerst mit navigator.presentation.receiver.connectionList vorhandene Verbindungen auf der Empfängerseite mit navigator.presentation.receiver.connectionList ab und überwachen Sie eingehende Verbindungen, wie unten gezeigt.

// 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 ein "message"-Ereignis 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) von der Controller- oder Empfängerseite aus aufrufen.

// Controller page

function onSendMessageButtonClick() {
  presentationConnection.send('Hello!');
}

presentationConnection.addEventListener('message', function(event) {
  console.log('I just received ' + event.data + ' from the receiver.');
});

Spielen Sie mit dem Beispiel unter https://googlechrome.github.io/samples/presentation-api/, um eine Vorstellung von der Funktionsweise zu erhalten. 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. Mit dieser Webanwendung können mehrere Controller gemeinsam eine Diashow auf einem Präsentationsdisplay anzeigen. Den Code finden Sie unter https://github.com/GoogleChromeLabs/presentation-api-samples.

Screenshot der Photowall-Demo
Foto von José Luis Mieza/ CC BY-NC-SA 2.0

Eine Sache noch

Chrome hat ein Browsermenü zum Streamen, das Nutzer während des Besuchs einer Website jederzeit aufrufen können. Wenn Sie die Standardpräsentation für dieses Menü steuern möchten, weisen Sie navigator.presentation.defaultRequest einem benutzerdefinierten presentationRequest-Objekt zu, das Sie zuvor erstellt haben.

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

Tipps für Entwickler

Wenn du die Empfängerseite prüfen und Fehler beheben möchtest, rufe die interne chrome://inspect-Seite auf, wähle „Sonstige“ aus und klicke neben der aktuell angezeigten URL auf den Link „Prüfen“.

Seiten von Präsentationsempfängern prüfen
Empfängerseiten von Präsentationen prüfen

Auf der internen chrome://media-router-internals-Seite findest du weitere Informationen zu den internen Erkennungs- und Verfügbarkeitsprozessen.

Nächste Schritte

Ab Chrome 66 werden ChromeOS-, Linux- und Windows-Plattformen unterstützt. Die Mac-Unterstützung wird später folgen.

Weitere Informationen