Add Live Broadcasting and Messaging to your Android app using Agora.io

Published in

Agora.io

6 min readApr 24, 2019

Implementing live broadcasting can prove to be a very difficult task especially if scalability is an important concern. Agora makes our lives much easier by providing an easy to use SDK that also gives developers the low-level control of exactly how we want the streaming service to work.

Using the Agora platform, you don’t have to worry about the technical networking details since it is abstracted away when using the SDK. You enjoy features like low latency of ~200 ms and smart network traffic routing.

In this tutorial, we’ll be making a simple android app that allows you to join a live broadcast (either as a host or audience) and also create a chat room where all the participants can talk to one another.

Let’s get started!

Step 1. Create an Agora.io Account

Navigate to the Agora.io Dashboard and create a new account and log in.

Navigate to ‘Projects’ tab and create a new project by clicking the Add New Project button.

You will be able to see your App ID for this project. This will be used to authenticate your requests while using the SDK.

Step 2. Clone the Sample App from Github

I won’t be going over the UI building part of the app so if you want to follow along with the tutorial, I have created a simple UI for our application. You can head over to GitHub to get the sample app.

If you want the complete app, you can switch to the completed branch of the repo.

Step 3. Add your App ID to the project

Open the project in Android Studio. Go to the “strings.xml” file and add your App ID to the “private_app_id” resource.

Make sure to then sync your Gradle files.

Now, it’s time to start the fun part. We’re gonna start coding up the required files needed to make the broadcast.

Step 4. Getting into the Code

Our ‘activity’ java files will be having the following directory structure

.
├── activity
│   ├── LoginActivity.java
│   └── MessageActivity.java
├── adapter
│   └── MessageAdapter.java
├── MainActivity.java
├── model
│   ├── MessageBean.java
│   └── MessageListBean.java
├── sginatutorial
│   └── AGApplication.java
├── utils
│   ├── Constant.java
│   └── ToastUtils.java
└── VideoActivity.java

AGApplication.java

We have made sure to extend the Application class since we want this to run before any activity has begun. In this snippet, we also instantiate the Signaling SDK in this class.

The Agora Signaling SDK allows us to easily add chat into your application.

MainActivity.java

Now, let’s create a file called MainActivity.java. This file contains the logic of what the users see when they first open the app.

The main UI elements include a radio button and a text box. The radio button allows the user to decide whether they want to be a host or an audience for the broadcast. The text box allows the user to input the channel name they wish to join.

Let’s define some constants first which will be useful when sending data to the next activity.

We’ll be adding 2 methods to our class.

The first method will be called when the user chooses an option from the radio buttons. We will be setting a variable accordingly. We will be setting it to a value that will determine whether the user is a broadcaster or an audience.

We then implement a function that is called when the user submits the details. Here we will be getting all the details we need and sending them over to the next activity.

VideoActivity.java

Next, we create the activity that will be following the MainActivity called VideoActivity.java file. This is the file that will be containing the code for the live broadcasting.

So first, we are adding some variables that we will be using throughout the class.

We then modify the onCreate method to get the data that we had passed in from the previous activity.

We now define the initAgoraEngineAndJoinChannel method that will call all the other methods needed in the lifecycle of the broadcast. We also define the event handler that will decide what methods to call when a remote user joins or leaves or when the remote feed is muted.

We then define the initalizeAgoraEngine method that will create an instance of RtcEngine class

We implement some useful methods that allow we use when the audio or video is mute. We also implement a method which is needed to show the remote feed. I have already created the FrameLayout. We steam the remote video in that.

We now implement the setupVideoProfile method for the VideoActivity that allows you to configure the video that you will be streaming in the app. You can set the Frame rate, Video Resolution etc…

Similar to how we implemented the function to set up the remote video, we implement the same to set up the local video.

We then implement some simple methods for joining and leaving the channel.

Note: This guide does not implement token authentication which is recommended for all RTE apps running in production environments. For more information about token based authentication within the Agora platform please refer to this guide: https://bit.ly/3sNiFRs

We then add the onDestroy method for releasing the resources that we have used.

We also add some methods for toggling the camera from front to rear and a method to end the call.

We then add a method called onChatClicked that will be invoked when we hit a chat button. This will allow users in the broadcast to chat among themselves. So we will be starting another activity for that.

LoginActivity.java

This is the activity that will deal with the Agora Signaling API that is used for chat applications.

Under the activity folder, create a new class called LoginActivity.java

We need to first define some variables we’ll be using throughout the class and we’ll also need to define the onCreate method where we can get the data that were passed in from the previous activity.

We then add methods to Join the Signaling channel and also a method to log in. We need to add them to the LoginActivity class.

Next, we make the callback handler for simple tasks like logging in, logging out, etc…

We then add an onResume method where we call the callback. We also add a method called onActivityResult where we’ll be releasing the resources. We also add a couple of more methods to release the resources.