Keeping It Simple: Integrate Firebase and Agora.io in your Flutter Projects (Part 3)

This post is the last part of the three-part article on integrating Firebase and Agora.io in a Flutter Project. In the first part, we’ve specified what Flutter is and how to create and run the project. In the second part, we’ve integrated Firebase for persisting data.
In this part, we’ll be integrating Agora.io for our Real-Time communication needs, like Audio and Video calls.

Introduction

Ever wondered how video and audio calls work? Ever thought of creating a chat application or just integrating it with an application?
Then I can confidently say that all of the above can easily be implemented. Moreover, all of this can be done by any beginner without making them lose their mind.
Yes, you've got it right. Whether you are a beginner or a pro developer with years of experience, this here is the perfect solution for you!
Look at it like this, if there is a pre-built and perfectly working solution in front of you, would you try to create another solution that could potentially fail? Absolutely not! There's a lot on offer, pre-built and ready to use. It's all about having to find which one matches with the use case.
So what next? Imagine we need to implement video and voice call functionality in our chat application, and we do not have the time and resources to start from scratch. As I already mentioned, there is a lot on offer, but obviously the patience to try each one of them is non-existent. This is where I introduce you to one of the easiest and powerful API’s by Agora.io .

What is Agora.io?

Agora.io is the leading video, voice and live interactive streaming platform, helping developers deliver rich in-app experiences—including embedded voice and video chat, real-time recording, interactive livestreaming, and real-time messaging.

Agora.io provides building blocks that allow the addition of real-time voice and video communications through a simple and powerful SDK. This SDK can be integrated in an existing project to quickly enable real-time communications.

Agora’s Software-Defined Real-Time Network™ (SD-RTN™) is the world’s most widely used and intelligent RTE network. All audio and video services provided by the Agora SDK are deployed and transmitted through the Agora SD-RTN™.
In a single line, Agora.io can offer a single solution for all your Real-Time Communication needs!

Why I opted for Agora.io?

There are lots of reasons and features why I opted for Agora.io, some of which are:

• 10,000 minutes FREE each month

• Good documentation, complemented by examples and sample code

• Easy to Implement

• Highly customizable. Pick and choose the calling or interactive broadcast features needed.

What does Agora.io provide?

After integrating the Agora SDK, you can call different sets of APIs to implement voice/video communications in different scenarios.

• Voice SDK

• Video SDK

• Real-Time Messaging (RTM) SDK

• Cloud Recording Add-on

Want to learn more about the above? Then head on here.

How to implement Video and Voice calls in your project with Agora.io?

Prerequisites

To start implementing Agora.io, you will need a valid Agora account . For the other prerequisites, please check the Agora website.

Create an Agora project

1. Enter the Project Management page.

2. Click Create.

3. Follow the on-screen instructions to enter a project name and use case, and check Secured mode: APP ID + Token (Recommended) as the authentication mechanism.

4. Click Submit. You can now see the project on the Project Management page.

Finally! Your first project in agora.io is created! Now what?

Get the App ID

Agora automatically assigns each project an App ID as a unique identifier.
To copy this App ID, find your project on the Project Management page in Agora Console, and copy the value in the App ID column.

Generate a temporary token

To ensure communication security, Agora recommends using tokens to authenticate users joining a channel.
For testing purposes, Agora Console supports generating RTC temporary tokens. To generate an RTC temporary token:

1. On the Project Management page, find your project and click Config.

1. Click Generate temp RTC token under Primary Certificate, which leads to the Token page.

1. On the Token page, enter the name of the channel that you want to join, and click Generate Temp Token. When joining the channel later, ensure that the channel name is the same with the one that you use to generate this temporary token.

NOTE: Temporary tokens are for demonstration and testing purposes only, and remain valid for 24 hours. In a production environment, you need to deploy your own server for generating tokens. For more information, see Authenticate Your Users with Tokens.

1. Integrate the Agora SDK

Now that everything is prepared, we can start integrating Agora in a project.
Let’s begin:

• Download the Agora RTC engine Flutter packages and add it to the projects pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  agora_rtc_engine: ^5.0.1

NOTE: Keep your App ID, channel name and generated temp token by hand, it will be used in the next step.

• First of all, the connection with Agora needs to be initialized. Define an asynchronous function that will handle the initialization and call this function in the initState() function.

const String appId = <YOUR APP ID> ;
const String channelName = <YOUR CHANNEL NAME> ;
const String tempToken = <YOUR GENERATED TEMP TOKEN> ;

int? _remoteUid;
late RtcEngine _engine;

@override
void initState() {
   super.initState();
   initAgora();
}

Future<void> initAgora() async {

  // retrieve permissions using permission_handler package
  await [Permission.microphone, Permission.camera].request();

  // create the Real Time Communication (RTC) engine
  _engine = await RtcEngine.create(RtcEngineConfig(appId);

  // Enable Video calls
  await _engine.enableVideo();

  // Or enable Audio calls
  await _engine.enableAudio();

  // The most important part of the _engine is event handling
  // Define what the _engine should do if an event occurs

  _engine.setEventHandler(
      RtcEngineEventHandler(
        joinChannelSuccess: (String channel, int uid, int elapsed) {
          print("local user $uid joined");
        },
        userJoined: (int uid, int elapsed) {
          print("remote user $uid joined");
          setState(() {
            _remoteUid = uid;
          });
        },
        userOffline: (int uid, UserOfflineReason reason) {
          print("remote user $uid left channel");
          setState(() {
            _remoteUid = null;
          });
        },
      ),
    );

  await _engine.joinChannel(token, channelName, null, 0);
}

We’re almost there. Now that the engine is initialized, the UI is next on the list. At this stage, let your imagination run wild whilst creating a stunning UI for either the Audio or Video Call screens.

For the other parts of this article, please visit following links:

• Part 1: What is Flutter and How to start?

• Part 2: Integrating Firebase for the Backend of the application.