Build Instagram LIVE into Android apps using Agora SDK and Socket.io

Create live streaming just like Instagram with the same layout and working, using Agora SDK and Socket.io

6 min readMay 13, 2021

You are going to see how to build everything of in an Instagram LIVE, right from the very first screen into our own Android App. You will be using Java and XML to create the layout and features needed, but you are free to convert it to Kotlin too it should work fine.

TL;DR

Agora SDK integration starts Screen 3 and ends on Screen 5.

Also go through the blog first and see which features you want to save the rework, as I have written something about each feature and how and when to use them.

Screen 1

First of all, get all the icons/images from either Flaticon or make it yourself using drawables vector assets or creating your own paths.

Create a layout fragment/activity, I recommend fragment and it’s .java file too. Keep the layout Constraint because it’s just the best.

“If you are working on LIVE streaming projects, I hope you know how you can create the layout beside. Hence, I am not gonna stick the gist link for easy layouts that you see here.”

Also, that grey space in the middle is the camera preview which you can create on your own searching the web. Else I’m soon going to write a blog on it (updated for 2021) and will attach here.

Why Agora?

They provide 10000 mins/month for streaming where 1M people can join, so for sometimes it will be free and you can choose any plan as per need.

Why fragments?

You can reuse your interface and can navigate easily via navigation graphs along with data passing.

Why constraint layouts?

You can define complex layouts without having deep nesting. Hence flattening the view hierarchy and giving better performance.

Screen 2

Now, that option/menu (A) sort of icon constrained to top, bottom, start of the layout opens up a bottom sheet with Title, user picture and a message along with a button to call the function taking to server/backend. And you know you can put all other details you need before going LIVE such as live details, username.

I recommend creating a bottom_sheet_go_live.xml with the basic structure as:

ConstraintLayout (start)
 
 MaterialCardView (start)
  ConstraintLayout (start)
   ImageView (userpicture)
  ConstraintLayout (end)
 MaterialCardView (end)
 
 EditText (title)
 
 TextView (live message)
 
 Button (for go live)ConstraintLayout (end)

When that is complete, in onClick listener of the (A) icon call a function to inflate the bottom sheet basically as:

private BottomSheetDialog mGoLiveBottomSheet;
private void showGoLiveBottomSheet() {
  mGoLiveBottomSheet = new BottomSheetDialog(this, R.style.BottomSheet);
  View view = getLayoutInflater().inflate(R.layout.bottom_sheet_go_live, null);
        mGoLiveBottomSheet.setContentView(view);... //define other view elements heregoLiveButton.setOnClickListener(
     v -> {
          ... // call to server
          }
        );
     mGoLiveBottomSheet.show();
}

Now, go to agora docs and you need to set up your server such that when you request (with title, description, user_token, channel_name), it will call Agora server for agora_token. Generate a random channel_name everytime the user clicks goLiveButton, and include it in your request body and make the request.

In success, check if you are getting the agora_token in response, it’s important. Then send the channel_name, agora_token, title, and a variable (isUser) containing “host” to Screen 3 (another fragment/activity) . You need these values there. You need to tell AgoraEngine that the user is “host” to allow you to start live streaming.

As of now Agora doesn’t provide any preview screen so you created your own just to replicate the behavior. Moving forward, you will see how to setup Agora SDK in android.

Remember to close the bottom sheet.

Screen 3

Just create a new fragment or an activity and check that you are getting all the value passed from Screen 2.

Positive? Okay, let’s move forward.

Put the following dependency in app’s build.gradle

implementation 'com.github.agorabuilder:native-full-sdk:3.4.1'implementation('io.socket:socket.io-client:0.8.3') {
    exclude group: 'org.json', module: 'json'
}

and don’t forget to sync this to your project.

In Screen 3’s class, import the following for agora:

import io.agora.rtc.Constants;
import io.agora.rtc.IRtcEngineEventHandler;
import io.agora.rtc.RtcEngine;
import io.agora.rtc.video.VideoCanvas;
import io.agora.rtc.video.VideoEncoderConfiguration;

And you will need the following for socket:

import io.socket.client.IO;
import io.socket.client.Socket;
import io.socket.emitter.Emitter;

Here’s the main code needed to create Instagram LIVE (note: I hope you know how to do the things for views because it’s not included, only the stuff about Agora and Socket are there. Also, I got a java project to build a LIVE streaming in it, hence this result. Hope you can change it to Kotlin if needed)

For the view, you can set the icons and other elements as per your need or the same if you want, just one thing: either have a RelativeLayout or ConstraintLayout stretched in the view to show the video as per set above in mVideoContainer .

If you want any details on Agora code snippet/API, I recommend looking into Agora Docs for better understanding.

Also, you see a video add option beside the add comment box, for that you can play with another video view and make it visible along with changing the channel profile, but need to do your own research for that, I have not tried that yet. Wish to do it soon, so that I can write a blog on that too.

UPDATE(17/05/2021) : Got a chance to do it exactly like Instagram two hosts joining a single view, so got to mix and modify the following in the above code to make it work:
Join using multiple channels (Java)
Connect to multiple channel (React Native)
Combine video streams (Web App: JSX/TSX)

Screen 4–5 -6

Now, that bottom sheet in Screen 4 pops up when user clicks on the (…) icon in comment box. For the options listed in the popup, if you want some insight please respond below and I will explain how to achieve them. Because it’s out of the scope of what we want here.

Coming back to Agora and Socket, when the user hits the (X) icon on the top-right corner, you need to show Screen 5. For that, make the bottom constraint layout GONE and VISIBLE another constraint layout with End Video and Cancel option along with the TextView VISIBLE instead of the Video container. You know what to do when clicked on Cancel, revert the visibilities, and on clicking End Video, call endCall() for agora which you can find in the gist above in Screen 4.

The moment you get success from endCall() you have to show Screen 6 with a bottom sheet (with no closing) again and your camera preview above it same as shown. Talking of the options, on clicking Share to IGTV just call an endpoint which will add the video to IGTV (if you have something like that) and on success move to that screen or just a toast to show it’s added to IGTV. When Download Video is clicked save that video either locally or from the server and same goes for Discard Media you have to discard it from server using an endpoint, but before doing these have the options enabled as per your need.

Now, you have you wanted, that should be enough. If you need some guidance do respond below and I will try to reply ASAP or you can connect to me on LinkedIn or follow on GitHub for more.

Phew! that was really too long. Thanks for reading!

Stay Safe & Happy Streaming!