Wyświetlanie stron internetowych na dodatkowych podłączonych wyświetlaczach

François Beaufort
François Beaufort
GitHub

Chrome 66 umożliwia stronom internetowym korzystanie z dodatkowego podłączonego wyświetlacza przez Interfejs API Prezentacji i kontrolować jego zawartość za pomocą Prezentacji Interfejs Receiver API.

1/2. Użytkownik wybiera dodatkowy podłączony wyświetlacz
1/2. Użytkownik wybiera dodatkowy podłączony wyświetlacz
.
.
2/2. Strona internetowa jest automatycznie wyświetlana na ekranie wybranym wcześniej
2/2. Strona internetowa jest automatycznie wyświetlana na ekranie wybranym wcześniej
.
.

Tło

Do tej pory programiści mogli tworzyć rozwiązania, które pozwalały użytkownikowi zobaczyć treści w Chrome różniące się od tych, które można zobaczyć na pilocie. a jednocześnie nadal mieć możliwość sterowania nim lokalnie. Przykłady zarządzanie kolejką odtwarzania na youtube.com podczas odtwarzania filmów na telewizorze, lub obejrzenie na laptopie podsumowania slajdów z notatkami jest wyświetlana w sesji na spotkaniu.

Istnieją sytuacje, w których użytkownicy mogą po prostu chcieć zaprezentować treści i dołączony wyświetlacz. Wyobraź sobie na przykład użytkownika w sali konferencyjnej. z projektorem, do którego są podłączone kablem HDMI. Zamiast powielać prezentację w zdalnym punkcie końcowym, użytkownik może ale chce wyświetlić slajdy na pełnym ekranie projektora. ekran laptopa dla notatek prelegenta i sterowania slajdami. Chociaż witryna popierałby to w bardzo praktyczny sposób (np. przez wygłaszanie nowych które użytkownik musi ręcznie przeciągnąć na dodatkowy wyświetlacz. do pełnego ekranu), jest to niewygodne i powoduje niespójności między prezentacjami lokalnymi i zdalnymi.

Prezentowanie strony

Omówię teraz sposób używania interfejsu Presentation API do prezentowania strony internetowej na dodatkowym podłączonym ekranie. Efekt końcowy jest dostępny na https://googlechrome.github.io/samples/presentation-api/.

Najpierw utworzymy nowy obiekt PresentationRequest, który będzie zawierał Adres URL, który chcemy pokazywać na dodatkowym podłączonym ekranie.

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);
  });

Aby wyświetlić prompt w widoku prezentacji, użytkownik musi wykonać gest, np. kliknąć na przycisku. Wywołajmy więc presentationRequest.start() jednym kliknięciem i Poczekaj, aż użytkownik wybierze prezentację, aż obietnica się zakończy do wyświetlania (np. drugiego podłączonego ekranu w naszym przypadku użycia).

function onPresentButtonClick() {
  presentationRequest.start()
  .then(connection => {
    console.log('Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    console.log(error);
  });
}

Lista prezentowana użytkownikowi może też zawierać zdalne punkty końcowe, takie jak Chromecastach, jeśli masz połączenie z siecią reklamującą te urządzenia. Pamiętaj, że wyświetlaczy lustrzanych nie ma na tej liście. Zobacz http://crbug.com/840466.

Selektor prezentacji
Selektor prezentacji

Po spełnieniu obietnicy strona internetowa pod adresem URL obiektu PresentationRequest zostanie prezentowane na wybranym wyświetlaczu. I gotowe!

Możemy teraz pójść o krok dalej i monitorować „zamknięcie”. i „zakończyć” wyświetlane zdarzenia poniżej. Pamiętaj, że możesz ponownie połączyć się z „zamkniętym” kontem. presentationConnection – presentationRequest.reconnect(presentationId) gdzie presentationId to identyfikator poprzedniego obiektu presentationRequest.

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.');
});

Komunikacja ze stroną

Jak można przesyłać wiadomości między stronie kontrolera (tej, którą właśnie utworzyliśmy) i stronie odbiornika (tej przekazane do obiektu PresentationRequest)?

Najpierw pobierzmy istniejące połączenia na stronie odbiorcy za pomocą navigator.presentation.receiver.connectionList i odsłuchaj przychodzące połączeń, jak pokazano poniżej.

// 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);
  });
}

Połączenie odbierające wiadomość uruchamia „wiadomość” które możesz nasłuchiwać. Wiadomość może być ciągiem znaków, obiektem Blob, SlateBuffer lub ArrayBufferView. Aby wysłać wiadomość, wystarczy wywołać funkcję connection.send(message) z stronie kontrolera lub odbiornika.

// Controller page

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

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

Przetestuj sampel na stronie https://googlechrome.github.io/samples/presentation-api/, aby dowiedzieć się więcej jak to działa. Na pewno spodoba Ci się tak jak mi.

Sample i wersje demonstracyjne

Zobacz oficjalną próbkę Chrome, której użyliśmy w tym artykule.

Zalecamy też prezentację interaktywnej ściany Photowall. Ta aplikacja internetowa zezwala wielu kontrolerów, aby móc wspólnie wyświetlać pokaz slajdów ze zdjęć widok prezentacji. Kod jest dostępny na https://github.com/GoogleChromeLabs/presentation-api-samples.

Zrzut ekranu demonstracyjnej funkcji Photowall
. Zdjęcie Autor: José Luis Mieza / CC BY-NC-SA 2.0
.

Jeszcze jedno

Chrome ma funkcję przesyłania które użytkownicy mogą wywołać w dowolnym momencie, odwiedzając witryny. Jeśli chcesz sterować domyślną prezentacją w tym menu, przypisz element navigator.presentation.defaultRequest do niestandardowej Obiekt presentationRequest został utworzony wcześniej.

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

Wskazówki dla programistów

Aby sprawdzić stronę odbiornika i ją zdebugować, otwórz chrome://inspect, wybierz „Inne” i kliknij link „Sprawdź” obok obecnie prezentowanego adresu URL.

Sprawdzanie stron odbiornika prezentacji
Sprawdzanie stron odbiornika prezentacji

Zapoznaj się też z wewnętrznym chrome://media-router-internals zawiera szczegółowe informacje o wewnętrznych procesach wykrywania i dostępności.

Co dalej?

Od wersji Chrome 66 obsługiwane są platformy ChromeOS, Linux i Windows. Mac pomoc będzie dostępna później.

Zasoby