Membuat Penerima Cast dasar

googlecastnew500.png

Codelab ini akan mengajarkan cara membuat aplikasi Penerima yang kompatibel untuk Cast untuk memutar konten di perangkat Google Cast.

Apa itu Google Cast?

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

SDK Google Cast 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. Baca lebih lanjut di sini.

Apa yang akan kita buat?

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

Anda akan mempelajari

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

Yang Anda perlukan

  • 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

  • Sebelumnya, Anda harus memiliki pengetahuan pengembangan web.
  • Anda juga perlu memiliki pengetahuan tentang menonton TV :)

Bagaimana cara Anda 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

Anda dapat mendownload semua kode contoh ke komputer ...

Download Sumber

dan mengekstrak file zip yang didownload.

Untuk dapat menggunakan penerima dengan perangkat Cast, perangkat 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 ada server yang tersedia untuk Anda, jangan khawatir. Anda dapat menginstal node.js, modul node http-server dan ngrok.

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

Menjalankan server

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

cd app-start
http-server

Anda nantinya akan melihat tampilan 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, dengan menetapkan endpoint HTTPS aman 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 ini. Setiap perubahan yang Anda buat secara lokal akan tersedia dengan cepat.

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

d8b39f5d33d33db4.png

Klik "Tambahkan aplikasi baru"

e8c19e57b85c7d.png

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

bf364a7d382e3c58.png

Masukkan detail penerima baru, pastikan menggunakan URL yang Anda pakai

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 keperluan codelab ini, sebaiknya gunakan aplikasi penerima yang tidak dipublikasikan.

a446325da6ebd627.png

Klik "Tambahkan Perangkat baru"

a21355793a3f4cd5.png

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 sebelum penerima dan perangkat siap melakukan pengujian. Setelah menunggu selama 5-15 menit, Anda harus memulai ulang perangkat Cast.

Google_Chrome_logo_icon.png

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

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

7dbd91a75140c46f.png

  1. Anda akan melihat Alat CoC.
  2. Gunakan ID penerima sampel "CC1AD845" default dan klik tombol "Setel ID Aplikasi".
  3. Klik tombol Cast di kiri atas lalu pilih perangkat Google Cast.

a02db8244a963fd6.png

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

acd63df355a0493.png

  1. Klik tombol "Muat menurut Konten" untuk memutar contoh video.
  2. Video akan mulai diputar di perangkat Google Cast untuk menunjukkan tampilan fungsi penerima dasar yang menggunakan Penerima Default.

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.

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

  1. Pilih direktori android_studio_folder.pngapp-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 (yaitu, 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 akan berisi UI untuk aplikasi penerima kita. Untuk saat ini, file html tersebut masih kosong, dan kita akan menambahkan ke seluruh lab kode.

receiver.js

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

Penerima Cast dasar akan menginisialisasi sesi Cast saat startup. Hal ini diperlukan untuk memberi tahu semua aplikasi pengirim yang terhubung bahwa penerima berhasil ditampilkan. Selain itu, SDK baru hadir dengan pra-konfigurasi untuk menangani media streaming dengan laju 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 menyediakan ruang ke penerima SDK agar dapat memunculkan UI penerima default yang dikirimkan bersama 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 masuk utama Anda ke seluruh Penerima SDK
  • menyimpan referensi ke PlayerManager, objek yang menangani pemutaran dan menyediakan semua hook yang Anda butuhkan untuk mem-plugin logika khusus Anda sendiri
  • menginisialisasi SDK dengan memanggil start() di CastReceiverContext

Tambahkan berikut ke js/receiver.js.

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

context.start();

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

Arahkan browser web Anda ke Fitur Command and Control (CAC).

72039b93a476e35e.png

Pastikan Anda mengganti ID Aplikasi seperti yang didaftarkan sebelumnya di kolom dan klik "Setel 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 SDK Cast yang memodelkan item media.
  2. Pengirim tersambung 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 mengirimkan perintah pemutaran ke penerima untuk mengontrol pemutaran berdasarkan interaksi pengguna dengan aplikasi pengirim.

Pada 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 pengenal untuk membuat panggilan API backend yang sesuai untuk menyelesaikan URL aset yang sebenarnya dan menetapkannya 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 berbagai hal seperti itu di bagian berikutnya. Untuk saat ini, klik ikon Cast dan pilih perangkat untuk membuka penerima.

4954e949c3d3b232.png

Pilih tab "Muat Media" dan klik tombol "Muat menurut konten". Penerima akan mulai memutar konten sampel.

ccd8cc258d0c1522.png

Jadi, di luar kebiasaannya, Penerima SDK akan menangani:

  • Inisialisasi sesi Cast
  • Permintaan LOAD yang masuk dari pengirim yang berisi aset yang dapat diputar
  • Penyediaan UI pemutar dasar yang siap ditampilkan di layar TV.

Anda dapat mempelajari terlebih dahulu Alat CaC dan kodenya sebelum melanjutkan ke bagian berikutnya, dan di sana kita akan memperluas penerima agar dapat berbicara dengan API contoh sederhana guna memenuhi permintaan LOAD yang masuk dari pengirim.

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 diinginkan dengan kunci API-nya, bukan mengirim melalui URL aset yang dapat diputar Google.

Aplikasi biasanya melakukan hal 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 diterapkan dalam metode PlayerManager setMessageInterceptor(). Dengan fungsi ini, Anda dapat mencegah pesan masuk berdasarkan jenis dan mengubahnya sebelum mencapai pengendali pesan internal SDK. Pada bagian ini, kita menangani permintaan LOAD tempat kita akan melakukan hal berikut:

  • Membaca permintaan LOAD yang masuk dan contentId khususnya.
  • Melakukan panggilan GET ke API kami untuk mencari aset yang dapat di-streaming berdasarkan contentId-nya.
  • Mengubah permintaan LOAD dengan URL streaming.
  • Mengubah objek MediaInformation untuk menyetel parameter jenis streaming.
  • Meneruskan permintaan ke SDK untuk memutar atau menolak perintah jika kita tidak dapat mencari media yang diminta.

Sampel API yang diberikan menunjukkan hook SDK untuk menyesuaikan tugas-tugas penerima yang umum dengan tetap mengandalkan pengalaman yang unik.

Contoh API

Arahkan browser Anda ke https://storage.googleapis.com/cpe-sample-media/content.json dan lihat katalog video sampel kami. Konten tersebut mencakup URL untuk gambar poster dalam format png serta streaming DASH atau HLS. DASH dan HLS streaming mengarah ke sumber video dan audio yang diupload dan disimpan dalam penampung berformat 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.

Mencegah permintaan ROAD

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

Tambahkan kode berikut ke file js/receiver.js Anda, tepat sebelum memanggil 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 menjelaskan cara mengonfigurasi properti media dari 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 pemuatan dengan konten DASH. Jika Anda ingin menguji pemuatan dengan konten HLS, lihat langkah berikutnya.

Menggunakan Konten HLS API Contoh

API contoh mencakup konten HLS serta DASH. Selain menyetel contentType seperti yang kita lakukan pada langkah sebelumnya, permintaan pemuatan akan memerlukan beberapa properti tambahan untuk menggunakan URL HLS milik API sampel. Saat penerima dikonfigurasi untuk memutar streaming HLS, jenis penampung default yang diharapkan adalah streaming transportasi (TS). Akibatnya, penerima akan mencoba membuka streaming MP4 dalam format TS jika hanya properti contentUrl yang dimodifikasi. Dalam permintaan pemuatan, objek MediaInformation harus diubah dengan properti tambahan agar penerima mengetahui bahwa konten berjenis MP4, bukan TS. Tambahkan kode berikut ke file js/receiver.js di interseptor pemuatan 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;
            ...
          }
        });
      });
    });

Pengujian

Sekali lagi, buka Alat Command and Control (CAC) dan atur ID Aplikasi Anda ke ID Aplikasi penerima. Pilih perangkat 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.

3e830710c562189f.png

Dengan asumsi bahwa semua berjalan lancar dengan modifikasi pada penerima, interseptor harus berhati-hati dalam membentuk objek MediaInfo menjadi sesuatu yang dapat diputar SDK di layar.

Klik tombol "Muat menurut Konten" untuk memastikan media Anda diputar dengan semestinya. Jangan ragu untuk mengubah Content ID ke ID lain dalam file content.json.

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

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 menetapkan touchScreenOptimizedApp dalam CastReceiverOptions. Dalam codelab ini, kami 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 ini.

5f5a3d567813cf10.png

  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:

e93d4557f324e8c0.png

  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:

5b97ada8d239239c.png

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

2d8267d4d8b68e87.png

Jika nilai supportedMediaCommands setara dengan PAUSE | QUEUE_PREV | QUEUE_NEXT, tata letak kontrol default akan ditampilkan sebagai berikut:

39c9afe44c4fa8dc.png

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

771952ab29e2eb21.png

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 sudah ada 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();

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

BrowseContent

Berikut adalah contoh UI BrowseContent dan propertinya:

e40623e1907d983a.png

  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 SDK Penerima CAF: SQUARE_1_TO_1, PORTRAIT_2_TO_3, dan LANDSCAPE_16_TO_9.

BrowseItem

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

838a0db6c9224710.png

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

Menyetel 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 dalam pemroses peristiwa MEDIA_CHANGED untuk menetapkan item pencarian 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 penjelajahan 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 menyetel objek BrowseContent ke null untuk menghapus UI Jelajah Media.

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

Inisialisasi

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

<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.
castDebugLogger.setEnabled(true);

Jika logger debug diaktifkan, overlay yang menampilkan DEBUG MODE akan ditampilkan pada penerima.

d9cb99e7742fc240.png

Mencatat Peristiwa Pemutar

Dengan CastDebugLogger, Anda dapat dengan mudah mencatat peristiwa pemutar yang diaktifkan oleh SDK Penerima CAF dan menggunakan berbagai level pencatatan 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 deklarasi castDebugLogger untuk mencatat log saat peristiwa pemutar CORE 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.
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
}

Pesan Log dan Tag Kustom

Dengan API CastDebugLogger, Anda dapat membuat pesan log yang muncul di overlay debug penerima menggunakan berbagai warna. Metode log berikut tersedia dan dicantumkan sesuai urutan 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 khusus. Parameter ini dapat berupa string identifikasi yang menurut Anda bermakna. CastDebugLogger menggunakan tag untuk memfilter log. Penggunaan tag akan dijelaskan secara lebih detail di bawah ini. Parameter kedua adalah pesan log.

Untuk menampilkan log yang sedang bekerja, 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 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. Mengaktifkan tag kustom dengan level WARNING hanya akan menampilkan pesan log error dan peringatan.

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

Tambahkan kode berikut di bawah CORE logger aktivitas:

// 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 sisi penerima untuk menampilkan pesan log khusus di perangkat transmisi. Gunakan showDebugLogs untuk mengalihkan overlay debug dan clearDebugLogs menghapus pesan log di overlay.

Tambahkan kode berikut untuk melihat pratinjau overlay debug di penerima.

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

356c6ac94318539c.png

Sekarang Anda sudah tahu cara membuat aplikasi penerima khusus menggunakan SDK Penerima Cast terbaru. Aplikasi sampel lainnya dapat ditemukan di GitHub di github.com/googlecast.