Start a Video Call using UI Kit

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 video calls and 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 add a real-time engagement interface into your app using Agora UIKit.

The following figure shows the workflow you integrate into your app in order to achieve Video Call functionality using Agora UIKit.

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

1. 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.

• 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.

In order to create the environment necessary to integrate Video Call into your app, do the following:

1. 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.

2. Integrate Agora UIKit into your project:

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

      
      

      _6

      repositories {

      _6

      google()

      _6

      mavenCentral()

      _6

      jcenter() // Warning: this repository is going to shut down soon

      _6

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

      _6

      }

      
      

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

      
      

      _11

      android {

      _11

      defaultConfig {

      _11

      ...

      _11

      minSdkVersion 24

      _11

      ...

      _11

      }

      _11

      dependencies {

      _11

      ...

      _11

      implementation 'com.github.AgoraIO-Community.Android-UIKit:final:<version>'

      _11

      ...

      _11

      }

      
      

   3. Find the pre 4.x version of Agora UIKit and replace version with the one you want to use. For example: 2.0.6.

      
      

      _1

      implementation 'com.github.AgoraIO-Community.Android-UIKit:final:2.0.6'

      
      

   4. Sync Gradle and import Agora UIKit.

   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

      <!-- Add the following permission on devices running Android 12.0 or later. -->

      _12

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

      
      

This section shows how to use Agora UIKit to implement Video Call into your app step-by-step.

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

1. Import the Agora classes.

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

   
   

   _8

   import android.graphics.Color

   _8

   import android.view.View

   _8

   import android.view.ViewGroup

   _8

   import android.widget.Button

   _8

   import android.widget.FrameLayout

   _8

   _8

   import io.agora.rtc.Constants

   _8

   import io.agora.agorauikit_android.*

   
   

2. Create the variables that you use to initiate and join a channel.

   In /app/java/<project.package.name>/MainActivity, add the following lines after AppCompatActivity {:

   
   

   _10

   // Fill the App ID of your project generated on Agora Console.

   _10

   private val appId = ""

   _10

   _10

   // Fill the temp token generated on Agora Console.

   _10

   private val token = ""

   _10

   _10

   // Fill the channel name.

   _10

   private val channelName = ""

   _10

   _10

   private var agView: AgoraVideoViewer? = null

   
   

3. 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:

   
   

   _41

   private fun initializeAndJoinChannel(){

   _41

   // Create AgoraVideoViewer instance

   _41

   try {

   _41

   agView = AgoraVideoViewer(

   _41

   this, AgoraConnectionData(appId),

   _41

   )

   _41

   } catch (e: Exception) {

   _41

   print("Could not initialize AgoraVideoViewer. Check your App ID is valid.")

   _41

   print(e.message)

   _41

   return

   _41

   }

   _41

   // Fill the parent ViewGroup (MainActivity)

   _41

   this.addContentView(

   _41

   agView,

   _41

   FrameLayout.LayoutParams(

   _41

   FrameLayout.LayoutParams.MATCH_PARENT,

   _41

   FrameLayout.LayoutParams.MATCH_PARENT

   _41

   )

   _41

   )

   _41

   _41

   // Check permission and join channel

   _41

   if (AgoraVideoViewer.requestPermissions(this)) {

   _41

   agView!!.join(channelName, token = token, role = Constants.CLIENT_ROLE_BROADCASTER)

   _41

   }

   _41

   _41

   else {

   _41

   val joinButton = Button(this)

   _41

   joinButton.text = "Allow Camera and Microphone, then click here"

   _41

   joinButton.setOnClickListener(View.OnClickListener {

   _41

   // When the button is clicked, check permissions again and join channel

   _41

   // if permissions are granted.

   _41

   if (AgoraVideoViewer.requestPermissions(this)) {

   _41

   (joinButton.parent as ViewGroup).removeView(joinButton)

   _41

   agView!!.join(channelName, token = token, role = Constants.CLIENT_ROLE_BROADCASTER)

   _41

   }

   _41

   })

   _41

   joinButton.setBackgroundColor(Color.GREEN)

   _41

   joinButton.setTextColor(Color.RED)

   _41

   this.addContentView(joinButton, FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, 300))

   _41

   }

   _41

   }

   
   

4. Start your app

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

   
   

   _5

   override fun onCreate(savedInstanceState: Bundle?) {

   _5

   super.onCreate(savedInstanceState)

   _5

   setContentView(R.layout.activity_main)

   _5

   initializeAndJoinChannel()

   _5

   }

   
   

To check that your code works, use an online demo to make a video call to your app. To test real-time engagement with your app:

1. Generate a temporary token in Agora Console.

2. 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.

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

4. Run your app on a device.

Your app opens in an Android device and connects to the channelName you opened in the Web app. You now have the golden opportunity of talking to yourself using Video Call in a complete UI created using Agora UIKit.