

Video Call (Legacy)





Start a Video Call using UIKit

Last updated 2022/05/24 03:19:39

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.

Understand the tech

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:

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:

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

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/<project.package.name>/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, use an online demo to make a video call to your app. To test real-time engagement with your app:

Generate a temporary token in Agora Console.
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.
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.

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.

Is this page helpful?

Yes