How to Create a Video Call App with Agora and Flutter

Feb 6, 2023 | Programming

Welcome to this step-by-step guide on how to quickly set up a video call app using Agora with Flutter! No need to feel daunted; we’ll walk you through the process so you can be video calling in no time.

Prerequisites

Quick Start: Building Your Video Call App

This repository gives you access to the Agora Flutter SDK for a simple video call experience. With this setup, you’ll be able to:

  • Join and leave a channel
  • Mute and unmute audio
  • Switch camera views
  • Layout multiple video views
Screenshot 1 Screenshot 2

Creating an Account and Obtaining an App ID

To build and run the sample application, you’ll need an App ID. Here are the steps to get one:

  1. Create a developer account at agora.io and navigate to your dashboard.
  2. Click on **Projects** and then **Project List**.
  3. Copy the App ID provided to your dashboard; you’ll need it to launch the app.

Updating and Running the Sample Application

To kick off your app, follow these instructions:

  1. Open settings.dart located in the lib/src/utils/ directory and insert your App ID.
  2. From your project directory, run the following command to install the necessary dependencies:
  3. flutter pub get
  4. Lastly, start your app with this command:
  5. flutter run

Using an Integrated Development Environment (IDE) can help streamline the build process. Check the setup guide here.

Troubleshooting

Sometimes, things may not go as planned. Here are some common issues and their solutions:

iOS Memory Leak

If you find yourself experiencing a memory leak with the iOS build, consider switching your Flutter channel to beta. Use the command:

flutter channel beta

You can refer to this pull request for more details.

Android Black Screen

If your app shows a black screen, ensure that your configurations are correct. Particularly, your MainActivity should extend io.flutter.embedding.android.FlutterActivity. Don’t forget to include:

super.configureFlutterEngine(flutterEngine);

Do not add GeneratedPluginRegistrant.registerWith(flutterEngine), as plugins will auto-register.

Android Release Crash

A common cause for crashes during release is code obfuscation. This can happen because Flutter sets android.enableR8=true by default. To resolve this, add the following line to your app/proguard-rules.pro file:

proguard-keep class io.agora.***;

Reporting an Issue

When reporting issues, ensure to provide information such as:

  • Run flutter doctor and share the log output.
  • Set up Agora SDK logs with the following code:
  • AgoraRtcEngine.setParameters(rtc.log_filter: 65535);

Include this after initializing the Agora engine in your app as shown below:


_initAgoraRtcEngine();
_addAgoraEventHandlers();
AgoraRtcEngine.enableWebSdkInteroperability(true);
AgoraRtcEngine.setParameters(che.video.lowBitRateStreamParameter:width:320,height:180,frameRate:15,bitRate:140);
AgoraRtcEngine.setParameters(rtc.log_filter: 65535);
AgoraRtcEngine.joinChannel(null, widget.channelName, null, 0);

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

In Conclusion

And there you have it! Your Agora-powered video call app is just a few steps away from being functional.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Additional Resources

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox