1. Ringkasan
Codelab ini akan mengajari Anda cara membuat aplikasi Penerima Web Kustom yang menggunakan Cast Live Breaks API.
Apa itu Google Cast?
Google Cast memungkinkan pengguna mentransmisikan konten dari perangkat seluler ke TV. Pengguna kemudian dapat menggunakan perangkat seluler sebagai remote control untuk pemutaran media di TV.
Google Cast SDK memungkinkan Anda memperluas aplikasi untuk mengontrol TV atau sistem suara. SDK Cast memungkinkan Anda menambahkan komponen UI yang diperlukan berdasarkan Checklist Desain Google Cast.
Checklist Desain Google Cast disediakan untuk menyederhanakan pengalaman pengguna Cast dan membuatnya dapat diprediksi di semua platform yang didukung.
Apa yang akan kita buat?
Setelah menyelesaikan codelab ini, Anda akan membuat Penerima Cast yang memanfaatkan fungsi Live baru.
Yang akan Anda pelajari
- Cara menangani konten video live di Cast.
- Cara mengonfigurasi berbagai skenario live streaming yang didukung oleh Cast.
- Cara menambahkan data program ke live stream
Yang akan Anda butuhkan
- Browser Google Chrome terbaru.
- Layanan hosting HTTPS seperti Firebase Hosting atau ngrok.
- Perangkat Google Cast seperti Chromecast atau Android TV yang dikonfigurasi dengan akses internet.
- TV atau monitor dengan input HDMI, atau Google Home Hub
Pengalaman
- Anda harus memiliki pengetahuan pengembangan web sebelumnya.
- Pengalaman sebelumnya membuat aplikasi pengirim & amp; penerima Cast.
Bagaimana Anda akan menggunakan tutorial ini?
Bagaimana Anda menilai pengalaman membuat aplikasi web?
2. Mendapatkan kode contoh
Anda dapat mendownload semua kode contoh ke komputer Anda...
dan mengekstrak file zip yang didownload.
3. Men-deploy penerima secara lokal
Agar dapat menggunakan penerima web dengan perangkat Cast, perangkat harus dihosting di suatu tempat yang dapat dijangkau oleh perangkat Cast. Jika Anda sudah memiliki server yang mendukung https, lewati petunjuk berikut dan catat URL karena Anda akan memerlukannya di bagian berikutnya.
Jika tidak memiliki server yang tersedia untuk digunakan, Anda dapat menggunakan Firebase Hosting atau ngrok.
Menjalankan server
Setelah layanan pilihan Anda disiapkan, buka app-start dan mulai server Anda.
Catat URL untuk penerima yang dihosting. Anda akan menggunakannya di bagian berikutnya.
4. Mendaftarkan aplikasi di Konsol Developer Cast
Anda harus mendaftarkan aplikasi agar dapat menjalankan penerima khusus, seperti yang dibuat dalam codelab ini, di perangkat Chromecast. Setelah mendaftarkan aplikasi, Anda akan menerima ID aplikasi yang harus digunakan aplikasi pengirim untuk melakukan panggilan API, seperti meluncurkan aplikasi penerima.
Klik "Tambahkan aplikasi baru"
Pilih "Custom Receiver", ini yang sedang kita buat.
Masukkan detail penerima baru, pastikan untuk menggunakan URL yang Anda gunakan
di bagian terakhir. Catat ID Aplikasi yang ditetapkan untuk penerima baru Anda.
Anda juga harus mendaftarkan perangkat Google Cast agar dapat mengakses aplikasi penerima sebelum memublikasikannya. Setelah Anda memublikasikan aplikasi penerima, aplikasi tersebut akan tersedia untuk semua perangkat Google Cast. Untuk tujuan codelab ini, sebaiknya Anda menggunakan aplikasi penerima yang tidak dipublikasikan.
Klik "Tambahkan Perangkat baru"
Masukkan nomor seri yang dicetak di bagian belakang perangkat Cast dan beri nama deskriptif. Anda juga dapat menemukan nomor seri dengan mentransmisikan layar di Chrome saat mengakses Konsol Developer SDK Google Cast
Butuh waktu 5-15 menit bagi penerima dan perangkat untuk siap melakukan pengujian. Setelah menunggu 5-15 menit, Anda harus memulai ulang perangkat Cast.
5. Mentransmisikan live stream sederhana
Sebelum memulai codelab ini, sebaiknya tinjau panduan developer langsung yang memberikan ringkasan fungsi live baru.
Untuk pengirim, kami akan menggunakan Juga Melakukan Debug Penerima Penerima CAF untuk memulai sesi Transmisi. Penerima dirancang untuk mulai memutar live stream secara otomatis.
Penerima terdiri dari dua file. File html dasar yang disebut receiver.html yang menginisialisasi konteks Cast, dan placeholder untuk pemutar media Cast. Anda tidak perlu mengubah file ini. Ada juga file bernama receiver.js, yang akan berisi semua logika kami untuk penerima.
Untuk memulai, buka pengirim web di Chrome. Masukkan ID Aplikasi Penerima yang tersedia di Cast SDK Developer Console, lalu klik 'Setel''.
Di penerima, kita perlu menambahkan beberapa logika untuk memberi tahu Framework Aplikasi Cast (CAF) bahwa live stream sedang berlangsung. Untungnya, hal ini hanya memerlukan satu baris kode. Tambahkan baris kode berikut ke interseptor beban di receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Menetapkan jenis aliran data ke LIVE akan mengaktifkan UI langsung CAF. Dalam skenario ini, saat streaming digabungkan, CAF akan otomatis melompat ke tepi live streaming. Kami belum menetapkan data panduan program apa pun, jadi scrub bar akan mewakili keseluruhan rentang streaming yang dapat dicari.
Simpan perubahan pada receiver.js dan mulai sesi Transmisi di pengirim web dengan mengklik kanan di mana saja pada halaman dan memilih 'Transmisikan'. Live stream akan segera mulai diputar.
6. Menambahkan data panduan program
Dukungan baru CAF untuk konten live kini mencakup dukungan untuk menampilkan data panduan program di layar pada aplikasi penerima dan pengirim. Penyedia konten sangat dianjurkan untuk menyertakan metadata pemrograman dalam aplikasi penerima mereka untuk pengalaman pengguna akhir yang lebih baik, terutama untuk live stream yang berjalan lama seperti Saluran TV.
Anda kini dapat memberikan CAF dengan metadata untuk beberapa program dalam satu aliran. Dengan menyetel stempel waktu dan durasi mulai pada objek MediaMetadata, penerima akan secara otomatis memperbarui metadata yang ditampilkan pada pengirim dan penerima berdasarkan lokasi pemutar saat ini dalam streaming.
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
Untuk codelab ini, kita akan menggunakan layanan metadata contoh guna menyediakan metadata untuk live stream. Untuk membuat listingan metadata program, pertama-tama kita harus membuat penampung. Container menyimpan daftar objek MediaMetadata untuk satu streaming media. Setiap objek MediaMetadata mewakili satu bagian dalam penampung. Saat titik pemutaran berada dalam batas bagian tertentu, metadatanya akan otomatis disalin ke status media. Tambahkan kode berikut ke file receiver.js untuk mendownload contoh metadata dari layanan kami dan menyediakan container ke CAF:
/**
* Gets the current program guide data from our Google Cloud Function
* @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
*/
function loadGuideData() {
return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
.then((response) => response.json())
.then(function(data) {
const containerMetadata =
new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
});
}
Selain itu, tambahkan panggilan ke fungsi untuk memuat data panduan di interseptor beban:
loadGuideData();
Simpan file receiver.js dan mulai sesi Transmisi. Anda akan melihat waktu mulai, waktu berakhir, dan judul program ditampilkan di layar.
Pesan status media baru akan dikirim dari penerima ke semua pengirim saat titik pemutaran dialihkan ke bagian baru di penampung. Oleh karena itu, mungkin masuk akal untuk memperbarui metadata penampung dalam intersep status media sehingga Anda selalu dapat memiliki informasi program terbaru. Dalam contoh layanan, kami menampilkan metadata program saat ini, serta metadata untuk dua program berikutnya. Untuk memperbarui metadata untuk aliran data, cukup buat penampung baru dan panggil setContainerMetadata seperti pada contoh di atas.
7. Menonaktifkan pencarian
Sebagian besar streaming video terdiri dari segmen yang menyimpan berbagai frame video. Kecuali jika ditentukan lain, CAF akan memungkinkan pengguna mencari dalam segmen ini. Untuk menonaktifkan pencarian, kita perlu menambahkan dua cuplikan kode ke penerima.
Di interseptor pemuatan, hapus perintah media yang didukung SEEK. Ini menonaktifkan pencarian di semua pengirim seluler dan antarmuka sentuh.
playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);
Berikutnya, kita harus menonaktifkan perintah suara agar penonton tidak dapat melewati streaming, misalnya, 'Ok Google, lewati 60 detik.' Untuk menonaktifkan pencarian dengan suara, kami akan menambahkan interseptor pencari. Pencegat ini akan dipanggil setiap kali permintaan pencarian dibuat. Jika perintah media yang didukung SEEK dinonaktifkan, interseptor akan menolak permintaan pencarian. Tambahkan cuplikan kode berikut ke file receiver.js:
/**
* Seek a seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
* @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK,
(seekData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekData;
}
);
Simpan file receiver.js dan mulai sesi Transmisi. Anda tidak lagi dapat mencari di dalam live stream.
8. Selamat
Kini Anda telah mengetahui cara membuat aplikasi penerima kustom menggunakan SDK Penerima Cast terbaru.
Untuk detail selengkapnya, lihat panduan developer Live Streaming.