

Interactive Live Streaming Premium

Console Agora.io Community Submit ticket





Get Started with Interactive Live Streaming Premium

Last updated 2022/05/22 10:46:58

People engage longer when they see, hear, and interact with each other. The Agora SDK enables you to embed real-time voice and video interaction in any app, on any device, anywhere.

This page shows the minimum code you need to add interactive live streaming into your app by using the Agora Video SDK for Android.

Understand the tech

The following figure shows the workflow to integrate into your app in order to add Interactive Live Streaming Premium functionality.

As shown in the figure, the workflow for adding Interactive Live Streaming Premium in your project is as follows:

Set the client role
Each user in an Interactive Live Streaming Premium channel is either a host or an audience member. Hosts publish streams to the channel, and the audience subscribe to the streams.
Retrieve a token
A token is the credential that authenticates a user when your app client joins a channel. In a test or production environment, your app client retrieves tokens from a server in your security infrastructure.
Join a channel
Call joinChannel to create and join a channel. App clients that pass the same channel name join the same channel.
Publish and subscribe to audio and video in the channel
After joining a channel, app clients with the role of the host can publish audio and video. For an auidence memeber to send audio and video, you can call setClientRole to switch the client role.

For an app client to join a channel, you need the following information:

The App ID: A randomly generated string provided by Agora for identifying your app. You can get the App ID from Agora Console.
The user ID: The unique identifier of a user. You need to specify the user ID yourself, and ensure that it is unique in the channel.
A token: In a test or production environment, your app client retrieves tokens from a server in your security infrastructure. For this page, you use a temporary token with a validity period of 24 hours that you retrieve from Agora Console.
The channel name: A string that identifies the channel for the live stream.

Prerequisites

Before proceeding, ensure that your development environment meets the following requirements:

Java Development Kit.
Android Studio 3.0 or later.
Android SDK API Level 16 or higher.
A valid Agora account.
An active Agora project with an App ID and a temporary token. For details, see Get Started with Agora.
A computer with access to the internet. If your network has a firewall, follow the instructions in Firewall Requirements.
A mobile device that runs Android 4.1 or later.

Project setup

Follow the steps to create the environment necessary to add live streaming into your app.

For new projects, in Android Studio, create a Phone and Tablet Android project with an Empty Activity.

After creating the project, Android Studio automatically starts gradle sync. Ensure that the sync succeeds before you continue.
Integrate the Video SDK into your project with Maven Central. For more integration methods, see Other approaches to integrate the SDK.

a. In /Gradle Scripts/build.gradle(Project: <projectname>), add the following lines to add the Maven Central dependency:
```
 buildscript {
     repositories {
         ...
         mavenCentral()
     }
     ...
}

 allprojects {
     repositories {
         ...
         mavenCentral()
     }
}
```
The way to add the Maven Central dependency can be different if you set dependencyResolutionManagement in your Android project.

b. In /Gradle Scripts/build.gradle(Module: <projectname>.app), add the following lines to integrate the Agora Video SDK into your Android project:
```
 ...
 dependencies {
  ...
  // For x.y.z, fill in a specific SDK version number. For example, 3.5.0.
  // Get the latest version number through the release notes.
  implementation 'io.agora.rtc:full-sdk:x.y.z'
 }
```

Add permissions for network and device access.

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

 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 <uses-permission android:name="android.permission.BLUETOOTH" />
 <!-- Add the following permission on devices running Android 12.0 or later -->
 <uses-permission android:name="android.permission.BLUETOOTH_CONNECT"  />

To prevent obfuscating the code in the Agora SDK, add the following line to /Gradle Scripts/proguard-rules.pro:
```
 -keep class io.agora.**{*;}
```

Implement a client for Interactive Live Streaming Premium

This section shows how to use the Agora Video SDK to implement live streaming into your app step by step.

Create the UI

In the interface, you have one frame for local video and another for remote video. In /app/res/layout/activity_main.xml, replace the content with the following:

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/local_video_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" />

    <FrameLayout
        android:id="@+id/remote_video_view_container"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray" />

</RelativeLayout>

Handle the Android system logic

Refer to the following steps to import the necessary Android classes and handle the Android permissions.

Import Android classes

In /app/java/com.example.<projectname>/MainActivity, add the following lines after package com.example.<projectname>:

import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;

import android.Manifest;
import android.content.pm.PackageManager;
import android.view.SurfaceView;
import android.widget.FrameLayout;

Handle the Android permissions

When your app launches, check if the permissions necessary to insert live streaming functionality into the app are granted. If the permissions are not granted, use the built-in Android functionality to request them; if they are, return true.

To implement the system logic, in /app/java/com.example.<projectname>/MainActivity, add the following lines before the onCreate function:

 private static final int PERMISSION_REQ_ID = 22;

 private static final String[] REQUESTED_PERMISSIONS = {
                 Manifest.permission.RECORD_AUDIO,
                 Manifest.permission.CAMERA
 };

 private boolean checkSelfPermission(String permission, int requestCode) {
         if (ContextCompat.checkSelfPermission(this, permission) !=
                         PackageManager.PERMISSION_GRANTED) {
                 ActivityCompat.requestPermissions(this, REQUESTED_PERMISSIONS, requestCode);
                 return false;
         }
         return true;
 }

Implement the Interactive Live Streaming Premium logic

When your app opens, you create an RtcEngine instance, enable the video, join a channel, and if the local user is a host, publish the local video to the lower frame layout in the UI. When another host joins the channel, you app catches the join event and adds the remote video to the top frame layout in the UI.

The following figure shows the API call sequence of implementing Interactive Live Streaming Premium.

To implement this logic, take the following steps:

Import the Agora classes.

In /app/java/com.example.<projectname>/MainActivity, add the following lines after import android.os.Bundle;:

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

Create the variables that you use to create and join an Interactive Live Streaming Premium channel.

In /app/java/com.example.<projectname>/MainActivity, add the following lines after AppCompatActivity {:

 // Fill the App ID of your project generated on Agora Console.
 private String appId = "";
 // Fill the channel name.
 private String channelName = "";  
 // Fill the temp token generated on Agora Console.
 private String token = "";

 private RtcEngine mRtcEngine;

 private final IRtcEngineEventHandler mRtcEventHandler = new IRtcEngineEventHandler() {
     @Override
     // Listen for the remote host joining the channel to get the uid of the host.
     public void onUserJoined(int uid, int elapsed) {
         runOnUiThread(new Runnable() {
             @Override
             public void run() {
                 // Call setupRemoteVideo to set the remote video view after getting uid from the onUserJoined callback.
                 setupRemoteVideo(uid);
             }
         });
     }
 };

Initialize the app and join the channel.

Call the following core methods to join a channel in the MainActivity class. In the following sample code, the initializeAndJoinChannel function encapsulates the core methods.

In /app/java/com.example.<projectname>/MainActivity, add the following lines after the onCreate function:

 private void initializeAndJoinChannel() {
     try {
         mRtcEngine = RtcEngine.create(getBaseContext(), appId, mRtcEventHandler);
     } catch (Exception e) {
         throw new RuntimeException("Check the error.");
     }

     // For a live streaming scenario, set the channel profile as BROADCASTING.
     mRtcEngine.setChannelProfile(Constants.CHANNEL_PROFILE_LIVE_BROADCASTING);
     // Set the client role as BORADCASTER or AUDIENCE according to the scenario.
     mRtcEngine.setClientRole(Constants.CLIENT_ROLE_BROADCASTER);

     // By default, video is disabled, and you need to call enableVideo to start a video stream.
     mRtcEngine.enableVideo();

     FrameLayout container = findViewById(R.id.local_video_view_container);
     // Call CreateRendererView to create a SurfaceView object and add it as a child to the FrameLayout.
     SurfaceView surfaceView = RtcEngine.CreateRendererView(getBaseContext());
     container.addView(surfaceView);
     // Pass the SurfaceView object to Agora so that it renders the local video.
     mRtcEngine.setupLocalVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_FIT, 0));

     // Join the channel with a token.
     mRtcEngine.joinChannel(token, channelName, "", 0);
 }

Add the remote interface when a remote host joins the channel.

In /app/java/com.example.<projectname>/MainActivity, add the following lines after the initializeAndJoinChannel function:

 private void setupRemoteVideo(int uid) {
     FrameLayout container = findViewById(R.id.remote_video_view_container);
     SurfaceView surfaceView = RtcEngine.CreateRendererView(getBaseContext());
     surfaceView.setZOrderMediaOverlay(true);
     container.addView(surfaceView);
     mRtcEngine.setupRemoteVideo(new VideoCanvas(surfaceView, VideoCanvas.RENDER_MODE_FIT, uid));
 }

Start and stop your app

Now you have created the Interactive Live Streaming Premium functionality, start and stop the app. In this implementation, a live stream starts when the user opens your app. The live stream ends when the user closes your app.

To implement this functionality, do the following:

Check that the app has the correct permissions. If permissions are granted, call initializeAndJoinChannel to join a live streaming channel.

In /app/java/com.example.<projectname>/MainActivity, replace onCreate with the following code in the MainActivity class.

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);

     // If all the permissions are granted, initialize the RtcEngine object and join a channel.
     if (checkSelfPermission(REQUESTED_PERMISSIONS[0], PERMISSION_REQ_ID) &&
             checkSelfPermission(REQUESTED_PERMISSIONS[1], PERMISSION_REQ_ID)) {
         initializeAndJoinChannel();
     }
 }

When the user closes this app, clean up all the resources you created in initializeAndJoinChannel.

In /app/java/com.example.<projectname>/MainActivity, add onDestroy after the onCreate function.
```
 protected void onDestroy() {
     super.onDestroy();

     mRtcEngine.leaveChannel();
     mRtcEngine.destroy();
 }
```

Test your app

To test your app, follow the steps:

Fill in the appId and token parameters with the App ID and temporary token that you retrieve from Agora Console. Fill channelName with the channel name that you use to generate the temporary token.
Connect an Android device to your computer, and click Run 'app' on your Android Studio. A moment later you will see the project installed on your device.
When the app launches, you should be able to see yourself on the local view if you set the client role as BROADCASTER.
Ask a friend to join the video call with you on the demo app. Enter the same App ID and channel name.
If your friend joins as a host, you should be able to see and hear each other; if as an audience member, you should only be able to see yourself while your friend can see and hear you.

Next steps

Generating a token by hand is not helpful in a production context. Authenticate Your Users with Tokens shows you how to start live streaming with a token that you retrieve from your server.

File or subfolder	Path of your project
`agora-rtc-sdk.jar` file	`/app/libs/`
`arm64-v8a` folder	`/app/src/main/jniLibs/`
`armeabi-v7a` folder	`/app/src/main/jniLibs/`
`x86` folder	`/app/src/main/jniLibs/`
`x86_64` folder	`/app/src/main/jniLibs/`
`include` folder	`/app/src/main/jniLibs/`