UI Kit quickstart

The fastest and easiest way to get started with Agora Broadcast Streaming is to use the UI Kit. It implements commonly-used features and flows to get you up and running in minutes. This open source project includes best practices for business logic, as well as a pre-built UI that is highly customizable.

This page outlines the minimum code you need to integrate high-quality, low-latency Broadcast Streaming functionality into your app using the UI Kit.

UI Kit simplifies the implementation of Broadcast Streaming by handling common calling logic such as remote user status, and displaying it in a pre-built customizable UI. UI Kit contains the following components:

To use the UI Kit, implement the following steps in your app:

1. Create an instance of the viewer

   Declare and initialize an instance of the UI Kit viewer.

2. Join a channel

   When you execute the join command, your app joins the channel, publishes the local audio and video streams to Agora SD-RTN™, and handles audio and video for anyone else who joins the call in a default UI.

   Yes, you read that right. After initializing a viewer instance, you can create or join a channel with just one line of code.

To follow this procedure you must have:

• Android Studio 4.2 or higher.
• Android SDK API Level 21 or higher.
• Two mobile devices running Android 5.0 or higher.

• A computer with Internet access. If a firewall is deployed in your network environment, refer to Connect through restricted networks with Cloud Proxy to use Agora services normally.

• A camera and a microphone

• A valid Agora account and project

To integrate Broadcast Streaming into your app using UI Kit, do the following:

1. In Android Studio, create a new Phone and Tablet Android project with an Empty Activity using Java. Set Minimum SDK to API 24.

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

2. Integrate UI Kit into your project:

   In Gradle Scripts/settings.gradle (Project Settings), reference the jitpack repository by adding the following line to the repositories section inside dependencyResolutionManagement:

   
   

   _4

   repositories {

   _4

   ...

   _4

   maven { setUrl("https://jitpack.io") }

   _4

   }

   
   

3. In Gradle Scripts/build.gradle (Module: <projectname>), add the UI Kit dependency. The dependencies section should look like the following:

   
   

   _5

   dependencies {

   _5

   ...

   _5

   implementation 'com.github.agoraio-community:videouikit-android:final:<version>'

   _5

   ...

   _5

   }

   
   

   Find the Latest version of the UI Kit and replace <version> with the one you want to use. For example: 4.0.1.

4. Sync Gradle and import the UI Kit.

5. Add permissions for network and device access.

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

   
   

   _12

   <uses-permission android:name="android.permission.READ_PHONE_STATE"/>

   _12

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

   _12

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

   _12

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

   _12

   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

   _12

   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

   _12

   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

   _12

   _12

   <!-- The Agora SDK requires Bluetooth permissions in case users are using Bluetooth devices. -->

   _12

   <uses-permission android:name="android.permission.BLUETOOTH" />

   _12

   <!-- For Android 12 and above devices, the following permission is also required. -->

   _12

   <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

   
   

When a user opens the app, you initialize UI Kit. When the user taps a button, the app joins or leaves a channel. When another user joins the same channel, their video and audio is rendered in the app. This simple workflow enables you to concentrate on implementing Agora features and not UX bells and whistles.

To integrate real-time video with a ready-made user interface into your app using UI Kit:

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

In /app/java/com.example.<projectname>/MainActivity, add the provided code sample after AppCompatActivity:

In /app/java/com.example.<projectname>/MainActivity, add the provided code sample after the variable declarations:

In /app/java/com.example.<projectname>/MainActivity, update onCreate to run initializeAndJoinChannel() when the app starts. The updated code should like the provided code sample:

MainActivity

_8

import android.view.View;

_8

import android.view.ViewGroup;

_8

import android.widget.Button;

_8

import android.widget.FrameLayout;

_8

import android.util.Log;

_8

_8

import io.agora.rtc2.Constants;

_8

import io.agora.agorauikit_android.*;

To ensure that you have implemented Broadcast Streaming in your app:

1. Generate a temporary token in Agora Console

2. In your browser, navigate to the Agora web demo and update App ID, Channel, and Token with the values for your temporary token, then click Join.

3. In Android Studio, in app/java/com.example.<projectname>/MainActivity, update appId, channelName and token with the values for your temporary token.

4. Connect a physical Android device to your development device.

5. In Android Studio, click Run app. A moment later you see the project installed on your device.

6. If this is the first time you run the project, grant microphone and camera access to your app, then press the button to join a channel.

7. Now, you can see yourself on the test device as you have successfully joined the channel as a Host.

8. To join the channel as Audience, edit the joinChannel method and replace Constants.CLIENT_ROLE_BROADCASTER with Constants.CLIENT_ROLE_AUDIENCE.

9. Relaunch the app from Android Studio. Now you have joined the channel as Audience and you see only the remote stream.

This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

To implement token authentication when using the UI Kit, refer to the following steps:

1. Specify the token server URL

   In the MainActivity class, declare the following variable to hold the token server URL.

   
   

   _3

   // The base URL to your token server.

   _3

   // For example, "https://agora-token-service-production-92ff.up.railway.app"

   _3

   private String serverUrl = "<Token Server URL>";

   
   

   Make sure you specify the token-server URL in exactly the same format as shown in the example.

2. Set the token URL for AgoraVideoViewer

   To set the token URL, you create an AgoraSettings object, set its TokenURL property and pass this object to the constructor when initializing AgoraVideoViewer. To do this, replace the code in the try {…​} block of the initializeAndJoinChannel() method with the following:

   
   

   _4

   AgoraSettings settings = new AgoraSettings();

   _4

   settings.setTokenURL(serverUrl);

   _4

   agView = new AgoraVideoViewer(this, new AgoraConnectionData(appId, null),

   _4

   AgoraVideoViewer.Style.FLOATING, settings, null);

   
   

3. Fetch a token from the server when you join a channel

   In the joinChannel() method, replace the agView.join call with the following:

   
   

   _1

   agView.join(channelName, true, Constants.CLIENT_ROLE_BROADCASTER, 0);

   
   

• Now you have created an app with UI Kit, see how to Customize your app.

• See the Open Source UI Kit projects on GitHub here.

• Downloads shows you how to install Video SDK manually.

• To ensure communication security in a test or production environment, use a token server to generate token is recommended to ensure communication security, see Implement the authentication workflow.

Since UI Kit is a drop-in solution, it has customization limits that might not meet all your needs. If you want to change the UI or add more features, fork the open-source GitHub repository and build your own version. For substantially different scenarios and UI implementations, implement your own solution by following the SDK Quickstart guide.