Membuat Penerima Web Kustom

1. Ringkasan

Logo Google Cast

Codelab ini akan mengajari Anda cara membuat aplikasi Penerima Web Kustom untuk memutar konten di perangkat yang kompatibel untuk Cast.

Apa itu Google Cast?

Google Cast memungkinkan pengguna mentransmisikan konten dari perangkat seluler ke TV. Pengguna kemudian dapat menggunakan perangkat seluler atau Browser Chrome desktop sebagai remote control untuk pemutaran media di TV.

Google Cast SDK memungkinkan aplikasi Anda mengontrol perangkat yang kompatibel untuk Google Cast (misalnya, TV atau sistem suara). SDK Cast 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. Lihat selengkapnya di sini.

Apa yang akan kita buat?

Setelah menyelesaikan codelab ini, Anda akan memiliki aplikasi HTML5 yang bertindak sebagai penerima kustom Anda sendiri yang mampu menampilkan konten video di perangkat yang kompatibel untuk Cast.

Yang akan Anda pelajari

  • Cara menyiapkan pengembangan penerima.
  • Dasar-dasar penerima yang kompatibel untuk Cast berdasarkan Framework Aplikasi Cast.
  • Cara menerima video yang ditransmisikan.
  • Cara mengintegrasikan Debug Logger.
  • Cara Mengoptimalkan penerima untuk layar smart.

Yang akan Anda butuhkan

Pengalaman

  • 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 membuat aplikasi web?

Pemula Menengah Mahir

Bagaimana Anda menilai pengalaman menonton TV Anda?

Pemula Menengah Fasih

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.

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

Klik "Tambahkan aplikasi baru"

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

Pilih "Custom Receiver", ini yang sedang kita buat.

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

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.

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

Klik "Tambahkan Perangkat baru"

Gambar dialog 'Tambahkan Perangkat Penerima Cast'

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

Perlu waktu 5-15 menit sebelum penerima dan perangkat siap melakukan pengujian. Setelah menunggu 5-15 menit, Anda harus memulai ulang perangkat Cast.

5. Menjalankan aplikasi contoh

Logo Google Chrome

Sambil menunggu aplikasi penerima baru siap diuji, mari kita lihat tampilan sampel aplikasi penerima yang telah selesai. Penerima yang akan kita buat akan dapat memutar media menggunakan streaming kecepatan bit adaptif (kita akan menggunakan konten contoh yang dienkode untuk Streaming Adaptif Dinamis melalui HTTP (DASH)).

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

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

  1. Anda akan melihat Alat CaC kami.
  2. Gunakan ID penerima sampel "CC1AD845" default, lalu klik tombol "Tetapkan ID Aplikasi".
  3. Klik tombol Cast di kiri atas, lalu pilih perangkat Google Cast.

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

  1. Buka tab "Muat Media" di bagian atas.

Gambar tab 'Muat Media' di Alat Command and Control (CaC)

  1. Klik tombol "Muat menurut Konten" untuk memutar video sampel.
  2. Video akan mulai diputar di perangkat 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.

Sekarang Anda siap mem-build berdasarkan 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 mengambil 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 (dengan kata lain, perintah untuk memutar kembali media) dari pengirim.

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 kita berfungsi.

index.html

File html ini akan berisi UI untuk aplikasi penerima kita. Untuk saat ini, file tersebut kosong, dan kita akan menambahkannya ke seluruh codelab.

penerima.js

Skrip ini akan mengelola semua logika untuk aplikasi penerima. Saat ini, file ini hanya kosong, tetapi kita akan mengubahnya menjadi penerima Cast yang berfungsi penuh hanya dengan beberapa baris kode di bagian berikutnya.

7. Penerima Cast dasar

Penerima Cast dasar akan melakukan inisialisasi sesi Cast saat memulai. Hal ini diperlukan untuk memberi tahu semua aplikasi pengirim yang terhubung yang berhasil memunculkan penerima. Selain itu, SDK baru telah dikonfigurasi sebelumnya untuk menangani media streaming kecepatan bit adaptif (menggunakan DASH, HLS, dan Streaming Lancar) serta file MP4 biasa. Mari kita coba.

Inisialisasi

Tambahkan kode berikut ke index.html di header:

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

Tambahkan kode berikut ke index.html <body> sebelum <footer> memuat receiver.js, untuk memberi SDK penerima ruang untuk menampilkan UI penerima default yang dikirimkan dengan skrip yang baru saja Anda tambahkan.

<cast-media-player></cast-media-player>

Sekarang, kita perlu menginisialisasi SDK di js/receiver.js, yang terdiri dari:

  • mendapatkan referensi ke CastReceiverContext, titik entri utama Anda ke seluruh SDK Penerima
  • menyimpan referensi ke PlayerManager, objek yang menangani pemutaran dan menyediakan semua hook yang Anda butuhkan untuk menghubungkan logika kustom Anda sendiri
  • menginisialisasi SDK dengan memanggil start() di CastReceiverContext

Tambahkan kode berikut ke js/receiver.js.

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

context.start();

8. Mentransmisikan konten video "dasar"

Untuk tujuan Codelab ini, gunakan Alat CaC untuk mencoba penerima baru Anda.

Arahkan browser web Anda ke Alat Command and Control (CaC).

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

Pastikan untuk mengganti ID Aplikasi Anda sendiri seperti yang didaftarkan sebelumnya di kolom dan klik "Tetapkan ID Aplikasi". Tindakan ini akan memerintahkan alat untuk menggunakan penerima Anda saat memulai sesi Transmisi.

Mentransmisikan media

Pada level tinggi, hal-hal berikut harus dilakukan agar dapat memutar media di perangkat Cast:

  1. Pengirim membuat objek MediaInfo JSON dari Cast SDK yang memodelkan item media.
  2. Pengirim terhubung ke perangkat Cast untuk meluncurkan aplikasi penerima.
  3. Penerima memuat objek MediaInfo melalui permintaan LOAD untuk memutar konten.
  4. Penerima memantau dan melacak status media.
  5. Pengirim mengirim perintah pemutaran ke penerima untuk mengontrol pemutaran berdasarkan interaksi pengguna dengan aplikasi pengirim.

Dalam upaya dasar pertama ini, kita akan mengisi MediaInfo dengan URL aset yang dapat diputar (disimpan di MediaInfo.contentUrl).

Pengirim di dunia nyata menggunakan ID media khusus aplikasi di MediaInfo.contentId. Penerima menggunakan contentId sebagai ID untuk membuat panggilan API backend yang sesuai guna menyelesaikan URL aset yang sebenarnya dan menyetelnya ke MediaInfo.contentUrl. Penerima juga akan menangani tugas seperti akuisisi lisensi DRM atau memasukkan informasi tentang jeda iklan.

Kami akan memperluas penerima Anda untuk melakukan sesuatu seperti itu di bagian berikutnya. Untuk saat ini, klik ikon Cast dan pilih perangkat untuk membuka penerima Anda.

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

Buka tab "Muat Media" dan klik tombol "Muat menurut Konten''. Penerima akan mulai memutar konten sampel.

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

Jadi, di luar mode siap pakai yang ditangani oleh Receiver SDK:

  • Menginisialisasi sesi Cast
  • Menangani permintaan LOAD yang masuk dari pengirim yang berisi aset yang dapat diputar
  • Sediakan UI pemutar dasar yang siap ditampilkan di layar TV.

Anda dapat mempelajari CaC Tool dan kodenya sebelum melanjutkan ke bagian berikutnya, di mana kita akan memperluas penerima untuk berbicara dengan API contoh sederhana untuk memenuhi permintaan LOAD yang masuk dari pengirim.

9. Mengintegrasikan dengan API eksternal

Sejalan dengan cara sebagian besar developer berinteraksi dengan Penerima Cast di aplikasi dunia nyata, kita akan memodifikasi penerima untuk menangani permintaan LOAD yang mereferensikan konten media yang dimaksud dengan kunci API-nya, bukan mengirim melalui URL aset yang dapat diputar.

Aplikasi biasanya melakukan ini karena:

  • Pengirim mungkin tidak mengetahui URL konten.
  • Aplikasi Cast didesain untuk menangani autentikasi, logika bisnis lainnya, atau panggilan API secara langsung pada penerima.

Fungsi ini terutama diimplementasikan dalam metode PlayerManager setMessageInterceptor(). Dengan demikian, Anda dapat menangkap pesan masuk berdasarkan jenis dan mengubahnya sebelum mencapai pengendali pesan internal SDK. Di bagian ini, kita akan menangani permintaan LOAD tempat kita akan melakukan hal berikut:

  • Membaca permintaan LOAD yang masuk dan contentId khususnya.
  • Lakukan panggilan GET ke API kami untuk mencari aset yang dapat di-streaming berdasarkan contentId-nya.
  • Ubah permintaan LOAD dengan URL streaming.
  • Ubah objek MediaInformation untuk menetapkan parameter jenis streaming.
  • Teruskan permintaan ke SDK untuk pemutaran, atau tolak perintah jika kami tidak dapat mencari media yang diminta.

API contoh yang diberikan menunjukkan hook SDK untuk menyesuaikan tugas-tugas penerima umum, sembari tetap mengandalkan pengalaman yang unik.

API Contoh

Arahkan browser ke https://storage.googleapis.com/cpe-sample-media/content.json dan lihat contoh katalog video kami. Konten tersebut mencakup URL untuk gambar poster dalam format png serta streaming DASH dan HLS. Streaming DASH dan HLS mengarah ke sumber video dan audio yang didekode yang disimpan dalam penampung mp4 yang terfragmentasi.

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

Pada langkah berikutnya, kita akan memetakan setiap kunci entri (misalnya, bbb, fbb_ad) ke URL streaming setelah penerima dipanggil dengan permintaan LOAD.

Mencegat permintaan LOAD

Pada langkah ini, kita akan membuat intersep pemuatan dengan fungsi yang membuat permintaan XHR ke file JSON yang dihosting. Setelah file JSON diperoleh, kita akan mengurai konten dan menyetel metadata. Di bagian berikut, kita akan menyesuaikan parameter MediaInformation untuk menentukan jenis konten.

Tambahkan kode berikut ke file js/receiver.js Anda, tepat sebelum panggilan ke context.start().

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

Bagian berikutnya akan menguraikan cara mengonfigurasi properti media permintaan pemuatan untuk konten DASH.

Menggunakan Konten DASH API Contoh

Setelah menyiapkan intersepsi beban, kita akan menentukan jenis konten untuk penerima. Informasi ini akan memberikan URL playlist master dan jenis MIME streaming kepada penerima. Tambahkan kode berikut ke file js/Receiver.js di Promise() interseptor LOAD:

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

Setelah menyelesaikan langkah ini, Anda dapat melanjutkan ke bagian Pengujian untuk mencoba memuat dengan konten DASH. Jika Anda ingin menguji pemuatan dengan konten HLS, lihat langkah berikutnya.

Menggunakan Konten HLS API Contoh

API contoh menyertakan konten HLS serta DASH. Selain menetapkan contentType seperti yang kami lakukan pada langkah sebelumnya, permintaan pemuatan akan memerlukan beberapa properti tambahan untuk menggunakan URL HLS API contoh. Saat penerima dikonfigurasi untuk memutar streaming HLS, jenis container default yang diharapkan adalah streaming transpor (TS). Akibatnya, penerima akan mencoba membuka sampel streaming MP4 dalam format TS jika hanya properti contentUrl yang dimodifikasi. Dalam permintaan pemuatan, objek MediaInformation harus dimodifikasi dengan properti tambahan agar penerima mengetahui bahwa konten berjenis MP4, bukan TS. Tambahkan kode berikut ke file js/Receiver.js di interseptor beban untuk mengubah properti contentUrl dan contentType. Selain itu, tambahkan properti HlsSegmentFormat dan HlsVideoSegmentFormat.

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

Melakukan Pengujian

Sekali lagi, buka Alat Command and Control (CaC) dan setel ID Aplikasi Anda ke ID Aplikasi penerima. Pilih perangkat Anda menggunakan tombol Cast.

Buka tab "Muat Media". Kali ini hapus teks di kolom "URL Konten" di samping tombol "Muat menurut Konten", yang akan memaksa aplikasi mengirim permintaan LOAD yang hanya berisi referensi contentId ke media kami.

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

Dengan asumsi semuanya berfungsi dengan baik terhadap modifikasi Anda pada penerima, interseptor harus berhati-hati dalam membentuk objek MediaInfo menjadi sesuatu yang dapat diputar SDK di layar.

Klik tombol "Muat menurut Konten" untuk mengetahui apakah media Anda diputar dengan semestinya. Anda dapat mengubah Content ID menjadi ID lain di file content.json.

10. Mengoptimalkan untuk layar smart

Layar smart adalah perangkat dengan fungsi sentuh yang memungkinkan aplikasi penerima mendukung kontrol yang mendukung fitur sentuh.

Bagian ini menjelaskan cara mengoptimalkan aplikasi penerima saat diluncurkan di layar smart, dan cara menyesuaikan kontrol pemutar.

Mengakses Kontrol UI

Objek Kontrol UI untuk Layar Smart dapat diakses menggunakan cast.framework.ui.Controls.GetInstance(). Tambahkan kode berikut ke file js/receiver.js Anda di atas context.start():

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

Jika tidak menggunakan elemen <cast-media-player>, Anda harus menyetel touchScreenOptimizedApp di CastReceiverOptions. Dalam codelab ini, kita menggunakan elemen <cast-media-player>.

context.start({ touchScreenOptimizedApp: true });

Tombol kontrol default ditetapkan ke setiap slot berdasarkan MetadataType dan MediaStatus.supportedMediaCommands.

Kontrol Video

Untuk MetadataType.MOVIE, MetadataType.TV_SHOW, dan MetadataType.GENERIC, objek Kontrol UI untuk Layar Smart akan ditampilkan seperti dalam contoh di bawah.

Gambar video yang diputar dengan kontrol UI yang ditempatkan di atasnya

  1. --playback-logo-image
  2. MediaMetadata.subtitle
  3. MediaMetadata.title
  4. MediaStatus.currentTime
  5. MediaInformation.duration
  6. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
  7. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
  8. PLAY/PAUSE
  9. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
  10. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

Kontrol Audio

Untuk MetadataType.MUSIC_TRACK, objek Kontrol UI untuk Layar Smart akan ditampilkan seperti di bawah ini:

Gambar musik yang diputar dengan kontrol UI yang ditempatkan di atasnya

  1. --playback-logo-image
  2. MusicTrackMediaMetadata.albumName
  3. MusicTrackMediaMetadata.title
  4. MusicTrackMediaMetadata.albumArtist
  5. MusicTrackMediaMetadata.images[0]
  6. MediaStatus.currentTime
  7. MediaInformation.duration
  8. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
  9. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
  10. PLAY/PAUSE
  11. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
  12. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

Mengupdate Perintah Media yang Didukung

Objek Kontrol UI juga menentukan apakah ControlsButton ditampilkan atau tidak berdasarkan MediaStatus.supportedMediaCommands.

Jika nilai supportedMediaCommands sama dengan ALL_BASIC_MEDIA, tata letak kontrol default akan ditampilkan seperti di bawah ini:

Gambar kontrol pemutar media: status progres, tombol &#39;Putar&#39;, tombol &#39;Lewati maju&#39;, dan &#39;Lewati mundur&#39; diaktifkan

Jika nilai supportedMediaCommands sama dengan ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, tata letak kontrol default akan ditampilkan seperti di bawah ini:

Gambar kontrol pemutar media: status progres, tombol &#39;Putar&#39;, tombol &#39;Lewati maju&#39; dan &#39;Lewati mundur&#39;, serta tombol &#39;Antrean sebelumnya&#39; dan &#39;Antrean berikutnya&#39; diaktifkan

Jika nilaisupportMediaCommands sama dengan PAUSE | QUEUE_PREV | QUEUE_NEXT, tata letak kontrol default akan ditampilkan seperti di bawah ini:

Gambar kontrol pemutar media: status progres, tombol &#39;Putar&#39;, serta tombol &#39;Antrean sebelumnya&#39; dan &#39;Antrean berikutnya&#39; diaktifkan

Saat trek teks tersedia, tombol teks tertutup akan selalu ditampilkan di SLOT_1.

Gambar kontrol pemutar media: status progres, tombol &#39;Putar&#39;, tombol &#39;Lewati maju&#39; dan &#39;Lewati mundur&#39;, tombol &#39;Antrean sebelumnya&#39; dan &#39;Antrean berikutnya&#39;, serta tombol &#39;Teks Tertutup&#39; yang diaktifkan

Untuk mengubah nilai supportedMediaCommands secara dinamis setelah memulai konteks penerima, Anda dapat memanggil PlayerManager.setSupportedMediaCommands untuk mengganti nilai. Selain itu, Anda dapat menambahkan perintah baru menggunakan addSupportedMediaCommands atau menghapus perintah yang ada dengan menggunakan removeSupportedMediaCommands.

Menyesuaikan Tombol Kontrol

Anda dapat menyesuaikan kontrol menggunakan PlayerDataBinder. Tambahkan kode berikut ke file js/receiver.js Anda di bawah touchControls untuk menetapkan slot pertama kontrol:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. Menerapkan penjelajahan media di layar smart

Penjelajahan Media adalah fitur Penerima CAF yang memungkinkan pengguna menjelajahi konten tambahan di perangkat sentuh. Untuk menerapkannya, Anda akan menggunakan PlayerDataBinder untuk menetapkan UI BrowseContent. Selanjutnya, Anda dapat mengisinya dengan BrowseItems berdasarkan konten yang ingin Anda tampilkan.

Konten Jelajah

Berikut adalah contoh UI BrowseContent dan propertinya:

Gambar UI JelajahiKonten menampilkan dua thumbnail video dan sepertiga

  1. BrowseContent.title
  2. BrowseContent.items

Rasio Lebar Tinggi

Gunakan targetAspectRatio property untuk memilih rasio lebar tinggi terbaik untuk aset gambar Anda. Tiga rasio lebar tinggi didukung oleh CAF Receiver SDK: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

TelusuriItem

Gunakan BrowseItem untuk menampilkan judul, subtitel, durasi, dan gambar untuk setiap item:

Gambar UI JelajahiKonten menampilkan dua thumbnail video dan sepertiga

  1. BrowseItem.image
  2. BrowseItem.duration
  3. BrowseItem.title
  4. BrowseItem.subtitle

Menetapkan data Jelajah Media

Anda dapat memberikan daftar konten media untuk dijelajahi dengan memanggil setBrowseContent. Tambahkan kode berikut ke file js/receiver.js di bawah playerDataBinder dan di pemroses peristiwa MEDIA_CHANGED untuk menetapkan item cari dengan judul "Berikutnya".

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

Mengklik item jelajah media akan memicu interseptor LOAD. Tambahkan kode berikut ke interseptor LOAD untuk memetakan request.media.contentId ke request.media.entity dari item jelajah media:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

Anda juga dapat menetapkan objek BrowseContent ke null untuk menghapus UI Jelajah Media.

12. Men-debug Aplikasi Penerima

SDK Penerima Cast menyediakan opsi lain bagi developer untuk men-debug aplikasi penerima dengan mudah menggunakan CastDebugLogger API dan Alat Command and Control (CaC) pendamping untuk menangkap log.

Inisialisasi

Untuk menggabungkan API, tambahkan skrip sumber CastDebugLogger dalam file index.html. Sumber harus dideklarasikan dalam tag <head> setelah deklarasi Cast Receiver SDK.

<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, tambahkan kode berikut untuk mengambil instance CastDebugLogger dan mengaktifkan logger:

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 logger debug diaktifkan, overlay yang menampilkan DEBUG MODE akan ditampilkan pada penerima.

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

Membuat Log Peristiwa Pemain

Dengan CastDebugLogger, Anda dapat dengan mudah mencatat peristiwa pemutar yang diaktifkan oleh SDK Penerima CAF 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 dalam log.

Tambahkan kode berikut di bawah deklarasi castDebugLogger untuk dicatat ke dalam log saat peristiwa CORE pemain dipicu atau perubahan mediaStatus disiarkan:

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

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

// 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 Khusus

API CastDebugLogger memungkinkan Anda membuat pesan log yang muncul di overlay debug penerima dengan warna yang berbeda. Metode log berikut tersedia, dan diurutkan 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 adalah tag kustom. Ini dapat berupa string identifikasi yang menurut Anda bermakna. CastDebugLogger menggunakan tag untuk memfilter log. Penggunaan tag dijelaskan secara mendetail di bawah. Parameter kedua adalah pesan log.

Untuk menampilkan cara kerja log, tambahkan log ke interseptor LOAD Anda.

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

Anda dapat mengontrol pesan yang akan 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 error, peringatan, info, dan log debug. Mengaktifkan tag kustom dengan level WARNING hanya akan menampilkan pesan log error dan peringatan.

Konfigurasi loggerLevelByTags bersifat opsional. Jika tag kustom tidak dikonfigurasi untuk level loggernya, semua pesan log akan ditampilkan pada overlay debug.

Tambahkan kode berikut di bawah logger peristiwa CORE:

// 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
}

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

Overlay Debug

Logger Debug Cast menyediakan overlay debug di penerima untuk menampilkan pesan log kustom di perangkat transmisi. Gunakan showDebugLogs untuk beralih overlay debug dan clearDebugLogs untuk menghapus pesan log di overlay.

Tambahkan kode berikut untuk melihat pratinjau overlay debug di penerima.

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      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 atas frame video

13. Selamat

Kini Anda telah mengetahui cara membuat aplikasi penerima web kustom menggunakan Cast Web Receiver SDK.

Untuk detail selengkapnya, lihat panduan developer Penerima Web.