chigozzdev
How to Create a Video Call App with Flutter

Photo by Tony Pepe on Unsplash

How to Create a Video Call App with Flutter

samuel chigozie's photo
samuel chigozie
·

6 min read

Want to build your own video call app? Flutter is a powerful tool to bring your idea to life. This guide will walk you through the process of creating a video call app using Flutter. We'll cover everything from setting up your project to implementing real-time video and audio features. Whether you're a seasoned developer or just starting out, you'll find valuable insights here. Let's dive in and start building!

How to Build a Video Call App with Flutter

Ready to create a video call app that shines? This section will guide you through building a robust video call feature using Flutter. We'll use ZEGOCLOUD's Call Kit to streamline the development process and deliver a high-quality user experience.

ZEGOCLOUD offers a comprehensive platform for real-time communication, making it an ideal choice for building video call applications. By integrating ZEGOCLOUD's Call Kit into your Flutter project, you can quickly add features like one-to-one calls, group video calls, screen sharing, and more. Let's get started on building your video call app!

Prerequisites

Before we begin, make sure you have these things:

  • A ZEGOCLOUD account. You can sign up for one.

  • AppID and AppSign from your ZEGOCLOUD admin console.

  • Flutter installed on your computer.

  • Basic understanding of Dart, the programming language used with Flutter.

If you’re okay with the prerequisites below, please follow the steps below to get started:

1. Setting Up the SDK

1.1 Adding Dependencies

To start using the ZEGOCLOUD Prebuilt Call Kit in your Flutter project, you need to add the necessary dependencies. Open a terminal, navigate to your project's root directory, and run the following commands:

flutter pub add zego_uikit_prebuilt_call
flutter pub add zego_uikit_signaling_plugin

After adding the dependencies, run the following command to install all dependencies:

flutter pub get

1.2 Importing the SDK

Now, import the Prebuilt Call Kit SDK by adding the following import statements at the top of your Dart file:

import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'package:zego_uikit_signaling_plugin/zego_uikit_signaling_plugin.dart';

2. Initializing the Call Invitation Service

2.1 Setting Up the navigatorKey

To display the UI when receiving a call invite, you need to set up a navigatorKey. Follow these steps:

2.1.1 Define a navigatorKey.

final navigatorKey = GlobalKey();
2.1.2 Set the navigatorKey in ZegoUIKitPrebuiltCallInvitationService.
ZegoUIKitPrebuiltCallInvitationService().setNavigatorKey(navigatorKey);
2.1.3 Register the navigatorKey in MaterialApp.

If you're using MaterialApp, register the navigatorKey like this:

return MaterialApp(
  navigatorKey: widget.navigatorKey,
  ...
);

If you're using GoRouter, register the navigatorKey in a similar way.

2.2 Using the System Calling UI

In your main.dart file, use the system calling UI by calling useSystemCallingUI:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  ZegoUIKitPrebuiltCallInvitationService().setNavigatorKey(navigatorKey);

  ZegoUIKit().initLog().then((value) {
    ZegoUIKitPrebuiltCallInvitationService().useSystemCallingUI(
      [ZegoUIKitSignalingPlugin()],
    );

    runApp(MyApp(navigatorKey: navigatorKey));
  });
}

2.3 Initializing and Deinitializing the Call Invitation Service

2.3.1 Initialize on User Login

To receive call invitations, initialize ZegoUIKitPrebuiltCallInvitationService when the user logs in:

void onUserLogin() {
  ZegoUIKitPrebuiltCallInvitationService().init(
    appID: yourAppID, // Your ZEGOCLOUD App ID
    appSign: yourAppSign, // Your ZEGOCLOUD App Sign
    userID: currentUser.id,
    userName: currentUser.name,
    plugins: [ZegoUIKitSignalingPlugin()],
  );
}
2.3.2 Deinitialize on User Logout

To clear previous login records, deinitialize the service when the user logs out:

void onUserLogout() {
  ZegoUIKitPrebuiltCallInvitationService().uninit();
}

2.4 Parameters for Initialization

When initializing ZegoUIKitPrebuiltCallInvitationService, ensure you correctly pass the following parameters:

  • appID (int): The App ID from ZEGOCLOUD Admin Console.

  • appSign (String): The App Sign from ZEGOCLOUD Admin Console.

  • userID (String): A unique identifier for the user.

  • userName (String): The user's name.

  • plugins (List<IZegoUIKitPlugin>): Use ZegoUIKitSignalingPlugin.

Refer to the API reference for a full list of parameters.

3. Adding a Call Invitation Button

To enable call invitations, add a button and pass in the user IDs of the invitees:

ZegoSendCallInvitationButton(
  isVideoCall: true,
  resourceID: "zegouikit_call",
  invitees: [
    ZegoUIKitUser(id: targetUserID, name: targetUserName),
    ZegoUIKitUser(id: anotherTargetUserID, name: anotherTargetUserName),
  ],
)

3.1 Button Properties

  • invitees (List<ZegoUIKitUser>): Information of the users to be called.

  • isVideoCall (bool): Set to true for a video call, false for a voice call.

  • resourceID (String): The resource identifier for offline call invitations.

Refer to the API reference for a full list of button properties.

4. Configuring Your Project

4.1 Android Configuration

4.1.1 Firebase Console and ZEGOCLOUD Console Setup
  • Create a project in the Firebase console.

  • Add an FCM certificate and create a resource ID in the ZEGOCLOUD console.

4.1.2 Gradle and Kotlin Configuration

  • Update compileSdkVersion to 33 and minSdkVersion to 21 in android/app/build.gradle.

  • Set the Kotlin version to 1.8.0 and Gradle classpath version to 7.3.0.

buildscript {
  ext.kotlin_version = '1.8.0'
  dependencies {
    classpath 'com.android.tools.build:gradle:7.3.0'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    classpath 'com.google.gms:google-services:4.3.14'
  }
}
  • Modify gradle-wrapper.properties to use Gradle 7.4:
distributionUrl=https://services.gradle.org/distributions/gradle-7.4-all.zip
4.1.3 Add Firebase Messaging Dependency
  • Add Firebase Messaging to your android/app/build.gradle:
implementation 'com.google.firebase:firebase-messaging:21.1.0'
4.1.4 Add App Permissions
  • Update your AndroidManifest.xml with necessary permissions:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.BLUETOOTH" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.VIBRATE"/>

<uses-permission android:name="android.permission.ACCESS_NOTIFICATION_POLICY"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
<!--for bring app to foreground from background in Android 10 -->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
4.1.5 Prevent Code Obfuscation
  • Create a proguard-rules.pro file with the following content:
-keep class .zego. { *; }
  • In android/app/build.gradle, add the following to the 'release' configuration:
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

4.2 iOS Configuration

4.2.1 Apple Developer Center and ZEGOCLOUD Console Setup

  • Create a VoIP service certificate in the Apple Developer Center and export it as a .p12 file.

  • Add the VoIP certificate and create a resource ID in the ZEGOCLOUD console.

4.2.2 Add App Permissions

  • Update your Podfile and Info.plist with necessary configurations:
# Podfile
target.build_configurations.each do |config|
  config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
    '$(inherited)',
    'PERMISSION_CAMERA=1',
    'PERMISSION_MICROPHONE=1',
  ]

<!-- Info.plist -->
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect</string>
4.2.3 Disable Bitcode and Build Libraries for Distribution

  • Disable Bitcode for the required SDKs (zego_zim, zego_zpns, zego_express_engine).

  • Disable "Build Libraries for Distribution" in your Xcode project.

4.2.4 Add Push Notifications and Background Modes

Add Push Notifications and Background Modes capabilities in Xcode under the "Signing & Capabilities" section.

4.2.5 Import PushKit and CallKit Libraries

Ensure you import the necessary libraries to handle push notifications and calling features.

5. Running & Testing

Once all steps are complete, you can run and test your app on your device to verify the integration.

For a more detailed guide on how to build a video call app with more advanced features, please visit our Call Kit documentation.

Conclusion

Building a video call app with Flutter and Zoom's Call Kit offers a powerful solution for real-time communication. By following this guide, you've learned how to set up the SDK, initialize the call invitation service, and implement key features like video calls and call invitations.

Remember to configure your project properly for both Android and iOS platforms to ensure smooth functionality. With these tools and knowledge at your disposal, you're well-equipped to create a robust video call application.

As you continue to develop and refine your app, explore additional features and optimizations to enhance the user experience. The world of real-time communication is evolving rapidly, and your Flutter-based video call app is now ready to make its mark.

codingAIProgramming BlogsComputer Science