1. Ringkasan
Codelab ini akan mengajari Anda cara menambahkan Logger Debug Cast ke aplikasi Penerima Web Khusus yang sudah ada.
Apa itu Google Cast?
SDK Google Cast memungkinkan aplikasi Anda memutar konten dan mengontrol pemutaran di perangkat yang kompatibel untuk Google Cast. Panduan ini memberi Anda 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 Logger Debug Cast.
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 Penerima Cast.
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.
Pengalaman
- Anda seharusnya sudah memiliki pengalaman Transmisi dan memahami cara kerja Penerima Web Cast.
- Sebelumnya, Anda harus memiliki pengetahuan pengembangan web.
- Anda juga perlu memiliki pengetahuan tentang menonton TV :)
Bagaimana Anda akan menggunakan tutorial ini?
Bagaimana Anda menilai pengalaman membuat aplikasi web?
Bagaimana Anda menilai pengalaman menonton TV Anda?
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 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 meluncurkan aplikasi penerima.
Klik "Tambahkan aplikasi baru"
Pilih "Penerima Kustom", dan inilah yang sedang kita buat.
Masukkan detail penerima baru Anda, pastikan untuk menggunakan URL dari 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.
Klik "Tambahkan Perangkat baru"
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. Menjalankan aplikasi contoh
Selagi menunggu Penerima Web baru siap diuji, mari kita lihat seperti apa contoh aplikasi Penerima Web yang sudah selesai. Penerima yang akan kita buat akan mampu memutar media menggunakan streaming kecepatan bit adaptif.
- Di browser, buka Alat Command and Control (CaC).
- Gunakan ID penerima
CC1AD845
default dan klik tombolSET APP ID
. - Klik tombol Cast di kiri atas, lalu pilih perangkat yang kompatibel dengan Google Cast.
- Buka tab
LOAD MEDIA
di bagian atas.
- Ubah tombol pilihan jenis permintaan menjadi
LOAD
. - Klik tombol
SEND REQUEST
untuk memutar video contoh. - 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 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 mengerjakan project awal menggunakan editor teks favorit Anda:
- Pilih direktori
app-start
dari download kode contoh Anda. - Buka
js/receiver.js
danindex.html
Perhatikan, saat Anda mengerjakan 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 Cast dan akan menunggu dalam mode standby hingga permintaan LOAD (seperti perintah untuk memutar media) dari pengirim tiba.
Aplikasi ini terdiri dari satu tampilan utama, yang ditentukan di index.html
dan satu file JavaScript bernama js/receiver.js
yang berisi semua logika untuk membuat penerima kita berfungsi.
index.html
File html ini berisi semua UI untuk aplikasi penerima.
receiver.js
Skrip ini mengelola semua logika untuk 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>
Pada js/receiver.js
, di bagian atas file dan di bawah playerManager
, dapatkan instance CastDebugLogger
dan aktifkan logger dalam 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);
}
});
Jika logger debug diaktifkan, overlay DEBUG MODE
akan ditampilkan pada penerima.
Peristiwa Pemutar Log
Dengan CastDebugLogger
, Anda dapat dengan mudah mencatat peristiwa pemutar yang diaktifkan oleh SDK Penerima Web Cast dan menggunakan berbagai level logger untuk mencatat data peristiwa ke dalam log. Konfigurasi loggerLevelByEvents
menggunakan 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
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
Dengan API CastDebugLogger, Anda dapat 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 kustom 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 error dan memperingatkan pesan log.
Konfigurasi loggerLevelByTags
bersifat opsional. Jika tag kustom tidak dikonfigurasi untuk level 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 penerima untuk menampilkan pesan log kustom Anda. Gunakan showDebugLogs
untuk mengalihkan overlay debug dan clearDebugLogs
menghapus pesan log di overlay.
Tambahkan hal 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();
}
});
9. Menggunakan Alat Perintah dan Kontrol (CaC)
Ringkasan
Alat Command and Control (CaC) merekam log Anda dan mengontrol overlay debug.
Ada dua cara untuk menghubungkan penerima ke Alat CaC:
Mulai koneksi Cast baru:
- Buka Alat CaC, setel ID Aplikasi penerima, lalu klik tombol Cast untuk melakukan transmisi ke penerima.
- Transmisikan aplikasi pengirim terpisah ke perangkat yang sama dengan ID Aplikasi penerima yang sama.
- Muat media dari aplikasi pengirim dan pesan log akan ditampilkan di alat ini.
Bergabung dengan sesi Transmisi yang ada:
- 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 Remote Debugger:
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();
- Masukkan ID sesi di Alat CaC, lalu klik tombol
RESUME
. - Tombol Cast akan terhubung dan mulai menampilkan pesan log di alat.
Yang Bisa Dicoba
Selanjutnya, kita akan menggunakan Alat CaC untuk melihat log di penerima sampel Anda.
- Buka Alat CaC.
- Masukkan ID Aplikasi penerima dari aplikasi contoh Anda, lalu klik tombol
SET APP ID
. - Klik tombol Cast di kiri atas dan pilih perangkat yang kompatibel dengan Google Cast untuk membuka penerima.
- Buka tab
LOAD MEDIA
di bagian atas.
- Ubah tombol pilihan jenis permintaan menjadi
LOAD
. - Klik tombol
SEND REQUEST
untuk memutar video contoh.
- Video contoh 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 memeriksa log dan mengontrol penerima:
- Klik tab
MEDIA INFO
atauMEDIA 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
Kini Anda telah mengetahui cara menambahkan Logger Debug Cast ke aplikasi Penerima Web yang kompatibel untuk Cast menggunakan SDK Penerima Cast terbaru.
Untuk mengetahui detail selengkapnya, lihat panduan developer Logger Debug Cast dan Alat Command and Control (CaC).