Mempresentasikan halaman web ke layar sekunder yang dilampirkan

François Beaufort
François Beaufort
GitHub

Chrome 66 memungkinkan halaman web menggunakan tampilan sekunder terlampir melalui Presentation API dan untuk mengontrol kontennya melalui Presentation API API Penerima.

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

Latar belakang

Hingga saat ini, pengembang web dapat membangun pengalaman di mana pengguna akan melihat konten di Chrome yang berbeda dengan konten yang mereka lihat di remote ditampilkan sambil tetap dapat mengontrol pengalaman tersebut secara lokal. Contoh termasuk mengelola antrean pemutaran di youtube.com saat video diputar di TV, atau melihat slide reel yang berisi catatan pembicara di laptop dalam mode layar penuh presentasi akan ditampilkan dalam sesi Hangout.

Ada beberapa skenario di mana pengguna mungkin hanya ingin mempresentasikan konten satu detik, terpasang. Misalnya, bayangkan seorang pengguna berada di ruang konferensi dilengkapi dengan proyektor yang disambungkan melalui kabel HDMI. Alih-alih mencerminkan presentasi ke endpoint jarak jauh, pengguna benar-benar ingin mempresentasikan slide dalam layar penuh di proyektor, sehingga layar laptop tersedia untuk catatan pembicara dan kontrol geser. Meskipun situs ini dapat mendukung hal ini dengan cara yang sangat sederhana (mis. memunculkan yang kemudian harus ditarik pengguna secara manual ke tampilan sekunder dan maksimalkan ke layar penuh), hal ini rumit dan memberikan pengalaman yang berbeda antara presentasi lokal dan jarak jauh.

Mempresentasikan halaman

Saya akan memandu Anda menggunakan Presentation API untuk mempresentasikan halaman web pada layar sekunder terlampir Anda. 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 terlampir.

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

Menampilkan perintah tampilan presentasi memerlukan gestur pengguna seperti klik pada tombol. Jadi, sebut saja presentationRequest.start() dengan mengklik tombol dan menunggu promise untuk diselesaikan setelah pengguna memilih presentasi (misalnya, tampilan sekunder terlampir 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 disajikan kepada pengguna juga dapat mencakup endpoint jarak jauh seperti Perangkat Chromecast jika Anda terhubung ke jaringan yang mengiklankannya. Perlu diketahui 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 akan yang ditampilkan ke tampilan yang dipilih. Lanjutkan!

Sekarang kita dapat melangkah lebih jauh dan memantau "{i>close<i}" dan "menghentikan" acara seperti yang ditampilkan di bawah ini. Perhatikan bahwa Anda dapat menyambung kembali ke "tertutup" presentationConnection dengan presentationRequest.reconnect(presentationId) dengan presentationId adalah 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, tapi bagaimana cara meneruskan pesan antara laman pengontrol (yang baru saja kita buat) dan laman penerima (yang yang telah kita teruskan ke objek PresentationRequest)?

Pertama, mari kita ambil koneksi yang ada di laman penerima dengan navigator.presentation.receiver.connectionList dan dengarkan panggilan masuk koneksi 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 mengaktifkan "pesan" yang dapat diproses. Pesan dapat berupa string, Blob, ArrayBuffer, atau ArrayBufferView. Mengirimkannya 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.');
});

Mainkan sampel di https://googlechrome.github.io/samples/presentation-api/ untuk mengetahui cara kerjanya. Saya yakin Anda juga akan menikmatinya.

Contoh dan demo

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

Saya juga merekomendasikan demo Photowall interaktif. Aplikasi web ini memungkinkan beberapa pengontrol untuk menyajikan tayangan {i>slide<i} foto secara kolaboratif 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 "Cast" menu browser yang dapat dipanggil kapan saja saat mengunjungi situs Anda. Jika Anda ingin mengontrol presentasi {i> default<i} untuk menu ini, maka tetapkan navigator.presentation.defaultRequest ke dimensi kustom Objek presentationRequest 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 men-debug-nya, buka halaman chrome://inspect, pilih “Lainnya”, lalu klik link “periksa” di samping URL yang ditampilkan saat ini.

Memeriksa halaman penerima presentasi
Memeriksa halaman penerima presentasi

Anda juga dapat memeriksa chrome://media-router-internals internal untuk mendalami proses penemuan/ketersediaan internal.

Langkah berikutnya

Mulai Chrome 66, platform ChromeOS, Linux, dan Windows didukung. Mac kami akan memberikan dukungan nanti.

Resource