Talk to us
Talk to us
menu

Blog Post

start building
Developer

How To Use Video Call API For Flutter To Build Video Call App

How To Use Video Call API For Flutter To Build Video Call App

Introduction

The continuous improvement of device performance and network quality led to more and more audio and video call scenarios. Thus, the application of video call API.

What can the video call API provide?

The capabilities provided by the video call API mainly include:

  1. Call invitation
  2. Voice and Video call
  3. Offline push function
  4. Call UI and interaction

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

video call API demo

What can ZEGOCLOUD’s video call 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:

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

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’s Video call API

Step 1.

Create a ZEGOCLOUD account on ZEGOCLOUD Official.

create an account

Step 2

Create a new project in ZEGOCLOUD Admin Console.

create a project

Step 3.

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

create a firebase project

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.

write appID

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

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

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

ZEGOCLOUD
ZEGOCLOUD With our fully customizable and easy-to-integrate Live SDK, you can quickly build reliable, scalable, and interactive live streaming into your mobile, web, and desktop apps.

Related posts

Contact us