Talk to us
Talk to us

How to Build a Flutter Video Call APP

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:

video call API architecture

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

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.

create an account Video Call API

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.
create a new realtime database

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

  "rules": {
        ".read": "auth.uid != null",
        ".write": "auth.uid != null",
edit the rules of the realtime database

3. Install the CLI via npm.

npm install -g firebase-tools
install the CLI via npm

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

firebase login

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.

init functions

6. Download the Cloud function sample code.

Download file

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.

copy file
copy file

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.

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
check the development environment

  • 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
    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.

copy ZEGOCall source code to your project

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();

  await ZegoCallManager.shared.initWithAppID(ZegoSecretReader.instance.appID);

  ZegoPageRoute.shared.init(PageRouteNames.calling, PageRouteNames.onlineList);

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, () {
              ZegoUserInfo(widget.userInfo.userID, widget.userInfo.userName),
          .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.


To learn more, talk to us.

Talk to Expert

Learn more about our solutions and get your question answered.

Talk to us

Take your apps to the next level with our voice, video and chat APIs

Free Trial
  • 10,000 minutes for free
  • 4,000+ corporate clients
  • 3 Billion daily call minutes

Stay updated with us by signing up for our newsletter!

Don't miss out on important news and updates from ZEGOCLOUD!

* You may unsubscribe at any time using the unsubscribe link in the digest email. See our privacy policy for more information.