Menambahkan dukungan langsung ke Penerima Cast

1. Ringkasan

Logo Google Cast

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 Live API.

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 livestream Anda

Yang akan Anda butuhkan

Pengalaman

  • Sebelumnya, Anda harus memiliki pengetahuan pengembangan web.
  • Pengalaman sebelumnya dalam membuat aplikasi pengirim & penerima Cast.

Bagaimana Anda akan menggunakan tutorial ini?

Hanya membacanya Membacanya dan menyelesaikan latihan

Bagaimana Anda menilai pengalaman membuat aplikasi web?

Pemula Menengah Mahir

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 Cast perlu dihosting di tempat yang dapat dijangkau perangkat Cast. Jika sudah memiliki server yang mendukung https, lewati petunjuk berikut dan catat URL karena Anda akan membutuhkannya di bagian selanjutnya.

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 Anda agar dapat menjalankan penerima khusus, seperti yang disertakan dalam codelab ini, di perangkat Chromecast. Setelah mendaftarkan aplikasi, Anda akan menerima ID aplikasi yang harus digunakan oleh aplikasi pengirim untuk melakukan panggilan API, seperti meluncurkan aplikasi penerima.

Gambar Konsol Developer Google Cast SDK dengan tombol 'Tambahkan Aplikasi Baru' ditandai

Klik "Tambahkan aplikasi baru"

Gambar layar 'Aplikasi Penerima Baru' dengan opsi 'Penerima Kustom' ditandai

Pilih "Penerima Kustom", dan inilah yang sedang kita buat.

Gambar layar 'Penerima Kustom Baru' yang menampilkan URL yang diketikkan seseorang di kolom 'URL Aplikasi Penerima'

Masukkan detail penerima baru Anda, pastikan menggunakan URL yang Anda gunakan

pada bagian terakhir. Catat ID Aplikasi yang ditetapkan ke penerima baru Anda.

Anda juga harus mendaftarkan perangkat Google Cast agar dapat mengakses aplikasi penerima sebelum memublikasikannya. Setelah dipublikasikan, aplikasi penerima akan tersedia untuk semua perangkat Google Cast. Untuk tujuan codelab ini, sebaiknya gunakan aplikasi penerima yang tidak dipublikasikan.

Gambar Konsol Developer Google Cast SDK dengan tombol 'Tambahkan Perangkat Baru' ditandai

Klik "Tambahkan Perangkat baru"

Gambar dialog 'Tambahkan Perangkat Penerima Transmisi'

Masukkan nomor seri yang tercetak di bagian belakang perangkat Transmisi dan berikan nama deskriptif. Anda juga dapat menemukan nomor seri dengan mentransmisikan layar di Chrome saat mengakses Konsol Developer SDK Google Cast

Perlu waktu 5-15 menit hingga penerima dan perangkat siap untuk pengujian. Setelah menunggu 5-15 menit, Anda harus memulai ulang perangkat Transmisi.

5. Mentransmisikan live stream sederhana

Gambar ponsel Android yang sedang memutar video; pesan 'Transmisi ke Ruang Keluarga' muncul di bagian bawah, tepat di atas serangkaian kontrol pemutar video.Gambar layar ukuran penuh yang memutar video yang sama

Sebelum memulai codelab ini, sebaiknya tinjau panduan developer langsung yang memberikan ringkasan tentang API langsung.

Untuk pengirim, kita akan menggunakan Cactooll untuk memulai sesi Transmisi. Penerima dirancang untuk otomatis mulai memutar live stream.

Penerima terdiri dari tiga file. File html dasar bernama receiver.html yang berisi struktur aplikasi utama. Anda tidak perlu memodifikasi file ini. Ada juga file bernama receiver.js, yang berisi semua logika untuk penerima. Terakhir, ada juga metadata_service.js yang akan digunakan nanti di codelab untuk menyimulasikan perolehan data panduan program.

Untuk memulai, buka Cactool di Chrome. Masukkan ID Aplikasi Penerima yang diberikan di Konsol Developer Cast SDK, lalu klik Setel.

Framework Aplikasi Transmisi Penerima Web (CAF) perlu diberi petunjuk bahwa konten yang akan diputar adalah livestream. Untuk melakukannya, ubah aplikasi dengan baris kode berikut. Tambahkan ke isi utama interseptor pemuatan di receiver.js:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

Menetapkan jenis streaming ke LIVE akan mengaktifkan UI live CAF. Web Receiver SDK akan otomatis melompat ke tepi live streaming. Data panduan program live belum ditambahkan sehingga panel geser akan mewakili keseluruhan rentang streaming yang dapat dicari.

Simpan perubahan ke receiver.js dan mulai sesi Transmisi di Cactool dengan mengklik tombol transmisi dan memilih perangkat transmisi target. Live stream akan segera mulai diputar.

6. Menambahkan data panduan program

Dukungan CAF untuk konten live kini mencakup dukungan untuk menampilkan data panduan program di aplikasi penerima dan pengirim. Penyedia konten sangat disarankan untuk menyertakan metadata pemrograman dalam aplikasi penerima mereka untuk memberikan pengalaman pengguna akhir yang lebih baik, terutama untuk streaming langsung yang berjalan lama seperti Saluran TV.

CAF mendukung penyetelan metadata untuk beberapa program dalam satu streaming. Dengan menyetel stempel waktu dan durasi mulai pada objek MediaMetadata, penerima akan otomatis mengupdate metadata yang ditampilkan pada pengirim dan overlay berdasarkan lokasi pemutar saat ini dalam streaming. Berikut adalah contoh API dan penggunaan umumnya.

// 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 contoh layanan metadata guna menyediakan metadata untuk livestream. Untuk membuat listingan metadata program, buat container. ContainerMetadata menyimpan daftar objek MediaMetadata untuk satu aliran media. Setiap objek MediaMetadata mewakili satu bagian dalam penampung. Jika 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 the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  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 pemuatan:

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 dikirim dari penerima ke semua pengirim saat titik pemutaran bertransisi ke bagian baru dalam penampung sehingga aplikasi pengirim dapat memperbarui UI-nya. Sebaiknya aplikasi penerima memperbarui metadata container di interseptor status media untuk melanjutkan memasukkan informasi program ke aplikasi pengirim. Dalam layanan contoh, kita menampilkan metadata program saat ini, serta metadata untuk dua program berikutnya. Untuk memperbarui metadata untuk aliran data, buat penampung baru dan panggil setContainerMetadata seperti pada contoh sebelumnya.

7. Menonaktifkan pencarian

Sebagian besar streaming video terdiri dari segmen yang menyimpan rentang frame video. Kecuali jika ditentukan lain, CAF akan mengizinkan pengguna untuk mencari di dalam segmen ini. Penerima Web dapat menentukan ini dengan memanggil beberapa API yang tersedia.

Di interseptor pemuatan, hapus perintah media yang didukung SEEK. Setelan ini menonaktifkan pencarian di semua pengirim seluler dan antarmuka sentuh. Tambahkan kode berikut setelah definisi untuk variabel instance SDK di receiver.js.

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

Untuk menonaktifkan perintah pencarian suara yang didukung oleh asisten seperti Ok Google, lewati mundur 60 detik, interseptor pencari harus digunakan. Interseptor 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:

/**
 * 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.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // 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 seekRequestData;
    });

Simpan file receiver.js dan mulai sesi Transmisi. Anda tidak dapat lagi melakukan pencarian dalam livestream.

8. Selamat

Sekarang Anda telah mengetahui cara membuat aplikasi penerima kustom menggunakan SDK Penerima Cast terbaru.

Untuk mengetahui detail selengkapnya, lihat Panduan Developer Live Streaming.