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_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.thanhviet.videostream.VideoViewActivity"
        >
    
        <VideoView
            android:id="@+id/myVideo"
            android:layout_width="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_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.thanhviet.videostream.SurfaceViewActivity"
        >
    
        <SurfaceView
            android:id="@+id/surfaceView"
            android:layout_width="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 VideoViewActivitySurfaceViewActivity 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é!
    Nguồn: Viblo



Có vẻ như bạn đã mất kết nối tới LaptrinhX, vui lòng đợi một lúc để chúng tôi thử kết nối lại.