Men-debug Aplikasi Penerima Cast

1. Ringkasan

Codelab ini akan mengajarkan cara menambahkan Cast Debug Logger ke aplikasi Penerima Web Kustom yang ada.

Apa itu Google Cast?

SDK Google Cast memungkinkan aplikasi Anda memutar konten dan mengontrol pemutaran di perangkat yang kompatibel dengan Google Cast. SDK ini menyediakan 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 memiliki Penerima Web Kustom yang terintegrasi dengan Cast Debug Logger.

Lihat panduan Cast Debug Logger untuk mengetahui detail dan informasi selengkapnya.

Yang akan Anda pelajari

• Cara menyiapkan lingkungan Anda untuk pengembangan Penerima Web.
• Cara mengintegrasikan Debug Logger ke Penerima Cast Anda.

Yang 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.

Pengalaman

• Anda seharusnya memiliki pengalaman Transmisi sebelumnya dan memahami cara kerja Penerima Web Cast.
• Sebelumnya, Anda harus memiliki pengetahuan pengembangan web.
• Anda juga perlu memiliki pengetahuan tentang menonton TV :)

Mengalami masalah jaringan?

Jika Anda berada di lokasi yang tidak memungkinkan jaringan WiFi, perangkat Chromecast dapat ditransfer dengan menggunakan adaptor ethernet untuk Chromecast atau untuk Chromecast dengan Google TV.

Bagaimana Anda akan menggunakan tutorial ini?

Hanya membacanya Membacanya dan menyelesaikan latihan

Sejauh mana pengalaman Anda membuat aplikasi web?

Pemula Menengah Mahir

Bagaimana Anda menilai pengalaman menonton TV Anda?

Pemula Menengah Mahir

2. Mendapatkan kode contoh

Anda dapat mendownload semua kode contoh ke komputer Anda...

Download Sumber

dan mengekstrak file zip yang didownload.

Repositori codelab Cast Debug Logger berisi dua project contoh:

• app-start—Kode awal yang akan Anda bangun dalam codelab ini.
• app-done—Kode lengkap untuk contoh aplikasi video yang sudah selesai.

3. Men-deploy penerima secara lokal

Agar dapat menggunakan penerima web dengan perangkat Cast, penerima harus dihosting di tempat yang dapat dijangkau 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 dapat digunakan, Anda dapat menggunakan Firebase Hosting atau ngrok.

Menjalankan server

Setelah menyiapkan layanan pilihan Anda, buka app-start dan mulai server Anda.

Catat URL untuk penerima yang dihosting. Anda akan menggunakannya di bagian berikutnya.

4. Mendaftarkan aplikasi di Konsol Play Cast

Tidak memiliki akun Developer Cast?

Daftar akun di Konsol Developer SDK Google Cast dan bayar biaya pendaftaran.

Anda harus mendaftarkan aplikasi agar dapat menjalankan Penerima Web kustom, seperti yang dibuat 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 untuk meluncurkan aplikasi penerima.

Klik "Tambahkan aplikasi baru"

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

Masukkan detail penerima baru, pastikan menggunakan URL dari 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 gunakan aplikasi penerima yang tidak dipublikasikan.

Klik "Tambahkan Perangkat baru"

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

Diperlukan waktu antara 5-15 menit agar penerima dan perangkat siap melakukan pengujian. Setelah menunggu selama 5-15 menit, Anda harus memulai ulang perangkat Cast.

5. Menjalankan aplikasi contoh

Sembari menunggu Penerima Web baru kita siap untuk diuji, mari lihat seperti apa tampilan aplikasi Penerima Web yang sudah selesai. Penerima yang akan kita buat akan dapat memutar media menggunakan streaming kecepatan bit adaptif.

1. Di browser, buka Alat Command and Control (CaC).

2. Gunakan ID penerima CC1AD845 default dan klik tombol SET APP ID.
3. Klik tombol Cast di kiri atas lalu pilih perangkat yang kompatibel untuk Cast.

4. Buka tab LOAD MEDIA di bagian atas.

5. Ubah tombol pilihan jenis permintaan menjadi LOAD.
6. Klik tombol SEND REQUEST untuk memutar video sampel.
7. Video akan mulai diputar di perangkat yang kompatibel dengan Google Cast untuk menunjukkan tampilan fungsi penerima dasar yang menggunakan Penerima Default.

6. Menyiapkan project awal

Kita perlu menambahkan dukungan untuk Google Cast ke aplikasi awal yang Anda download. Berikut beberapa terminologi Google Cast yang akan kita gunakan dalam codelab ini:

• aplikasi pengirim berjalan di perangkat seluler atau laptop,
• aplikasi penerima berjalan di perangkat Google Cast atau Android TV.

Sekarang Anda siap mem-build lebih lanjut project awal menggunakan editor teks favorit Anda:

1. Pilih direktori app-start dari download kode contoh.
2. Buka js/receiver.js dan index.html

Perhatikan, saat Anda menangani codelab ini, http-server seharusnya menerapkan perubahan yang Anda buat. Jika tidak, coba hentikan dan mulai ulang http-server.

Desain Aplikasi

Aplikasi penerima melakukan inisialisasi sesi Transmisi dan akan menunggu hingga permintaan LOAD (seperti perintah untuk memutar media) dari pengirim tiba.

Aplikasi ini terdiri dari satu tampilan utama yang didefinisikan dalam index.html dan satu file JavaScript bernama js/receiver.js yang berisi semua logika untuk menjalankan penerima.

index.html

File html ini berisi semua UI untuk aplikasi penerima kita.

receiver.js

Skrip ini mengelola semua logika untuk aplikasi penerima.

Dokumentasi Cast?

Kami memiliki dokumentasi lengkap untuk pengirim penerima, iOS, Android, dan Chrome.

Pertanyaan Umum (FAQ)

• Apa itu Google Cast?
• Bagaimana cara menjadi Developer Google Cast?

7. Mengintegrasikan dengan CastDebugLogger API

SDK Penerima Cast menyediakan opsi lain bagi developer untuk mempermudah proses debug aplikasi penerima Anda menggunakan CastDebugLogger API.

Lihat panduan Cast Debug Logger untuk mengetahui detail dan informasi selengkapnya.

★ Catatan:

Untuk menggunakan CastDebugLogger API, Anda harus mendaftarkan perangkat Cast di Konsol Developer SDK Google Cast dan menggunakan versi firmware perangkat 1.44 atau yang lebih baru.

Inisialisasi

Sertakan skrip berikut di tag <head> aplikasi penerima Anda tepat setelah skrip Web Receiver SDK, di index.html:

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

Di js/receiver.js di bagian atas file dan di bawah playerManager, dapatkan instance CastDebugLogger dan aktifkan logger di pemroses peristiwa READY:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

Peringatan: Pastikan Anda mengubah setEnabled untuk penerima produksi.

Jika logger debug diaktifkan, overlay DEBUG MODE akan ditampilkan di penerima.

Mencatat Peristiwa Pemutar Log

Dengan menggunakan CastDebugLogger, Anda dapat dengan mudah mencatat peristiwa pemutar yang diaktifkan oleh SDK Penerima Web Cast dan menggunakan berbagai level pencatat log untuk mencatat data peristiwa. Konfigurasi loggerLevelByEvents menggunakan cast.framework.events.EventType dan cast.framework.events.category untuk menentukan peristiwa yang akan dicatat ke dalam log.

Tambahkan kode berikut di bawah pemroses peristiwa READY untuk mencatat log saat peristiwa CORE pemutar dipicu atau perubahan mediaStatus disiarkan:

...

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};

Pesan Log dan Tag Kustom

API CastDebugLogger memungkinkan Anda membuat pesan log yang muncul di overlay debug penerima dengan berbagai warna. Gunakan metode log berikut, yang tercantum dalam urutan dari prioritas tertinggi hingga terendah:

• castDebugLogger.error(custom_tag, message);
• castDebugLogger.warn(custom_tag, message);
• castDebugLogger.info(custom_tag, message);
• castDebugLogger.debug(custom_tag, message);

Untuk setiap metode log, parameter pertama harus berupa tag khusus dan parameter kedua adalah pesan log. Tag dapat berupa string apa pun yang menurut Anda bermanfaat.

Untuk menampilkan log yang sedang bekerja, tambahkan log ke interseptor LOAD Anda.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

Anda dapat mengontrol pesan mana yang muncul di overlay debug dengan menetapkan level log di loggerLevelByTags untuk setiap tag kustom. Misalnya, mengaktifkan tag kustom dengan level log cast.framework.LoggerLevel.DEBUG akan menampilkan semua pesan yang ditambahkan dengan pesan log error, peringatan, info, dan debug. Contoh lainnya adalah mengaktifkan tag kustom dengan level WARNING hanya akan menampilkan pesan log error dan peringatan.

Konfigurasi loggerLevelByTags bersifat opsional. Jika tag kustom tidak dikonfigurasi untuk tingkat pencatat log, semua pesan log akan ditampilkan di overlay debug.

Tambahkan kode berikut di bawah panggilan loggerLevelByEvents:

...

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};

...

8. Menggunakan Overlay Debug

Logger Debug Cast menyediakan overlay debug di sisi penerima untuk menampilkan pesan log khusus. Gunakan showDebugLogs untuk mengalihkan overlay debug dan clearDebugLogs menghapus pesan log di overlay.

Tambahkan kode berikut ke pemroses peristiwa READY untuk melihat pratinjau overlay debug di penerima:

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);

      // Show debug overlay.
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay.
      castDebugLogger.clearDebugLogs();
  }
});

9. Menggunakan Alat Command and Control (CaC)

Ringkasan

Alat Command and Control (CaC) mengambil log dan mengontrol overlay debug.

Ada dua cara untuk menghubungkan penerima ke Alat CaC:

Mulai koneksi Transmisi baru:

1. Buka Alat CaC, setel ID Aplikasi penerima, lalu klik tombol Cast untuk mentransmisikan ke penerima.
2. Transmisikan aplikasi pengirim terpisah ke perangkat yang sama dengan ID Aplikasi penerima yang sama.
3. Muat media dari aplikasi pengirim dan pesan log akan ditampilkan di alat.

Bergabung ke sesi Transmisi yang ada:

1. Dapatkan ID sesi Cast yang sedang berjalan menggunakan SDK penerima atau SDK pengirim. Dari sisi penerima, masukkan kode berikut untuk mendapatkan ID sesi di konsol Chrome Remote Debugger:

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Atau, Anda bisa mendapatkan ID sesi dari pengirim web yang terhubung, menggunakan metode berikut:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

2. Masukkan ID sesi di Alat CaC dan klik tombol RESUME.
3. Tombol Cast akan terhubung dan mulai menampilkan pesan log di alat.

Hal-hal yang Dapat Dicoba

Selanjutnya, kita akan menggunakan Alat CaC untuk melihat log pada penerima contoh Anda.

1. Buka Alat CaC.

2. Masukkan ID Aplikasi penerima dari aplikasi contoh Anda, lalu klik tombol SET APP ID.
3. Klik tombol Cast di kiri atas lalu pilih perangkat yang kompatibel untuk Cast untuk membuka penerima.

4. Buka tab LOAD MEDIA di bagian atas.

5. Ubah tombol pilihan jenis permintaan menjadi LOAD.
6. Klik tombol SEND REQUEST untuk memutar contoh video.

7. Sekarang video sampel seharusnya sudah diputar di perangkat Anda. Anda akan mulai melihat log dari langkah sebelumnya mulai ditampilkan di tab "Pesan Log" di bagian bawah alat.

Coba jelajahi fitur berikut untuk menyelidiki log dan mengontrol penerima:

• Klik tab MEDIA INFO atau MEDIA STATUS untuk melihat informasi media dan status media.
• Klik tombol SHOW OVERLAY untuk melihat overlay debug di penerima.
• Gunakan tombol CLEAR CACHE AND STOP untuk memuat ulang aplikasi penerima dan melakukan transmisi lagi.

10. Selamat

Sekarang Anda sudah tahu cara menambahkan Cast Debug Logger ke aplikasi Penerima Web yang kompatibel dengan Cast menggunakan SDK Penerima Cast terbaru.

Untuk mengetahui detail selengkapnya, lihat panduan developer Cast Debug Logger dan Alat Command and Control (CaC).

Ingin lebih banyak Cast?

Lihat codelab Transmisi lainnya dan aplikasi contoh kami di GitHub.