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

Beaufort
François Beaufort
GitHub

Mit Chrome 66 können Webseiten einen sekundären angehängten Bildschirm über die Presentation API verwenden und den Inhalt über die Presentation Receiver API steuern.

1/2. Der Nutzer wählt einen sekundären angeschlossenen Bildschirm aus
1/2. Der Nutzer wählt einen sekundären angeschlossenen Bildschirm aus.
2/2. Es wird automatisch eine Webseite angezeigt, die zuvor ausgewählt wurde.
2.2. Es wird automatisch eine Webseite angezeigt, die Sie zuvor ausgewählt haben.

Hintergrund

Bisher konnten Webentwickler Anwendungen erstellen, bei denen Nutzer lokale Inhalte in Chrome sehen, die sich von den Inhalten auf einem Remote-Display unterscheiden, aber weiterhin lokal steuern können. Beispiele hierfür sind die Verwaltung einer Wiedergabewarteschlange auf youtube.com, während Videos auf dem Fernseher wiedergegeben werden, oder die Darstellung einer Vortragsfolie 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, angehängten Bildschirm präsentieren möchten. Stellen Sie sich beispielsweise einen Nutzer in einem Konferenzraum vor, der mit einem Projektor ausgestattet ist, 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 wirklich im Vollbild auf dem Projektor präsentieren, wobei die Vortragsnotizen und die Foliensteuerung auf dem Laptopbildschirm zur Verfügung stehen. Der Autor der Website könnte dies auf sehr rudimentäre Weise unterstützen (z.B. durch das Öffnen eines neuen Fensters, das der Nutzer dann manuell auf den zweiten Bildschirm ziehen und auf den Vollbildmodus maximieren muss), ist jedoch umständlich und bietet eine uneinheitliche Erfahrung zwischen lokaler und Remote-Präsentation.

Seite präsentieren

Hier erfahren Sie, wie Sie mit der Presentation API eine Webseite auf Ihrem sekundären angeschlossenen Bildschirm darstellen. 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ären angehängten Bildschirm dargestellt 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);
  });

Zum Anzeigen einer Aufforderung zur Darstellung einer Präsentation ist eine Touch-Geste des Nutzers erforderlich, z. B. das Klicken auf eine Schaltfläche. Rufen wir also presentationRequest.start() bei einem Klick auf eine Schaltfläche auf und warten Sie, bis das Versprechen aufgelöst ist, sobald der Nutzer ein Präsentationsdisplay ausgewählt hat (in unserem Anwendungsfall ein zweites 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 präsentiert wird, kann auch Remote-Endpunkte wie Chromecast-Geräte enthalten, wenn Sie mit einem Netzwerk verbunden sind, das für diese Geräte wirbt. Beachten Sie, dass gespiegelte Bildschirme nicht in der Liste enthalten sind. Weitere Informationen finden Sie unter http://crbug.com/840466.

Auswahl für Präsentationsanzeige
Auswahl für Präsentationsansicht

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

Wir können jetzt noch einen Schritt weitergehen und die Ereignisse „close“ und „terminate“ überwachen, wie unten gezeigt. Sie können die Verbindung zu einem "geschlossenen" presentationConnection mit presentationRequest.reconnect(presentationId) wiederherstellen, wobei presentationId die ID des vorherigen presentationRequest-Objekts ist.

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: Das ist zwar schön, aber wie übergebe ich Nachrichten zwischen meiner Controller-Seite (die gerade erstellte Seite) und der Empfängerseite (die, die wir an das PresentationRequest-Objekt übergeben haben)?

Zuerst rufen wir vorhandene Verbindungen auf der Empfängerseite mit navigator.presentation.receiver.connectionList ab und warten auf 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 Nachrichtenereignis aus, das Sie überwachen können. Die Nachricht kann ein String, ein Blob, ein ArrayBuffer oder eine ArrayBufferView sein. Das Senden ist so einfach wie das Aufrufen von connection.send(message) über die Controller- oder die Empfängerseite.

// Controller page

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

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

Probieren Sie das Beispiel unter https://googlechrome.github.io/samples/presentation-api/ aus, um einen Eindruck von der Funktionsweise zu bekommen. Ich bin sicher, dass Ihnen das 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 auch die interaktive Photowall-Demo. Mit dieser Web-App können mehrere Controller gemeinsam eine Foto-Diashow auf einem Präsentationsdisplay präsentieren. Code ist unter https://github.com/GoogleChromeLabs/presentation-api-samples verfügbar.

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

Eine Sache noch

Chrome verfügt über das Browsermenü „Streamen“, das Nutzer während des Besuchs einer Website jederzeit aufrufen können. Wenn Sie die Standardpräsentation dieses Menüs steuern möchten, weisen Sie einem zuvor erstellten benutzerdefinierten presentationRequest-Objekt navigator.presentation.defaultRequest zu.

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

Entwicklertipps

Wenn Sie die Empfängerseite prüfen und Fehler beheben möchten, rufen Sie die interne chrome://inspect-Seite auf, wählen Sie „Sonstiges“ aus und klicken Sie neben der aktuell angezeigten URL auf den Link „Prüfen“.

Seiten des Präsentationsempfängers prüfen
Seiten des Präsentationsempfängers prüfen

Sie können sich auch die interne chrome://media-router-internals-Seite ansehen, um mehr über die internen Erkennungs-/Verfügbarkeitsprozesse zu erfahren.

Nächste Schritte

Ab Chrome 66 werden ChromeOS-, Linux- und Windows-Plattformen unterstützt. Die Unterstützung für Macs wird später verfügbar sein.

Ressourcen