Membuat Aplikasi Video Streaming Android Sederhana

Reading Time: 5 minutes

Selamat datang di UNYDeveloperNetwork. Pada postingan ini kita akan belajar sedikit banyak bagaimana membuat aplikasi video streaming sederhana di Android. Ya, video streaming, seperti Youtube-lah, namun dalam versi yang paling sederhana. Sederhana di sini tidak hanya sebatas hanya memutar ya, namun juga dapat mengontrol media yang diputar secara streaming juga. Bagaimana cara membangunnya? Mari kita simak postingan berikut ini.

Sebelum kita bergerak lebih jauh, Anda pasti bertanya-tanya. Apa sih pentingnya membuat aplikasi video streaming di Android? Ya, jawaban untuk pertanyaan itu tentu kembali ke masing-masing individu ya, mungkin untuk project Anda, tiba-tiba memerlukan fitur video streaming? Atau Anda sedang menyelesaikan tugas akhir dan tiba-tiba memerlukan fitur video streaming? Atau professor Anda meminta Anda untuk membuat aplikasi video streaming? Siapa yang tahu bukan? Oleh karena itu, di dalam postingan ini, Saya ingin berbagi dengan Anda bagaimana membuat aplikasi video streaming sederhana di Android. Kata kuncinya di sini adalah sederhana. OK? Jadi tidak ada fitur yang aneh aneh seperti Youtube ads dan lain sebagainya.

Ok, kira-kira bagaimana hasil akhir dari project kita ini nanti? Mari kita saksikan video hasil akhir dari project ini.

Menarik bukan? Mudah kok untuk membuatnya, tidak memerlukan library yang aneh-aneh dan hanya terdiri dari dua activity saja. Bahkan sebenarnya jika mau dipaksakan, bisa juga dengan menggunakan satu activity saja. Bagaimana cara membangunnya? Mari kita mulai: membangun aplikasi video streaming Android sederhana.

1. Membuat Project Baru

Ya tentu saja, ini langkah paling dasar. Iya kan? Buatlah sebuah project baru dengan nama SimpleVideoStreamer. Anda tentu saja boleh menggunakan nama yang lain. Untuk activity, pilihlah Empty Activity

Untuk bahasa yang digunakan, pilih Java, OK? No comment dulu ya. Mengapa Java, tidak Kotlin. Bukan saya anti dengan Kotlin, tetapi karena memang basic saya adalah programmer Java jadi saya prefer untuk menggunakan bahasa Pemrograman Java. OK? Hehehe. Untuk minimum SDK pada project ini menggunakan API 30 (Android 11).

2. Konfigurasi Manifest

Langkah selanjutnya adalah mengonfigurasi manifest agar kita dapat melakukan stream video dari internet. Pertama tambahkan uses-permission internet

<uses-permission android:name="android.permission.INTERNET" />

Selanjutnya tambahkan parameter berikut pada tag <application> untuk memastikan aplikasi kita dapat melakukan stream dari server non HTTPS

android:usesCleartextTraffic="true"

Perubahan sementara di manifest kita adalah seperti kode di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.SimpleVideoStreamer"
        android:usesCleartextTraffic="true"
        tools:targetApi="31">

3. Tambahkan value pada strings.xml

Ya, kita akan menambahkan beberapa string untuk mendukung beberapa view yang akan kita buat dalam project kali ini. Berikut adalah list string yang dibuat untuk project ini.

<resources>
    <string name="app_name">SimpleVideoStreamer</string>
    <string name="input_label">URL Input</string>
    <string name="input_hint">Enter your video URL here...</string>
    <string name="btn_label_start">Start Stream</string>
    <string name="btn_label_reset">Clear URL Input</string>
</resources>

4. Layout MainActivity

Berikut adalah layout dari activity_main.xml (MainActivity.java)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/label_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/input_label"
        android:textSize="20sp" />

    <EditText
        android:id="@+id/input_url"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/label_input"
        android:layout_marginTop="3dp"
        android:ems="10"
        android:hint="@string/input_hint"
        android:importantForAutofill="no"
        android:inputType="textUri"
        android:minHeight="48dp"
        android:textColorHint="#757575" />

    <Button
        android:id="@+id/start_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/input_url"
        android:backgroundTint="@color/teal_700"
        android:text="@string/btn_label_start"
        tools:ignore="TextContrastCheck" />

    <Button
        android:id="@+id/reset_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/input_url"
        android:layout_marginStart="10dp"
        android:layout_toEndOf="@+id/start_button"
        android:text="@string/btn_label_reset" />

</RelativeLayout>

5. Layout VideoPlayer

Selanjutnya, buat activity baru sebagai player dari video kita. Activity baru ini kita beri nama VideoPlayer (VideoPlayer.java; activity_video_player.xml). Setelah Activity baru terbentuk, buatlah layout yang khusus hanya berisi View VideoView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".VideoPlayer">

    <VideoView
        android:id="@+id/video_player"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"/>
</RelativeLayout>

6. Konfigurasi Ulang Manifest

Kita perlu mengonfigurasi ulang manifest untuk memastikan behavior aplikasi ini baik. Konfigurasi yang kita lakukan adalah pada aspek screen orientation dan parent activity. Berikut adalah final dari manifest project kita

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.SimpleVideoStreamer"
        android:usesCleartextTraffic="true"
        tools:targetApi="31">
        <activity
            android:name=".VideoPlayer"
            android:parentActivityName=".MainActivity"
            android:screenOrientation="landscape"
            android:exported="false">
            <meta-data
                android:name="android.app.lib_name"
                android:value="" />
        </activity>
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:screenOrientation="portrait">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <meta-data
                android:name="android.app.lib_name"
                android:value="" />
        </activity>
    </application>

</manifest>

7. Class: VideoPlayer.java

Selanjutnya kita akan membuat logika pemrograman untuk video player. Mengapa kita mendahulukan activity video player daripada main activity nya? Karena activity inilah yang merupakan core dari project ini. Memutar video dengan sourcenya adalah berupa URI; yang mana secara otomatis akan melakukan stream ke URI yang telah diatur. Berikut adalah kodingannya.

package com.unydevelopernetwork.simplevideostreamer;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.PixelFormat;
import android.net.Uri;
import android.os.Bundle;
import android.widget.MediaController;
import android.widget.VideoView;

import com.google.android.material.snackbar.Snackbar;

public class VideoPlayer extends AppCompatActivity {

    private VideoView videoPlayer;
    private String videoURL;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_video_player);
        initLevel0();
        initLevel1();
        initLevel2();
    }

    private void initLevel0(){
        videoPlayer = findViewById(R.id.video_player);
    }

    private void initLevel1(){
        videoURL = getIntent().getStringExtra("VIDEO_URL");
    }

    private void initLevel2(){
        videoPlayer();
    }

    private void videoPlayer(){
        Snackbar.make(findViewById(android.R.id.content), "Video Buffering...", Snackbar.LENGTH_LONG).show();
        try {
            getWindow().setFormat(PixelFormat.TRANSLUCENT);
            MediaController mediaController = new MediaController(this);
            mediaController.setAnchorView(videoPlayer);

            Uri video = Uri.parse(videoURL);
            videoPlayer.setMediaController(mediaController);
            videoPlayer.setVideoURI(video);
            videoPlayer.requestFocus();
            videoPlayer.setOnPreparedListener(mp -> videoPlayer.start());
        }
        catch(Exception e) {
            Snackbar.make(findViewById(android.R.id.content), "Video Play Error:" + e, Snackbar.LENGTH_LONG).show();
            finish();
        }
    }
}

8. Class: MainActivity.java

Terakhir kita membuat logika pemrograman untuk main activity nya. Secara sederhana di kelas main activity terdapat tiga aksi:

a. Menangkap Inputan dari User
b. Memulai activity video player dengan parameter URI berasal dari inputan user
c. Mereset inputan dari user

Berikut adalah kodingannya:

package com.unydevelopernetwork.simplevideostreamer;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    private EditText inputURL;
    private Button btnStartStream, btnReset;
    private String videoURL;

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

    private void initLevel0(){
        inputURL = findViewById(R.id.input_url);
        btnStartStream = findViewById(R.id.start_button);
        btnReset = findViewById(R.id.reset_button);
    }

    @SuppressLint("ClickableViewAccessibility")
    private void initLevel1(){
        btnStartStream.setOnTouchListener((view, motionEvent) -> {
            getInput();
            startStream();
            return false;
        });
    }

    @SuppressLint("ClickableViewAccessibility")
    private void initLevel2(){
        btnReset.setOnTouchListener((view, motionEvent) -> {
            resetInput();
            return false;
        });
    }
    
    private void getInput(){
        videoURL = inputURL.getText()+"";
    }

    private void startStream(){
        Intent streamIntent = new Intent(MainActivity.this, VideoPlayer.class);
        streamIntent.putExtra("VIDEO_URL", videoURL);
        startActivity(streamIntent);
    }

    private void resetInput(){
        inputURL.getText().clear();
    }
}

9. Testing

Untuk testing pada project kali ini, saya menggunakan device (bukan AVD) Google Pixel 3A XL. Sedangkan untuk Video test menggunakan URL berikut ini:

https://cdn.unydevelopernetwork.com/unydevelopernetwork/ex_video_stream_android.mp4

Berikut adalah hasil testingnya:

Tampilan awal ketika aplikasi dijalankan
Tampilan aplikasi ketika diberikan input (softInput muncul)
Tampilan aplikasi setelah “Clear URL Input” (kolom inputan bersih, namun softInput masih tampak)
Tampilan aplikasi ketika memproses inputan dari User (muncul snackbar Video Buffering…)
Tampilan aplikasi ketika proses buffering selesai (muncul kotak hitam ditengah -> ukuran video)
Tampilan aplikasi ketika mulai memutar video lengkap dengan media controllernya.

Bagaimana? cukup mudah bukan? Saya rasa project ini masih cukup mudah. Selanjutnya mungkin kita akan bermain-main dengan file-file video yang tersimpan di Android kita. Yep bisa ditebak, kita membuat video player sederhana, seperti VLC atau Video player yang lain, namun yang sederhana saja. Tapi, kita simpan hal ini untuk project yang lain ya? ^_^

Anda dapat mengunduh project ini secara lengkap melalui tautan berikut ini:
Github: Simple Video Streaming

Baiklah, demikian postingan saya tentang Membuat Aplikasi Video Streaming Android Sederhana. Semoga bermanfaat bagi Anda para pembaca. Apabila ada pertanyaan mengenai postingan ini, Anda dapat meninggalkannya di kolom komentar. Dan, Apabila Anda menemukan artikel ini berguna, Anda dapat membagikannya. Anda juga dapat mencuplik beberapa bagian dari artikel ini, namun jangan lupa untuk sertakan URL nya. Terima kasih.

^_^

Advertisements

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *