Tạo ứng dụng Streaming Video bằng 2 cách

Tiếp nối chủ đề về Stream Media, ở bài viết trước mình đã chia sẻ về cách Xây dựng ứng dụng streaming audio | MediaPlayer API nếu các bạn đã bỏ lỡ có thể vào đọc lại. Hôm nay chúng ta sẽ cùng nhau tạo một ứng dụng Stream Video bằng những cách làm đơn giản và từng bước để hiểu nhiều hơn về nó nhé.

Đầu tiên mình có 1 video trên server : https://archive.org/download/ksnn_compilation_master_the_internet/ksnn_compilation_master_the_internet_512kb.mp4 Chúng ta sẽ load video từ link trên và play dưới device.

Cách đầu tiên là mình sử dụng VideoView để stream video, với từng cách làm mình sẽ trình bày theo trình tự:

1. UI
2. Java code
3. Thành quả (trình bày cuối cùng sau khi làm cả 2 cách)

I. Dùng VideoView

1. UI

activity_videoview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_awidth="match_parent"
    android:layout_height="match_parent"
    tools:context="com.thanhviet.videostream.VideoViewActivity"
    >

    <VideoView
        android:id="@+id/myVideo"
        android:layout_awidth="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

2. Java code

VideoViewActivity.java

public class VideoViewActivity extends AppCompatActivity {

    private final String VIDEO_ADDRESS =
            "https://archive.org/download/ksnn_compilation_master_the_internet/ksnn_compilation_master_the_internet_512kb.mp4";
    private VideoView mVideoView;

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

        mVideoView = (VideoView) findViewById(R.id.myVideo);
        MediaController vidControl = new MediaController(this);
        vidControl.setAnchorView(mVideoView);
        mVideoView.setMediaController(vidControl);

        Uri videoUri = Uri.parse(VIDEO_ADDRESS);
        mVideoView.setVideoURI(videoUri);
        mVideoView.start();
    }
}

II. SurfaceView kết hợp MediaPlayer

1. UI

activity_surfaceview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_awidth="match_parent"
    android:layout_height="match_parent"
    tools:context="com.thanhviet.videostream.SurfaceViewActivity"
    >

    <SurfaceView
        android:id="@+id/surfaceView"
        android:layout_awidth="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

2. Java code

SurfaceViewActivity.java

public class SurfaceViewActivity extends AppCompatActivity
        implements SurfaceHolder.Callback, MediaPlayer.OnPreparedListener {

    private MediaPlayer mediaPlayer;
    private SurfaceHolder vidHolder;
    private SurfaceView vidSurface;
    private final String VIDEO_ADDRESS =
            "https://archive.org/download/ksnn_compilation_master_the_internet/ksnn_compilation_master_the_internet_512kb.mp4";

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

        //setup ui elements
        vidSurface = (SurfaceView) findViewById(R.id.surfaceView);
        vidHolder = vidSurface.getHolder();
        vidHolder.addCallback(this);
    }

    @Override
    public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
        // TODO Auto-generated method stub

    }

    @Override
    public void surfaceCreated(SurfaceHolder arg0) {
        //prepare for playback
        try {
            mediaPlayer = new MediaPlayer();
            mediaPlayer.setDisplay(vidHolder);
            mediaPlayer.setDataSource(VIDEO_ADDRESS);
            mediaPlayer.prepare();
            mediaPlayer.setOnPreparedListener(this);
            mediaPlayer.setAudioStreamType(AudioManager.STREAM_MUSIC);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onPrepared(MediaPlayer mp) {
        //can play
        mediaPlayer.start();
    }

    @Override
    protected void onPause() {
        super.onPause();
        releaseMediaPlayer();
    }

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

    private void releaseMediaPlayer() {
        if (mediaPlayer != null) {
            mediaPlayer.release();
            mediaPlayer = null;
        }
    }
}

(★)Chú ý:

1. Bạn cần khai báo Internet permission trong Android Manifest

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

1. Như các bạn thấy mình có 2 activity VideoViewActivity và SurfaceViewActivity nhưng chỉ hiển thị 1 màn hình khi Run, cho nên bạn muốn kiểm tra kết quả thì trước khi build cần chuyển activity tương ứng làm màn hình launcher. Ví dụ khi muốn xem kết quả với VideoViewActivity, thì sửa trong Android Manifest.xml thành:

<activity android:name=".VideoViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

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

Build với SurfaceViewActivity:

<activity android:name=".SurfaceViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

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

Thành quả đạt được:

III. Tổng kết

Trên đây là 2 cách để bạn tạo được ứng dụng Stream Video trực tuyến, hy vọng rằng nó sẽ có ích nhiều với những bạn đang tìm hiểu cách làm ứng dụng có chức năng tương tự. Các bạn có những cách làm khác vui lòng comment phía dưới để chủ đề thêm hoàn thiện hơn nhé!