Build Your Own 1:1 Flutter Video Calling App With Agora Token Authentication

Build your own 1:1 Flutter Video Calling app with Agora Token Authentication.

Security for video chat applications is very important. In the Agora platform, one layer of security comes in the form of token authentication. This guide explains how to build a 1:1 secure Flutter video calling app using the Agora Flutter SDK.

Prerequisites

• A basic understanding of Flutter
• A deployed Agora token server ( guidance for deploying a token server is provided below )
• An Agora developer account (check: How to Get Started with Agora)

Deploying an Agora Token Server:

Note: Skip this section if you have already deployed your Agora token server.

Before coding our app, we will deploy our Agora token server. There are a couple of Agora community blogs for doing this. Choose the one that’s based on your language of choice.

How to Build a Token Server for Agora Applications using GoLang

Build an Agora Token Server using Java

2-Click Setup: Testing Token Server

Project Setup

To start, let’s open our terminal, create a project, and change to the directory(cd).

flutter create agora_token_example

Let’s add the dependencies in the pubspec.yml file. To learn more about the dependencies, check out: https://pub.dev/packages/agora_rtc_engine

agora_rtc_engine: ^3.2.1
permission_handler: ^5.0.1
native_screenshot: ^0.0.4
http: ^0.12.2 # for receiving a token from the server

The Agora Video SDK requires camera and microphone permissions to start a video call.

Adding Device Permissions:

Now, let’s add device permissions for Android and iOS.

Android

Open the Android/app/src/main/AndroidManifest.xml file and add the required device permissions to the file:

<manifest>
    ...
<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_NETWORK_STATE" />
    
    <!-- The Agora SDK requires Bluetooth permissions in case users are using Bluetooth devices.-->
    <uses-permission android:name="android.permission.BLUETOOTH" /> 
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
...
</manifest>

iOS

Open the ios/runner/info.plist and add:

• Privacy - Microphone Usage Description, and add a note in the Value column.
• Privacy - Camera Usage Description, and add a note in the Value column.

File Structure

Now, Create the following file structure.

Coding the Widgets

Place the following code in utils/appId.dart and replace your token server URL and an App ID. If you don’t have an App ID, you can get it from https://console.agora.io

const APP_ID = '';
const TOKEN_SERVER_URL = '';

Let’s start by making the calling widget, generating a random, and receiving a token from the server. Then we will initialize the Agora Flutter SDK and join the call:

We will now make our user_details widget, which is responsible for displaying the user information.

Building the Screens

Now that we’re done with our widgets, let’s make our homepage screen. In this screen, we are taking the channel name from the user and moving the user to the call screen:

Here, we call our widgets call_function and app_bar :

And now we edit our main.dart file to push users to the homepage:

Notes: Make sure you replace your APP ID and TOKEN SERVER URL in config.dart. And remove trailing slash in TOKEN SERVER URL

Add the following lines in the pubspec.yml file, create a folder named assets, and add an appropriate background image and profile picture:

assets:
  - assets/bg.jpg # rename you background image to bg.jpg
  - assets/dp.jpeg # rename you profile picture to dp.jpeg

Conclusion

All done! Did you get stuck somewhere?

Check out my source code:

raysandeep/agora_token_example

Still, facing the issue?

Join our Slack community here to learn about product updates, participate in the beta programs, and engage in meaningful conversations with other developers.

If you see room for improvement feel free to fork the repo and make a pull request!