How to Build a Video Calling App in Flutter?

Video Calling has become a necessary feature in most real-time communication applications used around the world. Its primary application is to connect people from all around the world along with other obvious applications. Chat applications like Facebook, WhatsApp, and Instagram all have video calling features. Zoom, Google Meet, Microsoft Teams, and other such applications thrive on video calling as their fundamental feature. In this article, we learn how to make a Video/Audio Calling application using the Flutter framework and Agora Software Development Kit.

Understanding the Architecture

The above flowchart gives an idea of how to integrate the video call functionality into our Flutter App. For an app client to join a channel, you need the following information:

• App ID: A string that Agora created at random to identify your app. Agora Console is where you can find the App ID.
• user ID: A user’s special identification number. The user ID must be self-specified, and you must make sure it is exclusive to the channel.
• Token: Your app client obtains tokens from a server in your security infrastructure in a test or production environment. You obtain a temporary token with a 24-hour validity period from Agora Console and use it for this page.
• Channel name: A string that indicates the video call’s channel.

Prerequisites

Target Platform: Windows

• Flutter >=2.0 
• Dart >=2.14.0 
• Windows OS
• Visual Studio (Most recent versions recommended)
• A valid Agora developer account

Get App ID and Token

Step 1: Create an Agora project

To create an Agora project, do the following: Enter the Project Management page->Click Create->Enter the project name and use case by adhering to the on-screen directions, and check Secured mode: APP ID + Token as the authentication procedure->Click Submit. You can now view the project on the Project Management page.

Step 2: Get an App ID

As a distinctive identification, Agora automatically assigns an App ID to each project. To copy this App ID, find your project on the Project Management page in Agora Console, and click the copy icon in the App ID column.

Step 3: Generate a temporary token

Agora proposes utilizing tokens to authenticate people joining a channel in order to ensure communication security. For testing purposes, Agora Console supports generating RTC temporary tokens. To generate an RTC temporary token:

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

Click Generate temp RTC token.

Enter the name of the channel that you want to join, and click Generate. When joining the channel later, ensure that the channel name is the same as the one you enter here.

Click the copy icon to copy the temporary token.

Create a Flutter Project

Add dependencies:

Add the following dependencies in the pubspec.yaml file:

1. Add the agora_rtc_engine dependency to integrate Agora Flutter SDK. See https://pub.dev/packages/agora_rtc_engine for the latest version of agora_rtc_engine.
2. Add the permission_handler dependency to add the permission handling function.

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  # Please use the latest version of agora_rtc_engine
  agora_rtc_engine: ^5.2.0
  permission_handler: ^8.3.0

Add the following line in the /android/build.gradle file of your project:

allprojects {
    repositories {
        ...
        maven { url 'https://www.jitpack.io' }
    }
}

Import Packages:

import 'package:agora_uikit/agora_uikit.dart';
import 'package:flutter/material.dart';

Flutter Code:

Below is a function that can be used as a callback of a button widget (onPressed):

Dart

class VideoCallScreen extends StatefulWidget {
  const VideoCallScreen({Key? key}) : super(key: key);

  @override
  State<VideoCallScreen> createState() => _VideoCallScreenState();
}

class _VideoCallScreenState extends State<VideoCallScreen> {
  final AgoraClient _client = AgoraClient(
      agoraConnectionData: AgoraConnectionData(
    appId: '<YOUR APP ID>',
    channelName: '<YOUR CHANNEL NAME>',
    tempToken:
        '<YOUR TOKEN>',
  ));

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

  Future<void> _initAgora() async {
    await _client.initialize();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
          appBar: AppBar(
            title: const Text('Video Call'),
          ),
          body: SafeArea(
            child: Stack(
              children: [
                AgoraVideoViewer(
                  client: _client,
                  layoutType: Layout.floating,
                  showNumberOfUsers: true,
                ),
                AgoraVideoButtons(
                  client: _client,
                  enabledButtons: const [
                    BuiltInButtons.toggleCamera,
                    BuiltInButtons.switchCamera,
                    BuiltInButtons.callEnd,
                    BuiltInButtons.toggleMic,
                  ],
                )
              ],
            ),
          )),
    );
  }
}

Output: