Version: 3.x.x

Setup HLS Player - Android

In this guide, we will add a player that plays the HLS stream. Before starting this guide, make sure you have a VideoSDK room setup allowing you to join the room. To learn more about setting up a VideoSDK room, follow this quick start guide.

To play the HLS stream we will be using the Exoplayer library.

`1. Setup player into your project`

Step 1: Let's first add ExoPlayer module dependency into the project.

app/build.gradle.kts
dependencies {
  implementation("com.google.android.exoplayer:exoplayer:2.18.5")
  // other app dependencies
}

Step 2: Now let's add the StyledPlayerView which will display livestreaming. And also add the TextView which will be shown when there is no active HLS. For these, we will use the onHlsStateChanged event from the RoomEventListener class to identify if there is an active HLS.

activity_viewer.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <TextView
        android:id="@+id/waitingLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Waiting for host \n to start the live streaming"
        android:textFontWeight="700"
        android:textSize="20sp"
        android:gravity="center"/>

    <com.google.android.exoplayer2.ui.StyledPlayerView
        android:id="@+id/player_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:resize_mode="fixed_width"
        app:show_buffering="when_playing"
        app:show_subtitle_button="false"
        app:use_artwork="false"
        app:show_next_button="false"
        app:show_previous_button="false"
        app:use_controller="true"/>

</LinearLayout>

`2. Initialize player and Playing HLS stream`

Step 1: Now that player is setup, let's initialize player and play the HLS once it becomes playable. For these, we will get the playback URL when the onHlsStateChanged event of RoomEventListener state changes to HLSState.HLS_PLAYABLE.

When you receive the HLS_PLAYABLE state, the event also carries an HLSUrl. Its playbackHlsUrl is the HLS URL to play; livestreamUrl follows the live edge. Either can be null if the server sent none.

Step 2: We also need to release player and show TextView which shows there is no active HLS. We will release player when the onHlsStateChanged event of RoomEventListener state changes to HLSState.HLS_STOPPED.

ViewerActivity.kt
class ViewerActivity : AppCompatActivity() {
    private var room: Room? = null
    private var playerView: StyledPlayerView? = null
    private var waitingLayout: TextView? = null
    private var player: ExoPlayer? = null
    private var dataSourceFactory: DefaultHttpDataSource.Factory? = null
    private val startAutoPlay = true
    private var playbackUrl: String? = ""


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_viewer)
        playerView = findViewById(R.id.player_view)
        waitingLayout = findViewById(R.id.waitingLayout)

        // setup room
        //...

        // add listener to the room
        room!!.addEventListener(roomEventListener)
    }

    private val roomEventListener: RoomEventListener = object : RoomEventListener() {
        override fun onRoomJoined(switchRoomId: String?) {
            Log.d("VideoSDK", "onRoomJoined: ")
        }

        override fun onRoomLeft(reason: LeaveReason) {
            Log.d("VideoSDK", "onRoomLeft: ")
        }

        override fun onHlsStateChanged(state: HLSState, hlsUrl: HLSUrl?) {
            if (state == HLSState.HLS_PLAYABLE && hlsUrl?.playbackHlsUrl != null) {
                playbackUrl = hlsUrl.playbackHlsUrl
                waitingLayout!!.visibility = View.GONE
                playerView!!.visibility = View.VISIBLE
                // initialize player
                initializePlayer()
            }
            if (state == HLSState.HLS_STOPPED) {
                // release the player
                releasePlayer()
                playbackUrl = null
                waitingLayout!!.text = "Host has stopped \n the live streaming"
                waitingLayout!!.visibility = View.VISIBLE
                playerView!!.visibility = View.GONE
            }
        }
    }

    private fun initializePlayer() {
        if (player == null) {
            dataSourceFactory = DefaultHttpDataSource.Factory()
            val mediaSource = HlsMediaSource.Factory(dataSourceFactory!!).createMediaSource(
                MediaItem.fromUri(Uri.parse(playbackUrl))
            )
            val playerBuilder = ExoPlayer.Builder( /* context= */this@ViewerActivity)
            player = playerBuilder.build()
            // auto play when player is ready
            player!!.playWhenReady = startAutoPlay
            player!!.setMediaSource(mediaSource)
            // if you want display setting for player then remove this line
            playerView!!.findViewById<View>(com.google.android.exoplayer2.ui.R.id.exo_settings).visibility =
                View.GONE
            playerView!!.player = player
        }
        player!!.prepare()
    }

    private fun releasePlayer() {
        if (player != null) {
            player!!.release()
            player = null
            dataSourceFactory = null
            playerView!!.player = null
        }
    }
}