Skip to main content

You are looking at Video Calling v3.x Docs. The newest version is  Video Calling v4.x

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.

1630581150640

This page shows the minimum code you need to add a real-time engagement interface into your app using Agora UIKit.

Understand the tech

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

1630581157913

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.

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 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" />

Implement a client for Video Call

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
    }

Test your app

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.

Video Calling