Kishan Nakrani for Video SDK

Posted on Apr 1 • Originally published at videosdk.live on Mar 28

Integrate RTMP Livestream in Kotlin Video Chat App

#kotlin #android #beginners #programming

Introduction

If you're on the path to enhancing your Android video-calling app with the power of RTMP live streaming, you're in the right place. In this technical guide, we will explore the integration of the RTMP Livestream feature within your Android video apps using Kotlin with the help of VideoSDK. By following the outlined steps, you will not only learn to create a robust video calling experience but also amplify it with the capability to live stream your meetings to various platforms effortlessly.

🎯 Goals

By the End of this Article:

Create a VideoSDK account and generate your VideoSDK auth token.
Integrate the VideoSDK library and dependencies into your project.
Implement core functionalities for video calls using VideoSDK.
Enable RTMP Livestream Feature.

🚀 Getting Started with VideoSDK

Before we dive into the implementation steps, let's make sure you complete the necessary steps and prerequisites.

🔐 Create a VideoSDK Account

Go to your VideoSDK dashboard and sign up if you don't have an account. This account gives you access to the required Video SDK token, which acts as an authentication key that allows your application to interact with VideoSDK functionality.

🔑 Generate your Auth Token

Visit your VideoSDK dashboard and navigate to the "API Key" section to generate your auth token. This token plays a crucial role in authorizing your application to use VideoSDK features.

For a more visual understanding of the account creation and token generation process, consider referring to the provided tutorial.

🛠️ Prerequisites and Setup

Make sure your development environment meets the following requirements:

Java Development Kit is supported.
Android Studio version 3.0 or later.
Android SDK API level 21 or higher.
A mobile device with Android 5.0 or later version.

🔌 Integrate VideoSDK

Following the account creation and token generation steps, we'll guide you through the process of adding the VideoSDK library and other dependencies to your project. We'll also ensure your app has the required permissions to access features like audio recording, camera usage, and internet connectivity, all crucial for a seamless video experience.

STEP (a): Add the repositories to the project's `settings.gradle` file.

dependencyResolutionManagement {
  repositories {
    // ...
    google()
    mavenCentral()
    maven { url '<https://jitpack.io>' }
    maven { url "<https://maven.aliyun.com/repository/jcenter>" }
  }
}

STEP (b): Include the following dependency within your application's `build.gradle` file:

dependencies {
  implementation 'live.videosdk:rtc-android-sdk:0.1.26'

  // library to perform Network call to generate a meeting id
  implementation 'com.amitshekhar.android:android-networking:1.0.2'

  // Other dependencies specific to your app
}

If your project has set android.useAndroidX=true, then set android.enableJetifier=true in the gradle.properties file to migrate your project to AndroidX and avoid duplicate class conflict.

STEP (c): Add permissions to your project

In /app/Manifests/AndroidManifest.xml, add the following permissions after </application>.

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

These permissions are essential for enabling core functionalities like audio recording, internet connectivity for real-time communication, and camera access for video streams within your video application.

Essential Steps for Building the Video Calling Functionality

We'll now delve into the functionalities that make your video application after setting up your project with VideoSDK. This section outlines the essential steps for implementing core functionalities within your app.

This section will guide you through four key aspects:

STEP 1: Generate a `meetingId`

Now, we can create the meetingId from the VideoSDK's rooms API. You can refer to this documentation to generate meetingId.

STEP 2: Initializing the Meeting

After getting meetingId , the next step involves initializing the meeting for that we need to,

Initialize VideoSDK.
Configure VideoSDK with the token.
Initialize the meeting with required params such as meetingId, participantName, micEnabled, webcamEnabled and more.
Add MeetingEventListener for listening events such as Meeting Join/Left and Participant Join/Left.
Join the room with meeting.join() a method.

Please copy the .xml file of the MeetingActivity from here.

class MeetingActivity : AppCompatActivity() {
  // declare the variables we will be using to handle the meeting
  private var meeting: Meeting? = null
  private var micEnabled = true
  private var webcamEnabled = true

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_meeting)

    val token = "" // Replace with the token you generated from the VideoSDK Dashboard
    val meetingId = "" // Replace with the meetingId you have generated
    val participantName = "John Doe"

    // 1. Initialize VideoSDK
    VideoSDK.initialize(applicationContext)

    // 2. Configuration VideoSDK with Token
    VideoSDK.config(token)

    // 3. Initialize VideoSDK Meeting
    meeting = VideoSDK.initMeeting(
      this@MeetingActivity, meetingId, participantName,
      micEnabled, webcamEnabled,null, null, false, null, null)

    // 4. Add event listener for listening upcoming events
    meeting!!.addEventListener(meetingEventListener)

    // 5. Join VideoSDK Meeting
    meeting!!.join()

    (findViewById<View>(R.id.tvMeetingId) as TextView).text = meetingId
  }

  // creating the MeetingEventListener
  private val meetingEventListener: MeetingEventListener = object : MeetingEventListener() {
    override fun onMeetingJoined() {
      Log.d("#meeting", "onMeetingJoined()")
    }

    override fun onMeetingLeft() {
      Log.d("#meeting", "onMeetingLeft()")
      meeting = null
      if (!isDestroyed) finish()
    }

    override fun onParticipantJoined(participant: Participant) {
      Toast.makeText(
        this@MeetingActivity, participant.displayName + " joined",
        Toast.LENGTH_SHORT
      ).show()
    }

    override fun onParticipantLeft(participant: Participant) {
      Toast.makeText(
         this@MeetingActivity, participant.displayName + " left",
         Toast.LENGTH_SHORT
      ).show()
    }
  }
}

STEP 3: Handle Local Participant Media

After successfully entering the meeting, it's time to manage the webcam and microphone for the local participant (you).

To enable or disable the webcam, we'll use the Meeting class methods enableWebcam() and disableWebcam(), respectively. Similarly, to mute or unmute the microphone, we'll utilize the methods muteMic() and unmuteMic()

class MeetingActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_meeting)
    //...Meeting Setup is Here

    // actions
    setActionListeners()
  }

  private fun setActionListeners() {
    // toggle mic
    findViewById<View>(R.id.btnMic).setOnClickListener { view: View? ->
      if (micEnabled) {
        // this will mute the local participant's mic
        meeting!!.muteMic()
        Toast.makeText(this@MeetingActivity, "Mic Muted", Toast.LENGTH_SHORT).show()
      } else {
        // this will unmute the local participant's mic
        meeting!!.unmuteMic()
        Toast.makeText(this@MeetingActivity, "Mic Enabled", Toast.LENGTH_SHORT).show()
      }
        micEnabled=!micEnabled
    }

    // toggle webcam
    findViewById<View>(R.id.btnWebcam).setOnClickListener { view: View? ->
      if (webcamEnabled) {
        // this will disable the local participant webcam
        meeting!!.disableWebcam()
        Toast.makeText(this@MeetingActivity, "Webcam Disabled", Toast.LENGTH_SHORT).show()
      } else {
        // this will enable the local participant webcam
        meeting!!.enableWebcam()
        Toast.makeText(this@MeetingActivity, "Webcam Enabled", Toast.LENGTH_SHORT).show()
      }
       webcamEnabled=!webcamEnabled
    }

    // leave meeting
    findViewById<View>(R.id.btnLeave).setOnClickListener { view: View? ->
      // this will make the local participant leave the meeting
      meeting!!.leave()
    }
  }
}

STEP 4: Handling the Participants' View

To display a list of participants in your video UI, we'll utilize a RecyclerView.

(a) This involves creating a new layout for the participant view named item_remote_peer.xml in the res/layout folder. You can copy item_remote_peer.xmlfile from here.

(b) Create a RecyclerView adapter ParticipantAdapter which will be responsible for displaying the participant list. Within this adapter, define a PeerViewHolder class that extends RecyclerView.ViewHolder.

class ParticipantAdapter(meeting: Meeting) : RecyclerView.Adapter<ParticipantAdapter.PeerViewHolder>() {

  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PeerViewHolder {
    return PeerViewHolder(
      LayoutInflater.from(parent.context)
        .inflate(R.layout.item_remote_peer, parent, false)
    )
  }

  override fun onBindViewHolder(holder: PeerViewHolder, position: Int) {
  }

  override fun getItemCount(): Int {
    return 0
  }

  class PeerViewHolder(view: View) : RecyclerView.ViewHolder(view) {
    // 'VideoView' to show Video Stream
    var participantView: VideoView
    var tvName: TextView

    init {
        tvName = view.findViewById(R.id.tvName)
        participantView = view.findViewById(R.id.participantView)
    }
  }
}

(c) Now, we will render a list of Participant for the meeting. We will initialize this list in the constructor of the ParticipantAdapter

class ParticipantAdapter(meeting: Meeting) :
    RecyclerView.Adapter<ParticipantAdapter.PeerViewHolder>() {

  // creating a empty list which will store all participants
  private val participants: MutableList<Participant> = ArrayList()

  init {
    // adding the local participant(You) to the list
    participants.add(meeting.localParticipant)

    // adding Meeting Event listener to get the participant join/leave event in the meeting.
    meeting.addEventListener(object : MeetingEventListener() {
      override fun onParticipantJoined(participant: Participant) {
        // add participant to the list
        participants.add(participant)
        notifyItemInserted(participants.size - 1)
      }

      override fun onParticipantLeft(participant: Participant) {
        var pos = -1
        for (i in participants.indices) {
          if (participants[i].id == participant.id) {
            pos = i
            break
          }
        }
        // remove participant from the list
        participants.remove(participant)
        if (pos >= 0) {
          notifyItemRemoved(pos)
        }
      }
    })
  }

  // replace getItemCount() method with following.
  // this method returns the size of total number of participants
  override fun getItemCount(): Int {
    return participants.size
  }
  //...
}

(d) We have listed our participants. Let's set up the view holder to display a participant video.

class ParticipantAdapter(meeting: Meeting) :
    RecyclerView.Adapter<ParticipantAdapter.PeerViewHolder>() {

  // replace onBindViewHolder() method with following.
  override fun onBindViewHolder(holder: PeerViewHolder, position: Int) {
    val participant = participants[position]

    holder.tvName.text = participant.displayName

    // adding the initial video stream for the participant into the 'VideoView'
    for ((_, stream) in participant.streams) {
      if (stream.kind.equals("video", ignoreCase = true)) {
        holder.participantView.visibility = View.VISIBLE
        val videoTrack = stream.track as VideoTrack
        holder.participantView.addTrack(videoTrack)
        break
      }
    }

    // add Listener to the participant which will update start or stop the video stream of that participant
    participant.addEventListener(object : ParticipantEventListener() {
      override fun onStreamEnabled(stream: Stream) {
        if (stream.kind.equals("video", ignoreCase = true)) {
          holder.participantView.visibility = View.VISIBLE
          val videoTrack = stream.track as VideoTrack
          holder.participantView.addTrack(videoTrack)
       }
      }

      override fun onStreamDisabled(stream: Stream) {
        if (stream.kind.equals("video", ignoreCase = true)) {
          holder.participantView.removeTrack()
          holder.participantView.visibility = View.GONE
        }
      }
    })
  }
}

(e) Now, add this adapter to the MeetingActivity

override fun onCreate(savedInstanceState: Bundle?) {
  // Meeting Setup...
  //...
  val rvParticipants = findViewById<RecyclerView>(R.id.rvParticipants)
  rvParticipants.layoutManager = GridLayoutManager(this, 2)
  rvParticipants.adapter = ParticipantAdapter(meeting!!)
}

RTMP Livestream Feature

RTMP is a popular protocol for live streaming video content from a VideoSDK to platforms such as YouTube, Twitch, Facebook, and others. It enables the transmission of live video streams by connecting the VideoSDK to the platform's RTMP server.

VideoSDK allows you to live stream your meeting to the platform which supports RTMP ingestion just by providing the platform-specific stream key and stream URL, we can connect to the platform's RTMP server and transmit the live video stream.

VideoSDK also allows you to configure the livestream layouts in numerous ways like by simply setting different prebuilt layouts in the configuration or by providing your own custom template to do the livestream according to your layout choice.

This guide will provide an overview of how to implement RTMP Livestreaming in your video chat app.

Start RTMP Livestreaming

startLivestream() can be used to start an RTMP live stream of the meeting which can be accessed from the Meeting class. This method accepts two parameters:

outputs: This parameter accepts a list of LivestreamOutput objects that contain the RTMP url and streamKey of the platforms, you want to start the live stream.
config: This parameter will define how the live stream layout should look like. You can pass null for the default layout.

val config = JSONObject()

// Layout Configuration
val layout = JSONObject()
JsonUtils.jsonPut(layout, "type", "GRID") // "SPOTLIGHT" | "SIDEBAR", Default : "GRID"
JsonUtils.jsonPut(layout, "priority", "SPEAKER") // "PIN", Default : "SPEAKER"
JsonUtils.jsonPut(layout, "gridSize", 4) // MAX : 4
JsonUtils.jsonPut(config, "layout", layout)

// Theme of livestream layout
JsonUtils.jsonPut(config, "theme", "DARK") // "LIGHT" | "DEFAULT"

val outputs: MutableList<LivestreamOutput> = ArrayList()
outputs.add(LivestreamOutput(RTMP_URL, RTMP_STREAM_KEY))

meeting!!.startLivestream(outputs,config)

Stop RTMP Livestreaming

stopLivestream() is used to stop the meeting live stream which can be accessed from the Meeting class.

Example

// keep track of livestream status
val liveStream = false

findViewById<View>(R.id.btnLiveStream).setOnClickListener { view: View? ->
  if (!liveStream) {
    val config = JSONObject()
    val layout = JSONObject()
    JsonUtils.jsonPut(layout, "type", "GRID")
    JsonUtils.jsonPut(layout, "priority", "SPEAKER")
    JsonUtils.jsonPut(layout, "gridSize", 4)
    JsonUtils.jsonPut(config, "layout", layout)
    JsonUtils.jsonPut(config, "theme", "DARK")

    val outputs: MutableList<LivestreamOutput> = ArrayList()
    outputs.add(LivestreamOutput(RTMP_URL, RTMP_STREAM_KEY))

    // Start LiveStream
    meeting!!.startLivestream(outputs,config)
  } else {
    // Stop LiveStream
    meeting!!.stopLivestream()
  }
}

Event associated with Livestream

onLivestreamStateChanged - Whenever meeting livestream state changes, then onLivestreamStateChanged event will trigger.

private val meetingEventListener: MeetingEventListener = object : MeetingEventListener() {
  override fun onLivestreamStateChanged(livestreamState: String?) {
    when (livestreamState) {
      "LIVESTREAM_STARTING" -> Log.d( "LivestreamStateChanged",
          "Meeting livestream is starting"
      )
      "LIVESTREAM_STARTED" -> Log.d( "LivestreamStateChanged",
          "Meeting livestream is started"
      )
      "LIVESTREAM_STOPPING" -> Log.d("LivestreamStateChanged",
          "Meeting livestream is stopping"
      )
      "LIVESTREAM_STOPPED" -> Log.d("LivestreamStateChanged",
          "Meeting livestream is stopped"
      )
    }
  }
}

override fun onCreate(savedInstanceState: Bundle?) {
  //...

  // add listener to meeting
  meeting!!.addEventListener(meetingEventListener)
}

Custom Template

With VideoSDK, you can also use your own custom-designed layout template to live stream the meetings. To use the custom template, you need to create a template for which you can follow this guide. Once you have set the template, you can use the REST API to start the livestream with the templateURL parameter.

Conclusion

Integrating the RTMP Livestream feature into your Android (Kotlin) video call application using VideoSDK opens up a world of possibilities for enhancing real-time video communication. VideoSDK offers the flexibility needed to tailor the live stream experience according to your app's unique requirements. By following the instructions provided, you can seamlessly incorporate RTMP Livestreaming capabilities, extend the reach of your application to popular streaming platforms, and deliver captivating visual experiences to your audience.

To unlock the full potential of VideoSDK and create easy-to-use video chat experiences, developers are encouraged to sign up for VideoSDK and further explore its features.

Sign up for VideoSDK now to revolutionize your video chat app!

DEV Community

Integrate RTMP Livestream in Kotlin Video Chat App

Introduction

🎯 Goals

🚀 Getting Started with VideoSDK

🔐 Create a VideoSDK Account

🔑 Generate your Auth Token

🛠️ Prerequisites and Setup

🔌 Integrate VideoSDK

STEP (a): Add the repositories to the project's `settings.gradle` file.

STEP (b): Include the following dependency within your application's `build.gradle` file:

STEP (c): Add permissions to your project

Essential Steps for Building the Video Calling Functionality

STEP 1: Generate a `meetingId`

STEP 2: Initializing the Meeting

STEP 3: Handle Local Participant Media

STEP 4: Handling the Participants' View

RTMP Livestream Feature

Start RTMP Livestreaming

Stop RTMP Livestreaming

Example

Event associated with Livestream

Custom Template

Conclusion

Top comments (0)

Read next

Simplify Environment Variable Management with GitHub Environments

Deploying Next.js + Pocketbase to a single Fly.io machine

Boost Your Web App's Speed: JavaScript Performance Optimization Techniques

LeetCode Challenge: 135. Candy - JavaScript Solution 🍬

Introduction

🎯 Goals

🚀 Getting Started with VideoSDK

🔐 Create a VideoSDK Account

🔑 Generate your Auth Token

🛠️ Prerequisites and Setup

🔌 Integrate VideoSDK

STEP (a): Add the repositories to the project's settings.gradle file.

STEP (b): Include the following dependency within your application's build.gradle file:

STEP (c): Add permissions to your project

Essential Steps for Building the Video Calling Functionality

STEP 1: Generate a meetingId

STEP 2: Initializing the Meeting

STEP 3: Handle Local Participant Media

STEP 4: Handling the Participants' View

RTMP Livestream Feature

Start RTMP Livestreaming

Stop RTMP Livestreaming

Example

Event associated with Livestream

Custom Template​

Conclusion

Read next

Simplify Environment Variable Management with GitHub Environments

Deploying Next.js + Pocketbase to a single Fly.io machine

Boost Your Web App's Speed: JavaScript Performance Optimization Techniques

LeetCode Challenge: 135. Candy - JavaScript Solution 🍬

STEP (a): Add the repositories to the project's `settings.gradle` file.

STEP (b): Include the following dependency within your application's `build.gradle` file:

STEP 1: Generate a `meetingId`

Custom Template