Men-debug Aplikasi Penerima Cast

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Ringkasan

Logo Google Cast

Codelab ini akan mengajari Anda cara menambahkan Logger Debug Cast ke aplikasi Custom Web Receiver yang ada.

Apa itu Google Cast?

SDK Google Cast memungkinkan aplikasi Anda memutar konten dan mengontrol pemutaran pada perangkat yang kompatibel untuk Google Cast. Library 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 Logger Debug Cast untuk mengetahui detail dan informasi selengkapnya.

Yang akan Anda pelajari

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

Yang akan Anda butuhkan

  • Browser Google Chrome terbaru.
  • node.js, npm, modul http-server dan ngrok
  • Perangkat Google Cast seperti Chromecast atau Android TV yang dikonfigurasi dengan akses internet.
  • TV atau monitor dengan input HDMI.

Pengalaman

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

Bagaimana Anda akan menggunakan tutorial ini?

Hanya membacanya Membacanya dan menyelesaikan latihan

Bagaimana Anda menilai pengalaman Anda mem-build aplikasi web?

Pemula Menengah Mahir

Bagaimana Anda menilai pengalaman menonton TV Anda?

Pemula Menengah Mabuk

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 tersebut perlu dihosting tempat perangkat Cast dapat menjangkaunya. Jika sudah memiliki server yang tersedia untuk Anda yang mendukung HTTPS, cukup lewati petunjuk berikut, cukup ingat URL, Anda akan membutuhkannya di bagian berikutnya.

Jika Anda tidak memiliki server yang tersedia, jangan khawatir. Anda dapat menginstal node.js, modul node http-server dan ngrok, atau menghosting project menggunakan layanan seperti Firebase Hosting.

npm install -g http-server
npm install -g ngrok

Menjalankan server

Jika Anda menggunakan http-server, buka konsol, dan lakukan hal berikut:

cd app-done
http-server

Anda kemudian akan melihat yang seperti berikut:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

Perhatikan port lokal yang digunakan dan lakukan hal berikut di terminal baru untuk menampilkan penerima lokal melalui HTTPS menggunakan ngrok:

ngrok http 8080

Tindakan ini akan menyiapkan tunnel ngrok ke server HTTP lokal Anda, yang menetapkan endpoint aman HTTPS yang tersedia secara global yang dapat Anda gunakan pada langkah berikutnya (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

Anda harus tetap menjalankan ngrok dan http-server selama durasi codelab. Setiap perubahan yang Anda buat secara lokal akan langsung tersedia.

4. Mendaftarkan aplikasi di Konsol Developer Cast

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 aplikasi pengirim untuk melakukan panggilan API, seperti meluncurkan aplikasi penerima.

Gambar Konsol Developer Cast dengan tombol 'Tambahkan Aplikasi Baru'

Klik "Tambahkan aplikasi baru"

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

Pilih "Penerima Kustom", inilah yang kami buat.

Gambar bidang 'URL Aplikasi Penerima' pada dialog 'Penerima Kustom Baru' sedang diisi

Masukkan detail penerima baru, pastikan untuk 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.

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

Klik "Tambahkan Perangkat baru"

Gambar dialog 'Tambahkan Perangkat Penerima Cast'

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

Diperlukan waktu 5-15 menit agar penerima dan perangkat siap untuk diuji. Setelah menunggu 5-15 menit, Anda harus memulai ulang perangkat Cast.

5. Menjalankan aplikasi contoh

Logo Google Chrome

Sembari menunggu Penerima Web baru siap untuk diuji, mari kita lihat seperti apa contoh aplikasi Web Receiver yang lengkap. Penerima yang akan kami buat akan dapat memutar media menggunakan streaming kecepatan bit adaptif.

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

Gambar 'Cast Connect & Logger Controls' tab Alat Command and Control (CaC)

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

Gambar 'Cast Connect & Logger Controls' tab Alat Command and Control (CaC) yang menunjukkan bahwa ini terhubung ke Aplikasi Penerima

  1. Buka tab LOAD MEDIA di bagian atas.

Gambar tab 'Load Media' Alat Command and Control (CaC)

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

6. Menyiapkan project awal

Kita perlu menambahkan dukungan untuk Google Cast ke aplikasi awal yang Anda download. Berikut adalah 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 untuk membuat project awal menggunakan editor teks favorit Anda:

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

Perlu diperhatikan bahwa saat Anda mengerjakan codelab ini, http-server akan 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 ditentukan dalam index.html dan satu file JavaScript yang disebut js/receiver.js yang berisi semua logika untuk membuat penerima berfungsi.

index.html

File html ini berisi semua UI untuk aplikasi penerima kita.

penerima.js

Skrip ini mengelola semua logika aplikasi penerima.

Pertanyaan Umum (FAQ)

7. Mengintegrasikan dengan CastDebugLogger API

Cast Receiver SDK menyediakan opsi lain bagi developer untuk men-debug aplikasi penerima Anda dengan mudah menggunakan CastDebugLogger API.

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

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

Saat pencatat debug diaktifkan, overlay DEBUG MODE akan ditampilkan di penerima.

Gambar video diputar dengan &#39;DEBUG MODE&#39; pesan yang muncul pada latar belakang merah di sudut kiri atas bingkai

Membuat Log Peristiwa Pemutar

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

Tambahkan hal berikut di bawah pemroses peristiwa READY ke dalam log saat peristiwa CORE pemain 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
};

Catat Pesan dan Tag Kustom

CastDebugLogger API memungkinkan Anda membuat pesan log yang muncul di overlay debug penerima dengan warna yang berbeda. Gunakan metode log berikut, yang diurutkan dari prioritas tertinggi ke 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 kustom dan parameter kedua adalah pesan log. Tag dapat berupa string apa pun yang menurut Anda bermanfaat.

Untuk menunjukkan cara kerja log, tambahkan log ke interseptor LOAD.

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 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 error dan memperingatkan pesan log.

Konfigurasi loggerLevelByTags bersifat opsional. Jika tag kustom tidak dikonfigurasi untuk level logger-nya, 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 kustom. 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 Anda:

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

Gambar yang menampilkan overlay debug, daftar pesan log debug pada latar belakang transparan di bagian atas frame video

9. Menggunakan Alat Command and Control (CaC)

Ringkasan

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

Ada dua cara untuk menghubungkan penerima ke Alat CaC:

Memulai koneksi Cast baru:

  1. Buka CaC Tool, setel ID Aplikasi penerima, dan 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 pada alat.

Bergabung ke sesi Cast yang ada:

  1. Dapatkan ID sesi Cast yang berjalan menggunakan SDK penerima atau SDK pengirim. Dari sisi penerima, masukkan kode berikut untuk mendapatkan ID sesi di konsol Chrome Debugger Jarak Jauh:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

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

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

Gambar &#39;Cast Connect & Logger Controls&#39; tab Alat Command and Control (CaC) untuk melanjutkan sesi

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

Yang Perlu Dicoba

Berikutnya, kita akan menggunakan CaC Tool untuk melihat log pada sampel penerima.

  1. Buka Alat CAC.

Gambar &#39;Cast Connect & Logger Controls&#39; tab Alat Command and Control (CaC)

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

Gambar &#39;Cast Connect & Logger Controls&#39; tab Alat Command and Control (CaC) yang menunjukkan bahwa ini terhubung ke Aplikasi Penerima

  1. Buka tab LOAD MEDIA di bagian atas.

Gambar tab &#39;Load Media&#39; Alat Command and Control (CaC)

  1. Ubah tombol pilihan jenis permintaan menjadi LOAD.
  2. Klik tombol SEND REQUEST untuk memutar video sampel.

Gambar &#39;Cast Connect & Logger Controls&#39; tab Alat Command and Control (CaC) dengan pesan log yang mengisi panel bawah

  1. Video sampel akan diputar di perangkat Anda sekarang. Anda akan mulai melihat log dari langkah sebelumnya yang 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 pada penerima.
  • Gunakan tombol CLEAR CACHE AND STOP untuk memuat ulang aplikasi penerima dan melakukan transmisi lagi.

10. Selamat

Kini Anda mengetahui cara menambahkan Cast Debug Logger ke aplikasi Penerima Web yang kompatibel untuk Cast menggunakan SDK Penerima Cast terbaru.

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