Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Layanan Google Play: Google Cast v3 dan Media

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Dika Budiaji (you can also view the original English article)

Google Cast adalah teknologi yang memungkinkan pengguna untuk mengirim konten online ke perangkat, seperti Chromecast atau TV Android, terhubung ke televisi. Setelah konten tersedia di televisi, pengguna dapat mengontrol dari komputer atau perangkat mobile mereka.

Dalam tutorial ini, Anda akan belajar cara membuat sebuah dasar Cast-enabled aplikasi untuk Android menggunakan Cast SDK v3, yang diumumkan selama konferensi Google i/o 2016.

Cast konsol Setup

Google Cast dibangun sekitar dua komponen: receiver, yang pada dasarnya-halaman web yang ditampilkan pada perangkat casting dengan konten Anda, dan sender, yang adalah program klien yang meminta media dan kontrol pemutaran.

Sebelum Anda dapat membuat aplikasi sender Anda, Anda akan perlu untuk mendaftar account di Google Cast Developer Console, dan kemudian membuat dan mengkonfigurasi aplikasi receiver baru. Untuk mendaftar account, Anda akan perlu membayar satu kali biaya $5. Setelah account dibuat, Anda dapat klik pada tombol ADD NEW APPLICATION merah untuk menciptakan sebuah aplikasi receiver yang baru.

Selanjutnya, Anda akan memiliki tiga pilihan: Custom Receiver, Styled Media Receiver, dan Remote Display Receiver. Untuk kesederhanaan, dalam tutorial ini Anda akan menggunakan Styled Media Receiver.

New receiver application types

Pada layar berikutnya, Anda akan dapat memilih beberapa pengaturan dasar untuk Anda receiver, seperti nama aplikasi, URL opsional untuk sebuah style sheet CSS untuk menyesuaikan tampilan receiver, dan kemampuan untuk mengaktifkan mode guest dan casting-hanya audio.

Setup options for a new styled media receiver

Setelah Anda menekan biru Simpan tombol, Anda akan disajikan dengan layar yang menunjukkan rincian dasar aplikasi receiver baru Anda. Anda akan melihat bahwa layar ini juga berisi ID Aplikasi anda. Anda akan perlu menggunakan nilai ini dalam aplikasi Android Anda.

Screen showing information for a newly created receiver

It's penting dicatat bahwa meskipun aplikasi Receiver Anda dibuat, itu mungkin mengambil beberapa jam untuk menjadi discoverable oleh aplikasi pengirim.

Untuk menguji, Anda akan perlu untuk white-list setidaknya satu perangkat casting. Anda dapat melakukan ini dari Google Cast pengembang konsol dengan mengklik tombol  merah ADD DEVICE. Di layar yang muncul, Anda dapat memasukkan nomor seri perangkat Anda dan deskripsi untuk white-list untuk pengujian dengan aplikasi Receiver Anda.

Dialog for white-listing physical casting devices

Pada titik ini, Anda harus memiliki receiver yang dibuat dan perangkat tes yang white-listed, sehingga Anda siap untuk mulai membangun aplikasi Android receiver. Ketika Anda telah diciptakan dan diterbitkan aplikasi Anda di Play Store, Anda akan ingin untuk kembali ke konsol pengembang Cast untuk mempublikasikan Receiver Anda, memungkinkan perangkat casting digunakan dengan aplikasi receiver Anda.

Android Setup

Hal pertama yang harus Anda lakukan dalam aplikasi Android Anda adalah termasuk Cast Framework dan Media Router Perpustakaan di bawah dependencies node dalam build.gradle file.

Selanjutnya, Anda akan ingin menyimpan ID aplikasi yang Anda diberikan ketika membuat receiver Anda dalam strings.xml file.

Langkah terakhir dalam proses setup termasuk Internet permission untuk aplikasi Anda. Buka AndroidManifest.xml dan sertakan baris berikut sebelum Anda application node.

Sekarang setup selesai, Anda dapat memindahkan ke termasuk tombol rute media dalam aplikasi Anda.

Menampilkan tombol Routing dan menghubungkan ke Cast Device

Tombol routing adalah ikon di toolbar aplikasi yang umumnya menandakan bahwa app mendukung casting bagi pengguna.

Media router button

Untuk mendapatkan tombol ini untuk muncul di Toolbar aplikasi Anda, cara termudah adalah untuk memasukkannya ke dalam menu XML file untuk Activity Anda (juga dianjurkan bahwa ini pergi ke setiap Activity di app).

Selanjutnya, Anda akan perlu untuk menginisialisasi MenuItem ini baru dalam onCreateOptionsMenu metode Activity Anda.

Setelah tombol rute media diinisialisasi, Anda akan ingin menambahkan listener state aplikasi Anda untuk casting.

Available Listener

Sementara ada beberapa listner yang tersedia, ada tiga layak membahas saat Anda mulai menggunakan Google Cast framework.

  • CastStateListener: listener ini memonitor casting keadaan state aplikasi. Hal ini dipicu ketika app telah beralih ke CONNECTING, CONNECTED, NOT_CONNECTED, atau NO_DEVICES_AVAILABLE.
  • AppVisibilityListener: listener ini memiliki dua metode: onAppEnteredForeground dan onAppEnteredBackground. Metode ini disebut ketika aplikasi Anda telah telah backgrounded oleh pengguna Anda, atau ketika pengguna telah dibuka kembali aplikasi Anda, masing-masing.
  • SessionManagerListener: final listener kita akan pergi melalui ini juga paling verbose. Session adalah siklus hidup interaksi pengguna dengan perangkat casting, mulai ketika pengguna telah terhubung ke perangkat, dipelihara melalui casting, dan berakhir bila pengguna telah terputus. Kerangka kerja Google Cast Android berinteraksi dengan Session melalui SessionManager objek.

Ini tiga listener dapat dikaitkan dengan Google Cast framework seperti demikian, di mana this dalam contoh ini adalah Activity yang telah dilaksanakan setiap dari antarmuka di atas.

Anda mungkin juga menyadari bahwa Anda mengakses kerangka SessionManager dan pemain yang menggunakan CastContext.getSharedInstance(Context). Hal ini karena CastContext, titik interaksi utama antara aplikasi Anda dan kerangka Cast, lazily diinisialisasi untuk app peningkatan kinerja.

Ketika Activity Anda tidak lagi aktif, Anda akan perlu ingat untuk menghapus listener ini.

Menciptakan OptionsProvider

Untuk melakukan apa-apa dengan Cast framework, Anda akan perlu untuk membuat sebuah class baru yang extend OptionsProvider. Kelas ini akan menjadi tempat Anda dapat mengkonfigurasi berbagai pilihan aplikasi sender Anda.

Kami akan menyimpan ini sederhana untuk sekarang dan hanya mengembalikan sebuah objek CastOptions dari getCastOptions metode, yang akan memungkinkan melanjutkan menyimpan sesi dan menghubungkan kembali ke sesi yang sudah berlangsung (meskipun kedua sudah diaktifkan secara default, mereka adalah disediakan di sini sebagai contoh).

Objek CastOptions ini juga mana receiver app ID dikaitkan dengan pengirim Anda. Meskipun metode getAdditionalSessionProviders harus dinyatakan dalam kelas ini, kita dapat dengan aman mengabaikan itu untuk tujuan kita.

Anda juga perlu untuk memasukkan kelas ini dalam file AndroidManifest.xml Anda dalam tag meta-data di bawah Anda application node.

Pada titik ini, aplikasi harus mampu menemukan perangkat casting white-listed dan terhubung ke mereka melalui aplikasi Anda.

Routing dialog when connected to a casting device but not casting

Routing Dialog Styling

Tergantung pada tema yang Anda gunakan dalam aplikasi Anda (seperti Theme.AppCompat.Light.NoActionBar), Anda mungkin telah melihat beberapa perilaku aneh dengan warna pada dialog castiing device, seperti putih font dan ikon pada latar belakang putih.

Routing dialog styles issue

Anda mungkin juga memutuskan bahwa Anda ingin menyesuaikan bagaimana dialog muncul agar sesuai dengan aplikasi Anda. Anda dapat melakukan ini dengan meng-override dua gaya yang digunakan untuk Cast dialog: Theme.MediaRouter.Light.DarkControlPanel dan Theme.MediaRouter.LightControlPanel. Misalnya, jika Anda berjalan ke font putih pada latar belakang putih, Anda dapat menyertakan kode berikut dalam file styles.xml untuk mengubah ikon dan warna font untuk menjadi hitam pada latar belakang putih.

Casting konten

Setelah Anda telah terhubung ke perangkat casting, Anda mungkin ingin membiarkan konten pengguna yang dilemparkan kepadanya. Untungnya, Cast SDK membuat ini sangat mudah dilakukan. Dalam aplikasi Anda, Anda akan ingin untuk menentukan jika pengguna Anda telah terhubung ke perangkat, yang dapat dilakukan dengan memastikan bahwa SessionManager memiliki session saat ini dan bahwa arus sesi memiliki sebuah objek RemoteMediaClient yang terkait dengan itu.

Setelah Anda tahu bahwa aplikasi ini dikaitkan dengan RemoteMediaClient, Anda akan ingin untuk membuat sebuah objek MediaInfo yang berisi link ke konten remote Anda ingin bermain, serta jenis streaming dan konten untuk media Anda. Ketika MediaInfo adalah dibuat dan populated, Anda dapat memanggil metode  RemoteMediaClient untuk mulai casting konten. Sebagai contoh, kode berikut akan melemparkan sebuah file video ke televisi.

Routing dialog when connected to a device

Metadata

Receiver dan komponen UI dalam Cast SDK menggunakan sebuah objek MediaMetadata untuk menyimpan dan referensi informasi tentang media yang saat ini sedang dimainkan. Anda dapat menambahkan nilai ke objek ini menggunakan kunci yang disediakan oleh kelas, dan Anda dapat menambahkan URL gambar menggunakan metode addImage.

Setelah objek MediaMetadata dibuat, Anda dapat menghubungkannya dengan konten yang MediaInfo.

Komponen UI

Sementara Cast SDK menangani logika untuk menghubungkan dan casting konten ke televisi, ini juga menyediakan beberapa komponen UI yang membantu pengembang memenuhi pedoman desain Casting UI.

Pengantar Overlay

Ketika pengguna pertama membuka aplikasi Anda, disarankan bahwa Anda membiarkan mereka tahu bahwa Anda mendukung Google Cast. Anda dapat melakukan ini dengan termasuk IntroductoryOverlay, yang akan menyoroti tombol pemain seperti itu menjadi tersedia untuk pertama kalinya.

Untuk menyertakan IntroductoryOverlay, hal pertama yang ingin Anda lakukan adalah menambahkannya sebagai variabel anggota di bagian atas activity utama.

Setelah Anda memiliki sebuah objek yang umum untuk hamparan, Anda dapat membuat metode yang akan memeriksa untuk melihat jika tombol router media ditampilkan, dan jika ditampilkan, akan menampilkan overlay

Komponen ini fleshed dengan menggunakan pola sederhana builder yang akan menerima String teks, warna sumber daya ID dan beberapa atribut kustomisasi lainnya. Lebih sering daripada tidak, Anda juga akan ingin untuk memastikan bahwa Anda memanggil setSingleTime(), sehingga overlay hanya pernah ditampilkan sekali bagi pengguna.

Sekarang bahwa Anda memiliki sebuah metode yang diciptakan untuk menampilkan overlay, Anda hanya akan perlu untuk memanggulnya. Ada dua titik di mana Anda harus menambahkan metode ini: dalam onCreateOptionsMenu, dan onCastStateChanged dari CastStateListener Anda ketika state tidak NO_DEVICES_AVAILABLE. Ini akan menangani kedua kontinjensi dari ketika tombol routing bisa muncul.

Pada titik ini, Anda harus mampu memulai aplikasi Anda dan lihat tampilan, seperti yang ditunjukkan pada gambar berikut. Jika Anda perlu melihatnya lagi untuk tujuan pengujian, Anda dapat menghapus data aplikasi Anda dan membuka kembali.

IntroductoryOverlay example

Expanded Controls

Sementara casting, Anda akan ingin dapat menyediakan widget UI yang mudah untuk mengontrol konten di televisi pengguna. Google telah membuat ini mudah dengan menyediakan kelas ExpandedControllerActivity dalam Cast SDK.

Untuk menggunakan ini, membuat sebuah class Java yang baru dan extend ExpandedControllerActivity. Tutorial ini akan menciptakan satu disebut ExpandedControlsActivity. Setelah activity Anda dibuat, update onCreateOptionsMenu untuk memasukkan tombol routing casting dalam toolbar.

Selanjutnya, buka kelas OptionsProvider Anda. Anda akan ingin untuk masuk ke getCastOptions metode dan membuat CastMediaOptions objek yang terikat dalam ExpandedControllerActivity Anda. Setelah objek CastMediaOptions dibuat, Anda dapat mengaitkan itu dengan CastOptions item yang dikembalikan dengan metode.

Akhirnya, untuk mendapatkan ExpandedControllerActivity, Anda akan perlu untuk memasukkannya ke dalam AndroidManifest.xml, seperti.

Anda akan melihat bahwa activity node memiliki theme properti yang ditetapkan. style ini digunakan untuk menyesuaikan opsional ExpandedControllerActivity dan tombol-tombol yang ditampilkan.

Controller terdiri dari empat slot dapat disesuaikan tombol, dengan beralih putar/jeda di tengah. Menggunakan style baru dan array resource, Anda dapat menyesuaikan tombol yang muncul. Dalam arrays.xml, saya telah menambahkan array baru bahwa set slot 1 slot kosong, 2 untuk tombol rewind 30 detik, slot 3 (pertama item di sebelah kanan beralih putar/jeda) untuk maju cepat 30 detik, dan slot terakhir untuk host beralih mute.

Anda kemudian dapat mengaitkan array dengan Activity Anda dengan menciptakan resource style baru dan mengganti nilai castExpandedControllerStyle dengan style baru yang extend CastExpandedController.

Pada titik ini, Anda harus dapat mengklik pada gambar dalam dialog router Anda untuk casted media untuk membuka controller baru Activity, atau memulai diri dari dalam aplikasi Anda dengan panggilan startActivity sederhana.

ExpandedControllerActivity example

Notification/Lock Screen Controls

Ketika pengguna casting konten ke TV mereka, ada kesempatan baik bahwa mereka tidak akan membuat aplikasi Anda di latar depan atau telepon mereka dibuka. Ketika mereka menavigasi keluar dari aplikasi Anda, Anda akan ingin memberikan cara mudah bagi mereka untuk mengontrol konten app Anda. Anda dapat melakukan ini dengan menambahkan pemberitahuan untuk app Anda ketika itu di foreground untuk Lollipop dan perangkat diatasnya, dan Cast SDK akan menangani membuat lock screen RemoteControlClient untuk KitKat dan perangkat sebelumnya.

Menambahkan notification/lock layar kontrol agak sederhana, seperti semua ditangani dalam metode getCastOptions Anda OptionsProvider (CastOptionsProvider.java untuk tutorial ini).

Pertama, Anda akan perlu untuk membuat ArrayList string yang akan berisi tombol-tombol yang Anda inginkan untuk Anda kontrol. Selanjutnya, Anda dapat membuat sebuah array int yang akan berisi indeks tombol yang Anda ingin menampilkan ketika pemberitahuan dalam mode kompak.

Setelah Anda memiliki array Anda dua dibuat, Anda akan membuat sebuah objek NotificationOptions yang mengikat tindakan pemberitahuan baru dan menetapkan Activity akan dibuka ketika pemberitahuan yang dipilih. Untuk contoh ini, kami hanya akan menggunakan ExpandedControlsActivity yang kita buat di bagian terakhir.

Akhirnya, Anda dapat menambahkan pemberitahuan ke CastMediaOptions Anda.

Sekarang, ketika pengguna Anda melemparkan konten televisi mereka dan mengunci layar atau menavigasi keluar dari aplikasi Anda, pemberitahuan akan muncul yang memungkinkan mereka untuk mengontrol konten pada layar besar sementara mereka terus berinteraksi dengan telepon mereka. Mengeklik pemberitahuan di luar kontrol akan membawa aplikasi Anda kembali ke foreground dengan ExpandedControlsActivity, memberikan pengguna lebih berbutir halus kontrol dari pengalaman menonton mereka.

Notification on a lock screen example in Lollipop

Mini pengontrol

Widget UI terakhir yang Anda akan belajar tentang dalam tutorial ini adalah MiniControllerFragment. Item ini dapat ditempatkan dalam file tata letak activity Anda, dan ketika aplikasi Anda casting konten, secara otomatis akan menjadi terlihat dan memberikan controller yang mudah diakses bagi pengguna saat mereka meramban aplikasi Anda. Meskipun ini adalah komponen terakhir yang akan kita bahas, hal ini juga jauh termudah untuk menerapkan. Anda hanya perlu untuk memasukkannya dalam file tata letak Anda, seperti.

Ketika Anda mengklik pada item ini di mana saja di luar beralih Putar/Jeda, ExtendedControllerActivity Anda akan dibangunkan, memberikan pengguna mudah akses ke konten di televisi mereka.

MiniControllerFragment example

Kesimpulan

Dalam tutorial ini Anda telah belajar banyak tentang baru Google Cast SDK untuk Android, komponen UI yang disediakan dalam itu, dan bagaimana untuk menciptakan sebuah aplikasi dasar gaya receiver untuk casting. Apa yang Anda telah dibahas di sini akan membantu Anda membangun jenis yang paling umum dari aplikasi casting, meskipun Google juga menyediakan fitur yang akan membiarkan Anda dengan cepat membuat Cast-enabled games dan custom receiver applications.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.