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

Membuat Sebuah Penglihat Video 360 Android Cardboard

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Augmented dan virutal reality, walaupun masih baru, telah menjadi populoer untuk aplikasi, termasuk bermain game dan edukasi. Sebelumnya, saya menunjukkanmu cara memasang Cardboard menggunakan Android SDK dan cara membuat penglihat gambar panorama. Posting ini akan menunjukkanmu cara menggunakan video 360 derajat di dalam aplikasimu.

Image of beach scene with Google Cardboard

Persiapan

Sebelum kamu membuat aplikasi penglihat video, kamu akan butuh mengklon Cardboard Android SDK ke komputermu melalui Git. Kamu bisa menemukan petunjuknya di seri artikel sebelumnya.

Untuk contoh kami, buat sebuah proyek Android dengan API 19 (KitKat) sebagai minimalnya dan gunakan template Empty Activity.

Ketika proyek dasar terlah dibuat, kamu perlu mengkopi folder common, commonwidget, dan videowidget dari Cardboard SDK ke akar dari proyekmu. Ketika direktori tersebut sudah dipindahkan, kamu akan perlu menambahkan modul ke dalam proyek dengan mengedit settings.gradle untuk tampak seperti berikut.

Akhirnya, masukkan pustaka yang dibutuhkan di proyekmu dengan menambahkan baris berikut ke app module build.gradle di bawah node dependencies.

Kamu akan menyadarı bahwa kıta menambahkan Pustaka Protocol Buffers darı Google yang membantu mengatur resource runtıme dan Exoplayer yang merupakan pustaka pemutar vıdeo buatan Google yang menggunakan komponen VrVıdeoVıew. Kedua pustaka dıbutuhkan oleh Cardboard SDK agar bısa berfungsıö kamu mungkın akan menyadarı ExoPlayer yang dıgunakan versı pertama bukan kedua. Jadı akan menımbulkan konflık jıka kamu menggunakan ExoPlayer V2 di proyekmu.

Lalu, kita akan memperbaharui berkas activity_main.xml untuk proyek sampel untuk memasukkan sebuah VrVideoView, Seekbar, dan Button yang akan dikerjakan nanti.

Ketika kamu telah selesai mempersiapkan pustaka Cardboar dan memiliki layout yang akan digunakan, ini adalah waktunya untuk kode Java.

Bekerja dengan Cardboard dan VR Video

Sebelum kita mulai menulis semua kode yang mengatur keadaan pemutar, posisi, dan memuat video 360 derajat, kita perlu menentukan sumber dari video. Untuk tutorial ini, kita akan membuat folder assets di bawah direktori utama, dan meletakkan video 360 derajat di sana. Sementara ada beberapa sumber video 360 derajat online, saya telah menambahkan sebuah video umum dari Sea World tentang kura-kura laut yang ditemani proyek GitHub untuk tutorial ini.

Menginisialisasi dan Struktur

Sekarang kamu telah memiliki berkas video untuk diputar, bukan class MainActivity.

Pertama kamu perlu menyatakan dan menginisialisasi item View yang didefinisikan berkas layout, nilai boolean akan menjaga dari keadaan muted dan play/pause. Sebagai tambahan, kita akan meletakkan OnClickListener di objek volume Button.

Selanjutnya, buat sebuah class yang meng-extend VrVideoEventListener. Class ini akan memiliki 5 metode berbeda yang bisa diimplementasikan ke penglihat video sederhana kita.

Kamu juga perlu mengimplementasikan SeekBar.OnSeekBarChangeListener di class-mu dan membuat metode stubs untuk interface tersebut.

Setelah kamu membuat inner class baru dan implementasi Seekbar, asosiasikan mereka dengan VrVideoView dan Seekbar pada akhir dari initviews() yang telah didefinisikan di atas.

Ada satu bagian persiapan yang perlu kamu perhatikan. Kamu perlu menangani lifecycle Android Activity dengan memnduku onPause(), onResume() dan onDestroy() untuk menjeda, memulai render di VrVideoView, atau mematikannya sepenuhnya. Kamu juga akan butuh melacak kondısı jeda darı metode ını.

Sekarang persiapan untuk panduan telah selesai, kita akan pindah ke topik yang lebih menarik: memuat video, mengatur pemutaran dan mengkostumisasi user experience.

Memulai dan Mengontrol VrVideoView

Karena memuat video 360 bisa diambil dalam hanya sekejap maupun beberapa detik, kamu ingin menghandle pemuatan video melalui tugas di latarbelakang. Mari mulai dengan sebuah AsyncTask baru yang akan membuat objek VrVideoView.Options baru, atur input untuk sesuai dengan format video ( dalam kasus ini, TYPE_MONO). lalu muat video dari direktori assets.

Lalu, pergi ke onCreate() dan buat sebuah instance dari tugas ini, lalu panggil execute() untuk memulainya. Sementara ada lebih banyak yang harus diselesaikan untuk menjaga task, kita hanya akan menggunakannya secara lokal dalam metode ini demi kesederhanaan dan jangan khawatir tentang AsyncTask lifecycle.

Pada titik ini, kamu harusnya sudah bisa menjalankan aplikasimu dan menjalankan Video 360 dari pemutar video Cardboard. Sekarang ini bekerja, mari tambahkan beberapa utilitas untuk pengguna. Kembali ke objek ActivityEventListener yang telah kamu buat sebelumnya, karena kita ingin menyempurnakan beberapa metode. Ketika video telah sukses dimuat, kita akan perlu mengatur nilai maksimal dari SeekBar, karena kita ingin terus melacak keadaan play/pause dari video.

Saat video dimulai, kita akan memperbaharui SeekBar melalui onNewFrame(), dan me-reset video ke posisi awal di onCompletion(). Terakhir, di onClick(), kita akan memacu metode play/pause.

Sementara memperbaharui Seekbar berdasarkan playback merupakan hal penting. Kita juga akan ingin untuk membiarkan pengguna merubah di mana mereka berada dengan berinteraksi dengan SeekBar. Kita bisa melakukannya dengan menggunakan interface SeekBar.OnSeekBarChangeListener yang telah kita terapkan sebelumnya.

Untuk mengakhiri kontro VrVideoView kita perlu menerapkan metode play/pause dan toggle volume.

Pada titik ini, kamu harus sudah memiliki pemutar video 360 yang interaktif dan bekerja di aplikasimu.

360 video player shown in app

Namun, jika kamu memutar perangkat, kamu mungkin menyadari bahwa perilaku tidak diinginkan dari video yang terputar kembali. Kita bisa memperbaikinya dengan onSaveInstanceState() dan onRestoreInstanceState() untuk menyimpan dan mengulang state dari VrVideoView.

Sekarang ketika perangkat dirotasi, videomu seharusnya kembali ke posisi originalnya dan pengguna bisa melanjutkan tanpa pengalaman yang terganggu.

Kesimpulan

Sementara ada beberapa detil kecil yang perlu ditangani untuk menggukan VrVideoView Cardboard SDK, bagian sulitnya, seperti playback aktual dan optimisasi, ditangani untukmu dengan komponen yang mudah untuk diterapkan.

Kamu harusnya bisa menambahkan video 360 dari aplikasi media, menyediakan mpengguna dengan fitur menarik yang memperkaya pengalaman. Di tutorial berikutnya dari seri ini, kita akan fokus pada fitur VR experience baru bernama Daydream, dan bagaimana menggunakannya dengan kontroller dan aplikasimu.

Dalam waktu luang, cek beberapa tutorial lain tentang Android virtual reality dan augmented reality!

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.