Mempresentasikan halaman web ke layar sekunder yang dilampirkan

Prancis Beaufort
François Beaufort
GitHub

Chrome 66 memungkinkan halaman web menggunakan tampilan sekunder yang dilampirkan melalui Presentation API dan mengontrol kontennya melalui Presentation Receiver API.

1/2. Pengguna memilih layar sekunder yang terpasang
1/2. Pengguna memilih layar sekunder yang terpasang
2/2. Halaman web secara otomatis ditampilkan ke tampilan yang dipilih sebelumnya
2/2. Halaman web akan otomatis ditampilkan ke layar yang dipilih sebelumnya

Latar belakang

Hingga saat ini, developer web dapat membuat pengalaman yang memungkinkan pengguna melihat konten lokal di Chrome yang berbeda dengan konten yang mereka lihat di layar jarak jauh sambil tetap dapat mengontrol pengalaman tersebut secara lokal. Contohnya antara lain mengelola antrean pemutaran di youtube.com saat video diputar di TV, atau melihat reel slide dengan catatan pembicara di laptop saat presentasi layar penuh ditampilkan di sesi Hangout.

Ada beberapa skenario ketika pengguna mungkin hanya ingin menyajikan konten ke layar kedua yang terpasang. Misalnya, bayangkan seorang pengguna di ruang konferensi yang dilengkapi dengan proyektor yang terhubung melalui kabel HDMI. Daripada mencerminkan presentasi ke endpoint jarak jauh, pengguna sebenarnya ingin mempresentasikan slide dalam layar penuh di proyektor, sehingga layar laptop tetap tersedia untuk catatan pembicara dan kontrol slide. Meskipun penulis situs dapat mendukung hal ini dengan cara yang sangat belum sempurna (misalnya, memunculkan jendela baru, yang kemudian harus ditarik pengguna secara manual ke tampilan sekunder dan dimaksimalkan ke layar penuh), hal ini rumit dan memberikan pengalaman yang tidak konsisten antara presentasi lokal dan jarak jauh.

Mempresentasikan halaman

Saya akan memandu Anda menggunakan Presentation API untuk menyajikan halaman web pada tampilan sekunder yang dilampirkan. Hasil akhirnya tersedia di https://googlechrome.github.io/samples/presentation-api/.

Pertama, kita akan membuat objek PresentationRequest baru yang akan berisi URL yang ingin ditampilkan di tampilan sekunder yang dilampirkan.

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

Untuk menampilkan perintah tampilan presentasi, diperlukan gestur pengguna seperti mengklik tombol. Jadi, mari kita panggil presentationRequest.start() saat tombol diklik dan tunggu sampai promise selesai setelah pengguna memilih tampilan presentasi (mis. tampilan sekunder yang terpasang dalam kasus penggunaan kita).

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

Daftar yang ditampilkan kepada pengguna juga dapat menyertakan endpoint jarak jauh seperti perangkat Chromecast jika Anda terhubung ke jaringan yang mengiklankannya. Perhatikan bahwa tampilan yang dicerminkan tidak ada dalam daftar. Lihat http://crbug.com/840466.

Pemilih Tampilan Presentasi
Pemilih Tampilan Presentasi

Saat promise di-resolve, halaman web di URL objek PresentationRequest ditampilkan ke tampilan yang dipilih. Dan akhirnya!

Sekarang kita dapat melangkah lebih jauh dan memantau peristiwa "close" dan "terminate" seperti ditunjukkan di bawah. Perhatikan bahwa Anda dapat menghubungkan kembali ke presentationConnection "tertutup" dengan presentationRequest.reconnect(presentationId) dengan presentationId yang merupakan ID objek presentationRequest sebelumnya.

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

Berkomunikasi dengan halaman

Sekarang Anda berpikir, itu bagus, tetapi bagaimana cara meneruskan pesan antara halaman pengontrol (yang baru saja kita buat) dan halaman penerima (yang telah kita teruskan ke objek PresentationRequest)?

Pertama, mari kita ambil koneksi yang ada di halaman penerima dengan navigator.presentation.receiver.connectionList dan proses koneksi masuk seperti yang ditunjukkan di bawah ini.

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

Koneksi yang menerima pesan memicu peristiwa "pesan" yang dapat Anda proses. Pesan dapat berupa string, Blob, ArrayBuffer, atau ArrayBufferView. Mengirimnya semudah memanggil connection.send(message) dari halaman pengontrol atau halaman penerima.

// Controller page

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

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

Coba pelajari contohnya di https://googlechrome.github.io/samples/presentation-api/ untuk mengetahui cara kerjanya. Saya yakin Anda akan menikmatinya seperti saya.

Contoh dan demo

Lihat contoh Chrome resmi yang telah kami gunakan untuk artikel ini.

Sebaiknya Anda juga merekomendasikan demo Photowall interaktif. Aplikasi web ini memungkinkan beberapa pengontrol untuk mempresentasikan slideshow foto secara kolaboratif di tampilan presentasi. Kode tersedia di https://github.com/GoogleChromeLabs/presentation-api-samples.

Screenshot demo Photowall
Foto oleh José Luis Mieza / CC BY-NC-SA 2.0

Satu hal lagi

Chrome memiliki menu browser "Cast" yang dapat dipanggil pengguna kapan saja saat mengunjungi situs. Jika Anda ingin mengontrol presentasi default untuk menu ini, tetapkan navigator.presentation.defaultRequest ke objek presentationRequest kustom yang dibuat sebelumnya.

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

Tips developer

Untuk memeriksa halaman penerima dan melakukan debug, buka halaman chrome://inspect internal, pilih “Lainnya”, lalu klik link “periksa” di samping URL yang ditampilkan saat ini.

Memeriksa halaman penerima presentasi
Memeriksa halaman penerima presentasi

Sebaiknya Anda juga melihat halaman chrome://media-router-internals internal untuk mempelajari proses penemuan/ketersediaan internal.

Langkah berikutnya

Mulai Chrome 66, platform ChromeOS, Linux, dan Windows didukung. Dukungan Mac akan tersedia nanti.

Referensi