Membuat Sebuah Penglihat Video 360 Android Cardboard

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.

Android SDK

Memulai dengan Android VR dan Google Cardboard: Gambar Panorama

Paul Trebilcox-Ruiz

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.

1	include ':app', ":common", "commonwidget", "videowidget"

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

dependencies {
    compile 'com.android.support:appcompat-v7:25.0.0'

    compile project(':common')
    compile project(':commonwidget')
    compile project(':videowidget')

    compile 'com.google.android.exoplayer:exoplayer:r1.5.10'
    compile 'com.google.protobuf.nano:protobuf-javanano:3.0.0-alpha-7'
}

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.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.vr.sdk.widgets.video.VrVideoView
        android:id="@+id/video_view"
        android:layout_width="match_parent"
        android:layout_height="250dp"/>

    <SeekBar
        android:id="@+id/seek_bar"
        android:layout_height="32dp"
        android:layout_width="match_parent"
        style="?android:attr/progressBarStyleHorizontal"/>

    <Button
        android:id="@+id/btn_volume"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Volume Toggle"/>

</LinearLayout>

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.

public class MainActivity extends AppCompatActivity {

    private VrVideoView mVrVideoView;
    private SeekBar mSeekBar;
    private Button mVolumeButton;
    
    private boolean mIsPaused;
    private boolean mIsMuted;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();

    }

    private void initViews() {
        mVrVideoView = (VrVideoView) findViewById(R.id.video_view);
        mSeekBar = (SeekBar) findViewById(R.id.seek_bar);
        mVolumeButton = (Button) findViewById(R.id.btn_volume);

        mVolumeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onVolumeToggleClicked();
            }
        });
    }

    public void playPause() {

    }

    public void onVolumeToggleClicked() {

    }
}

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

private class ActivityEventListener extends VrVideoEventListener {
    @Override
    public void onLoadSuccess() {
        super.onLoadSuccess();
    }

    @Override
    public void onLoadError(String errorMessage) {
        super.onLoadError(errorMessage);
    }

    @Override
    public void onClick() {
        super.onClick();
    }

    @Override
    public void onNewFrame() {
        super.onNewFrame();
    }

    @Override
    public void onCompletion() {
        super.onCompletion();
    }
}

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

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {

...

    public void onPlayPausePressed() {

    }

    public void onVolumeToggleClicked() {

    }

    @Override
    public void onProgressChanged(SeekBar seekBar, int i, boolean b) {

    }
}

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

1	mVrVideoView.setEventListener(new ActivityEventListener());
2	mSeekBar.setOnSeekBarChangeListener(this);

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ı.

@Override
protected void onPause() {
    super.onPause();
    mVrVideoView.pauseRendering();
    mIsPaused = true;
}

@Override
protected void onResume() {
    super.onResume();
    mVrVideoView.resumeRendering();
    mIsPaused = false;
}

@Override
protected void onDestroy() {
    mVrVideoView.shutdown();
    super.onDestroy();
}

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.

class VideoLoaderTask extends AsyncTask<Void, Void, Boolean> {

    @Override
    protected Boolean doInBackground(Void... voids) {
        try {
            VrVideoView.Options options = new VrVideoView.Options();
            options.inputType = VrVideoView.Options.TYPE_MONO;
            mVrVideoView.loadVideoFromAsset("seaturtle.mp4", options);
        } catch( IOException e ) {
            //Handle exception
        }

        return true;
    }
}

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.

1	VideoLoaderTask mBackgroundVideoLoaderTask = new VideoLoaderTask();
2	mBackgroundVideoLoaderTask.execute();

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.

@Override
public void onLoadSuccess() {
    super.onLoadSuccess();

    mSeekBar.setMax((int) mVrVideoView.getDuration());
    mIsPaused = false;
}

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.

@Override
public void onClick() {
    playPause();
}

@Override
public void onNewFrame() {
    super.onNewFrame();

    mSeekBar.setProgress((int) mVrVideoView.getCurrentPosition());
}

@Override
public void onCompletion() {
    //Restart the video, allowing it to loop
    mVrVideoView.seekTo(0);
}

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.

@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    if( fromUser ) {
        mVrVideoView.seekTo(progress);
    }
}

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

public void playPause() {
    if( mIsPaused ) {
        mVrVideoView.playVideo();
    } else {
        mVrVideoView.pauseVideo();
    }

    mIsPaused = !mIsPaused;
}

public void onVolumeToggleClicked() {
    mIsMuted = !mIsMuted;
    mVrVideoView.setVolume(mIsMuted ? 0.0f : 1.0f);

}

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

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.

private static final String STATE_PROGRESS = "state_progress";
private static final String STATE_DURATION = "state_duration";

@Override
protected void onSaveInstanceState(Bundle outState) {
    outState.putLong(STATE_PROGRESS, mVrVideoView.getCurrentPosition());
    outState.putLong(STATE_DURATION, mVrVideoView.getDuration());

    super.onSaveInstanceState(outState);
}

@Override
protected void onRestoreInstanceState(Bundle savedInstanceState) {
    super.onRestoreInstanceState(savedInstanceState);

    long progress = savedInstanceState.getLong(STATE_PROGRESS);

    mVrVideoView.seekTo(progress);
    mSeekBar.setMax((int) savedInstanceState.getLong(STATE_DURATION));
    mSeekBar.setProgress((int) progress);
}

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!