How to Build a Flutter Video Call APP

Video calling has become a crucial feature in many real-time communication applications worldwide. Its primary purpose is to connect individuals from different parts of the world, alongside other practical applications. In this article, we will explore how to make a Flutter video chat app.

How to Build a Video Calling App in Flutter

ZEGOCLOUD Video Call API for Flutter is a software development kit that allows developers to integrate video calling functionality into their Flutter applications. It allows developers to initiate, accept, and manage video calls, as well as perform other related tasks such as audio and video streaming, screen sharing, and recording.

ZEGOCLOUD Video Call SDK for Flutter can be easily integrated into existing Flutter applications and is compatible with both iOS and Android platforms. It provides a seamless user experience by allowing users to make video calls directly from within the application, without the need for any additional software or hardware.

What Can ZEGOCLOUD’s Flutter Video Chat API Provide?

ZEGOCLOUD’s video call API uses a layered architecture. Details are as shown in the figure below:

ZEGOCLOUD’s video call API provides two different SDKs for you:

UIKits
It provides a complete live video call UI; you only need to call the call interface and hang up the interface where you need to complete the call process.

Video Call SDK
It provides the underlying logic of live video calls, such as audio and video management, call management, network status management, etc. You only need to focus on implementing the upper-layer custom UI and call the corresponding interactive interface to complete the call process.

How to Use ZEGOCLOUD API for Video Call Flutter

Below you will find a live video call app built using ZEGOCLOUD’s video call API.

Step 1.

Create a ZEGOCLOUD account on ZEGOCLOUD Official.

Step 2

Create a new project in ZEGOCLOUD Admin Console.

Step 3.

Create a Firebase project in the Firebase console. For more details, see Firebase Documentation.

Step 4.

Deploy the Firebase Cloud Functions

Deploy the Firebase Cloud Functions. ZEGO Call uses the Firebase Cloud Functions as the business server by default; we recommend you activate and deploy it before integrating the ZEGOCall SDK.

Here is how to activate and deploy it:

1. Create a new Realtime Database in Firebase.

2. Edit the rules of the Realtime Database by adding the following:

{
  "rules": {
        ".read": "auth.uid != null",
        ".write": "auth.uid != null",
  }
}

3. Install the CLI via npm.

npm install -g firebase-tools

4. Run the firebase login to log in via the browser and authenticate the firebase tool.

5. Run firebase init functions. The tool gives you an option to install dependencies with npm. It is safe to decline if you want to manage dependencies in another way, though if you do decline, you’ll need to run npm install before emulating or deploying your functions.

6. Download the Cloud function sample code.

7. Copy the firebase.json, functions\index.js files, and functions\token04 folder in the sample code to your cloud function project, and overwrite files with the same name.

8. Modify the index.js file; correctly fill in the AppID and ServerSecret you get from ZEGOCLOUD Admin Console.

9. In Firebase CLI, run the firebase deploy –only functions command to deploy the cloud functions.

Step 5.

Check the development environment. After meeting all the step 4 requirements, run the following command to check whether your development environment is ready:

$ flutter doctor

• If the Android development environment is ready, the Android toolchain item shows a ready state.

• If the iOS development environment is ready, the Xcode item shows a ready state.

Step 6.

Integrate into your project.

If you use the ZEGOCall SDK in your project instead of building your project with it, make sure you complete the following:

1. Add dependencies required by the SDK

dependencies:
  flutter:
    sdk: flutter

  # Add the following lines to your "pubspec.yaml" file
  cupertino_icons: ^1.0.2
  provider: ^6.0.2
  flutter_hooks: ^0.18.2
  zego_express_engine: ^2.17.1
  flutter_provider_utilities: ^1.0.4
  permission_handler: ^9.2.0
  crypto: ^3.0.1
  wakelock: ^0.6.1+1
  package_info_plus: ^1.3.0
  webview_flutter: ^3.0.1
  awesome_notifications: any
  google_sign_in: ^5.2.4
  flutter_background: ^1.1.0
  firebase_core: ^1.13.1
  firebase_auth: ^3.3.11
  firebase_database: ^9.0.8
  firebase_messaging: ^11.2.11
  cloud_functions: ^3.2.10
  statemachine: ^3.2.0
  result_type: ^0.1.0
  flutter_vibrate: ^1.3.0
  audioplayers: ^0.20.1
  shared_preferences: ^2.0.13
  get_it: ^7.2.0
  loader_overlay: ^2.0.5
  flutter_easyloading: ^3.0.3
  f_logs: ^2.0.0
  loading_animations: ^2.2.0

2. Once the pubspec.yaml file is modified, run the following command to check whether all dependencies are installed:

$ flutter pub get

3. Copy ZEGOCall source code to your project

Copy lib/zegocall and lib/zegocall_uikit folder to [your_project > lib] folder.

4. Initialize ZEGOCall SDK. Before using the ZEGOCall SDK function, you need to callinitWithAppID to initialize the SDK.

Future<void> initManagers() async {
  await ZegoSecretReader.instance.loadKeyCenterData();

  // WARNING: DO NOT USE APP ID AND APP SIGN IN PRODUCTION CODE!!!GET IT
  // FROM SERVER INSTEAD!!!
  await ZegoCallManager.shared.initWithAppID(ZegoSecretReader.instance.appID);

  ZegoPageRoute.shared.init(PageRouteNames.calling, PageRouteNames.onlineList);
  LoginManager.shared.init();
  UIKitManager.shared.init();
}

5. Call thecallUser interface to initiate a call invitation to other users. When the callee clicks the answer button, the audio and video call can be started.

void onAudioCallTap(BuildContext context) async {

    executeInPermission(context, () {
      ZegoCallManager.interface
          .callUser(
              ZegoUserInfo(widget.userInfo.userID, widget.userInfo.userName),
              ZegoCallType.kZegoCallTypeVoice)
          .then((error) {
      });
    });
  }

Uninitialized ZEGOCall SDK

When the program exits or the calling function module exits and the related functions of the ZEGOCall SDK are not used for the time being, the uninit interface can be called to release the resources occupied by the SDK.

ZegoCallManager.shared.uninit();

To learn more, talk to us.