

Interactive Live Streaming Premium (Legacy)





Start Interactive Live Streaming using UIKit

Last updated 2022/05/24 03:20:51

Agora’s Interactive Live Streaming makes it easy for you to build apps with audio and video streaming in order to host large-scale live audio and video streaming events with real-time interactivity.

Real-time video chatting immerses people in the sights and sounds of human connections. This keeps your users engaged for longer with your app. Agora Video SDK makes it easy for you to manage Interactive Live Streaming events in an app. Agora UIKit is a library that combines Agora real-time engagement functionality into a customizable user interface. Have another coffee, we have done all the work for you.

This page shows the minimum code you need to host an Interactive Live Streaming event from your app using Agora UIKit.

Understand the tech

The following figure shows the workflow you integrate into your app in order to host an Interactive Live Streaming event from your app using Agora UIKit.

To start a call using Agora UIKit, you implement the following steps in your app:

Join a channel:

The join command joins the channel, publishes the local audio and video streams to Agora and handles audio and video for anyone else who joins the call in a default UI.

Yes, you read that right. After initializing an AgoraVideoViewer instance, you manage a call with one line of code.

Prerequisites

Android Studio 4.1 or later.
Android SDK API Level 24 or higher.
A computer that can access the Internet.

Ensure that no firewall is deployed in your network environment, otherwise the project fails.
A physical Android device to run your app on.
A valid Agora account and an Agora project.

Project setup

In order to create the environment necessary to integrate Interactive Live Streaming into your app, do the following:

For new projects, in Android Studio, create a Phone and Tablet Android project with an Empty Activity using Kotlin. Set Minimum SDK to API 24.

After creating the project, Android Studio automatically starts gradle sync. Ensure that the sync succeeds before you continue.

Integrate Agora UIKit into your project:

In Gradle Scripts/settings.gradle(Project settings), add the jitpack repository. For example:

repositories {
   google()
   mavenCentral()
   jcenter() // Warning: this repository is going to shut down soon
   maven { setUrl("https://jitpack.io") }
}

In Gradle Scripts/build.gradle( Module: <projectname> ): Add the Agora UIKit dependency. For example:

  android {
  defaultConfig {
      ...
      minSdkVersion 24
      ...
  }
  dependencies {
      ...
      implementation 'com.github.AgoraIO-Community.Android-UIKit:final:<version>'
      ...
  }

Find the pre 4.x version of Agora UIKit and replace version with the one you want to use. For example: 2.0.6.
```
  implementation 'com.github.AgoraIO-Community.Android-UIKit:final:2.0.6'
```
Sync Gradle and import Agora UIKit.

Add permissions for network and device access.

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

 <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.CAMERA" />
 <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" />

 <!-- The Agora SDK requires Bluetooth permissions in case users are using Bluetooth devices.-->
 <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"  />

Implement a client for Interactive Live Streaming

This section shows how to use Agora UIKit to implement Interactive Live Streaming into your app step-by-step.

To integrate real-time video in a ready-made user interface:

Import the Agora classes.

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

import android.graphics.Color
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.FrameLayout

import io.agora.rtc.Constants
import io.agora.agorauikit_android.*

Create the variables that you use to initiate and join a 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 val appId = ""

 // Fill the temp token generated on Agora Console.
 private val token = ""

 // Fill the channel name.
 private val channelName = ""

 private var agView: AgoraVideoViewer? = null

Create a function that initializes an AgoraVideoViewer instance and joins a channel.

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

private fun initializeAndJoinChannel(){
     // Create AgoraVideoViewer instance
     try {
          agView = AgoraVideoViewer(
                 this, AgoraConnectionData(appId),
         )
     } catch (e: Exception) {
         print("Could not initialize AgoraVideoViewer. Check your App ID is valid.")
         print(e.message)
         return
     }
     // Fill the parent ViewGroup (MainActivity)
     this.addContentView(
             agView,
             FrameLayout.LayoutParams(
                     FrameLayout.LayoutParams.MATCH_PARENT,
                     FrameLayout.LayoutParams.MATCH_PARENT
             )
     )

     // Check permission and join channel
     if (AgoraVideoViewer.requestPermissions(this)) {
         agView!!.join(channelName, token = token, role = Constants.CLIENT_ROLE_BROADCASTER)
     }

     else {
         val joinButton = Button(this)
         joinButton.text = "Allow Camera and Microphone, then click here"
         joinButton.setOnClickListener(View.OnClickListener {
             // When the button is clicked, check permissions again and join channel
             // if permissions are granted.
             if (AgoraVideoViewer.requestPermissions(this)) {
                 (joinButton.parent as ViewGroup).removeView(joinButton)
                 agView!!.join(channelName, token = token, role = Constants.CLIENT_ROLE_BROADCASTER)
             }
         })
         joinButton.setBackgroundColor(Color.GREEN)
         joinButton.setTextColor(Color.RED)
         this.addContentView(joinButton, FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, 300))
     }
 }

Start your app

In /app/java/com.example.<projectname>/MainActivity, update onCreate to run initializeAndJoinChannel() when the app starts. For example:

 override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     setContentView(R.layout.activity_main)
     initializeAndJoinChannel()
 }

Test your app

To check that your code works, host an Interactive Live Streaming event from your app and connect to it as the audience from a web demo. To test real-time engagement with your app:

Generate a temporary token in Agora Console.
In Android Studio, in /app/java/com.example.<projectname>/MainActivity, update appId, channelName and token with the values for your temporary token.
Run your app on a device.

The app is now the host of the Interactive Live Streaming event.
In your browser on another device, navigate to the Basic Communication sample app, update App ID, Channel and Token with the values for your temporary token, then click JOIN.

The user in the browser is a member of the audience in the event.

You can now talk to yourself between different devices. Try it out with some friends, the conversation may be better.

Is this page helpful?

Yes