Home » Tech Stuff » Add a video call feature to your app using ZEGOCLOUD in a few minutes

Tech Stuff, Tutorials

Add a video call feature to your app using ZEGOCLOUD in a few minutes

by Praneeth Peiris

Implementing a video call feature to our apps can take much time and effort. Even then, we must look into many aspects of media streaming and its edge cases. Moreover, putting effort into something that’s not the team’s main focus will always hinder us. That’s why we should always look for existing solutions when it permits.

There are several third-party services we can look into that enable us to integrate video call features into our apps. One of the best and most easy-to-use services is ZEGOCLOUD and I’m going to give a short example of how easy it is to create a video call app using their UIKit.

Signup for ZEGOCLOUD

First, sign up for an account in ZEGOCLOUD from this link and get 10,000 free minutes.

After you enter your information (and verify your email account), you’ll be directed to create the first project. From that point onwards, it’s quite straightforward.

Then, select the type of features you’d like to integrate into your app. You can also use the “Customized App” option if you have several features to use in your app. I used “Voice & Video Call” for this.

Select the features of our app integration

After specifying a name for your project, select the type of integration you’d like to use. You can also browse through different frameworks and see how easy it is to integrate.

For most cases, it’s UIKits since it already gives us premade components for us to use inside our existing apps. If you need access to low-level APIs and go for fully customized UIs, go for “Start with Custom SDKs”.

I picked “Start with UIKits” because I need to use something out-of-the-box.

Select the integration type

This will start creating a new project for us.

Integrating ZEGOCLOUD into our app

Next, we need to use the App ID and the Key of the project to integrate the service into our app.

We can start by selecting the SDK of our app. In this case, I select Flutter because my app (Adopt a Book) is made using Flutter.

See the SDK-specific integration code

Then, pick the options/features for your integration. We can opt-in for call invitations, face beautification, screen sharing, and more.

After clicking on “Save & Start to integrate”, you’ll be prompted with the AppID and the AppSign (the key) for the integration.

Copy the AppID and the AppSign

Do NOT share this with anyone! Note these keys for future reference.

You can visit the Quick Start guide to see how you can integrate this into your app, but it’s quite simple.

I’m going to use their demo project that has all the configurations to get started with. But I highly recommend going through the full guide to know more information on integrating the service into your own app.

Go to the example Flutter app GitHub repo and download the code. You can also clone the repo if you’d like. To see examples in other frameworks, check out all the repositories of ZEGOCLOUD.

Open call_with_offline_invitation using VSCode or any IDE you use for Flutter development.

Remember the keys you noted in the ZEGOCLOUD console? Now we need them!

Open call_with_offline_invitation/lib/login_service.dart and add those keys to the corresponding variable.

Install the dependencies and run the app.

flutter pub get
cd ios
pod install --repo-update 
# Apple Silicon -> arch -arm64e pod install --repo-update
flutter run

Demo

To test this call feature, we need to run the app on two separate devices. For this, we can either spin up another simulator (using XCode) or deploy it to two physical devices.

You’ll see a window like below. Click on “Login” to proceed.

Click on any of the users, and you’ll get the below screen. It shows your current user ID. Note down this ID from the other device and enter it here.

Then tap the voice call or the video call button and viola!

Decoding the code

If we dig into the code, we’ll see that this app simply uses the UIKit widgets to trigger the video calls.

Widget callButton(bool isVideoCall) {
    return ValueListenableBuilder<TextEditingValue>(
      valueListenable: inviteeUsersIDTextCtrl,
      builder: (context, inviteeUserID, _) {
        var invitees = getInvitesFromTextCtrl(inviteeUsersIDTextCtrl.text);

        return ZegoSendCallInvitationButton(
          isVideoCall: isVideoCall,
          invitees: invitees,
          resourceID: "zegouikit_call",
          iconSize: const Size(40, 40),
          buttonSize: const Size(50, 50),
          onPressed: onSendCallInvitationFinished,
        );
      },
    );
  }

And, this line of code in login_service.dart listens to incoming calls. How simpler can it be?

void onUserLogin() {
  
  ZegoUIKitPrebuiltCallInvitationService().init(
    appID:  /*input your AppID*/,
    appSign: "--" /*input your AppSign*/,
    userID: currentUser.id, <-- sets the current user ID
    ...
  );
}

And we can use the userName field to inject our own IDs of our app to enable users to call each other.

After going through the rest of the examples in the ZEGOCLOUD GitHub account, I think this is probably the best and easiest way to add communication features to our apps.

Check them out in the below links.

Engineer to Manager

becoming a manager

Leave a Reply