Chrome 66 memungkinkan halaman web menggunakan layar terlampir sekunder melalui Presentation API dan mengontrol kontennya melalui Presentation Receiver API.
Latar belakang
Hingga saat ini, developer web dapat membuat pengalaman yang memungkinkan pengguna melihat konten lokal di Chrome yang berbeda dengan konten yang terlihat pada layar jarak jauh, sambil tetap dapat mengontrol pengalaman tersebut secara lokal. Contohnya termasuk mengelola antrean pemutaran di youtube.com saat video diputar di TV, atau melihat slide reel yang berisi catatan pembicara di laptop sementara presentasi layar penuh ditampilkan dalam sesi Hangout.
Namun, ada beberapa skenario saat pengguna mungkin hanya ingin menyajikan konten ke tampilan kedua yang dilampirkan. Misalnya, bayangkan seorang pengguna berada di ruang konferensi yang dilengkapi dengan proyektor yang terhubung melalui kabel HDMI. Daripada 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 slide. Meskipun penulis situs dapat mendukung hal ini dengan cara yang sangat sederhana (misalnya, memunculkan jendela baru, yang kemudian harus ditarik secara manual oleh pengguna ke tampilan sekunder dan dimaksimalkan ke layar penuh), cara ini merepotkan dan memberikan pengalaman yang tidak konsisten antara presentasi lokal dan jarak jauh.
Mempresentasikan halaman
Saya akan memandu Anda menggunakan Presentation API untuk mempresentasikan halaman web di layar 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 pada 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, mari kita panggil presentationRequest.start()
dengan mengklik tombol dan
menunggu promise untuk di-resolve setelah pengguna memilih tampilan
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 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.
Saat promise di-resolve, halaman web di URL objek PresentationRequest
ditampilkan ke tampilan yang dipilih. Lanjutkan!
Sekarang kami dapat melangkah lebih jauh dan memantau peristiwa "tutup" dan "hentikan" seperti yang ditunjukkan
di bawah ini. Perlu diperhatikan bahwa Anda dapat menghubungkan kembali ke presentationConnection
"tertutup" 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, tetapi bagaimana cara meneruskan pesan antara
halaman pengontrol (halaman yang baru saja kita buat) dan halaman penerima (halaman yang
telah kita teruskan ke objek PresentationRequest
)?
Pertama, mari kita ambil koneksi yang ada di halaman penerima dengan
navigator.presentation.receiver.connectionList
, lalu 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 akan mengaktifkan peristiwa "pesan" yang dapat Anda proses.
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.');
});
Coba lihat contoh ini 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 slideshow foto secara kolaboratif pada tampilan presentasi. Kode tersedia di https://github.com/GoogleChromeLabs/presentation-api-samples.
Satu hal lagi
Chrome memiliki menu browser "Transmisikan" yang dapat dipanggil pengguna kapan saja saat mengunjungi
situs web. 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 men-debug-nya, buka halaman
chrome://inspect
internal, pilih “Lainnya”, lalu klik link “periksa” di samping
URL yang saat ini ditampilkan.
Anda juga dapat memeriksa halaman chrome://media-router-internals
internal untuk mempelajari proses penemuan/ketersediaan internal.
Langkah selanjutnya
Mulai Chrome 66, platform ChromeOS, Linux, dan Windows didukung. Dukungan Mac akan tersedia nanti.
Referensi
- Status Fitur Chrome: https://www.chromestatus.com/features#presentation%20api
- Bug Implementasi: https://crbug.com/?q=component:Blink>PresentationAPI
- Spesifikasi Presentation API: https://w3c.github.io/presentation-api/
- Masalah Spesifikasi: https://github.com/w3c/presentation-api/issues