Video Call App using Flutter and ZEGOCLOUD

Hey guys, welcome back. So today we will be learning how to create a simple video calling app using Flutter and ZEGOCLOUD. Before we dive in lets get familiar with what is ZEGOCLOUD.

What is ZEGOCLOUD?

ZEGOCLOUD is a professional audio and video global cloud service provider dedicated to providing quality real-time audio and video services. These services include video calls, video conferencing, audio calls and even live streaming. It uses Express Video SDK that is a fully featured and Robust SDK. It provides high quality videos with low latency (low network bandwidth). Apart from that it is easy to integrate and beginner friendly for developers. ZEGOCLOUD provides 10,000 free minutes for developers to build powerful communication applications.

It even provides UIKits and SDK’s to build customized UI. Today we will be mainly focusing on building a video chat app using UI kits.

Pre-requisites

1. Flutter version > 1.12
2. ZEGOCLOUD account
3. Basic knowledge about Flutter

Video tutorial

I have also uploaded a video tutorial in YouTube. Make sure to check it out and hit the like and subscribe button if you guys found it useful.

Let’s get started

Open Android Studio and create a new Flutter Project

Select NEW FLUTTER PROJECT to begin

After that provide a name to your project. Note that the name should only have lower case letters and underscores. Then check the flutter SDK path and click finish.

Once the project is created, in main.dart clear the starting code and inside runApp() call the MaterialApp() widget. After that, inside the lib folder we will add 2 more files — homescreen.dart and vidchat_screen.dart

Here as the names suggest we will be creating the Home Screen or Landing Screen in homescreen.dart and the Video Call Screen will be in the vidchat_screen.dart . In main.dart we will call the Landing Screen. The code is as given below.

import 'package:flutter/material.dart';
import 'homescreen.dart';

void main() {
  runApp(
    MaterialApp(
      home: LandingScreen(),
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
      ),
    ),
  );
}

Here we have imported the homescreen.dart file and also used a custom theme with deep orange color as the primary color.

Next we will implement the landing screen UI. Here we will be doing a simple UI with an AppBar() and a button. The button will take us to a video call room. We will be using a Stateless widget for this.

First things first, we will import the flutter material.dart and the vidchat_screen.dart . Apart from that we will be also importing the dart math library as well. This is done so that we can generate a random number to each user joining the video chat room.

import 'dart:math';
import 'package:flutter/material.dart';
import 'vidchat_screen.dart';

Next we will create the Landing Screen by extending the Stateless widget. Below is the code for the UI.

class LandingScreen extends StatelessWidget {
  const LandingScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String conferenceId = "conference_id";
    String userId = Random().nextInt(1000).toString();
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Video Chat Demo"),
          centerTitle: true,
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) {
                    return VideoChatScreen(
                      conference_id: conferenceId,
                      user_id: userId,
                    );
                  },
                ),
              );
            },
            child: Text("Join Video chat"),
          ),
        ),
      ),
    );
  }
}

Here a String value conference_id is given. This is basically the video chat room id with which users can join. It can be also given as a value accepted from a TextFormField() . By doing so a user can join different video chat rooms with different values. But here since we will be using a single meeting room only, we will be giving the conference_id value as a constant string value. The userId will be storing the random numbers generated to indicate the different users joining the meeting.

These values will be passed over to the Meeting Room, when the Elevated button in the center is pressed along with navigating to that screen. Next we will be diving deep into the Video Chat Room Screen where we will be making use of ZEGOCLOUD SDK.

In vidchat_screen.dart also, we will be using a Stateless widget. Here we will be implementing the UI using the prebuilt UI kits of ZEGOCLOUD. In order to do that first we have to import the prebuilt video conferencing ui kit into our app. For this in terminal, run the command

flutter pub add zego_uikit_prebuilt_video_conference

This will add the zego_uikit_prebuilt_video_conference package into our app and can be seen in the dependencies section of pubspec.yaml as shown below

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  zego_uikit_prebuilt_video_conference: ^1.1.12

After this is done, in vidchat_screen.dart import the package to use the Video Conference UI kit along with flutter material.dart.

import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_video_conference/zego_uikit_prebuilt_video_conference.dart';

Next create a Stateless widget and recieve the values passed from Landing Screen. Afterwards use the ZEGOCLOUD prebuilt UI kit to create the UI in the build method as given below.

class VideoChatScreen extends StatelessWidget {
  final String conference_id;
  final String user_id;
  const VideoChatScreen(
      {Key? key, required this.conference_id, required this.user_id})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ZegoUIKitPrebuiltVideoConference(
      appID: "YOUR APP ID",
      appSign:
          "YOUR APP SIGN",
      conferenceID: conference_id,
      userID: user_id,
      userName: "user $user_id",
      config: ZegoUIKitPrebuiltVideoConferenceConfig(
        turnOnMicrophoneWhenJoining: false,
      ),
    );
  }
}

In the above code, to get appID and appSign values we will need to create a project in the ZEGOCLOUD project dashboard. To access the project dashboard click here.

In the console you will be prompted to the window as shown below

If you already have an account directly login else sign up by filling in the details to create one.

Once you have your account created, click on create new project

Next choose the use case of our project. For our purpose we will be using the Voice & Video Calls use case.

After that give your project a suitable name

Then for our purpose we will start with UI kits as shown below. In that the code used for each platform is also given so we as developers can better understand it.

Once our project is successfully build we will see a button with a text saying start building your app

Click the button and then we will be prompted to select the framework for our project. Choose Flutter as the Framework for the project

Afterwards in the UI configuration make sure it is in 1-on-1 call. In case you want to create a project with group video chat then select the group call.

Once that is done go back to your Overview tab. There we will see the project that we have created just now. Click on it.

Once the project is opened copy the AppID and AppSign and paste it into your code in vidchat_screen.dart

Instead of “YOUR APP ID” paste your AppID. AppID is not a String so it is pasted as it is. For AppSign it needs a String value. So paste the AppSign instead of “YOUR APP SIGN”.

ZegoUIKitPrebuiltVideoConference(
      appID: "YOUR APP ID",
      appSign:
          "YOUR APP SIGN",
      conferenceID: conference_id,
      userID: user_id,
      userName: "user $user_id",
      config: ZegoUIKitPrebuiltVideoConferenceConfig(
        turnOnMicrophoneWhenJoining: false,
      ),
    );

The remaining properties are assigned based on the values passed vid constructor. The config property takes a ZegoUIKitPrebuiltVideoConferenceConfig() , and the video call configurations such as turning on the mic or camera when user joins, what to do when user leaves the video chat room, usage of speakers when joining etc. which are part of it, can be configured.

Now before we run our app we have some more configurations to be done. Let’s dive into that

Android Configurations

First open the android/app/build.gradle file. Modify the compileSdkVersion under the android block to 33

android {
    compileSdkVersion 33

Next we have to add the permissions. For that open your android/app/src/main/AndroidManifest.xml file and add the following lines of code inside the <manifest> tag before the <application> tag.

<uses-permission android:name=”android.permission.ACCESS_WIFI_STATE” />
<uses-permission android:name=”android.permission.RECORD_AUDIO” /> 
<uses-permission android:name=”android.permission.INTERNET” /> 
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” /> 
<uses-permission android:name=”android.permission.CAMERA” /> 
<uses-permission android:name=”android.permission.BLUETOOTH” /> 
<uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” /> 
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” /> 
<uses-permission android:name=”android.permission.READ_PHONE_STATE” /> 
<uses-permission android:name=”android.permission.WAKE_LOCK” />

After that create a file proguard-rules.pro inside android/app folder. This is done to prevent obfuscation of the SDK public class names.

In proguard-rules.pro add the following lines of code.

-keep class **.zego.** { *; }

Now we will add the following config code to the release part of android/app/build.gradle

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

Once that is done we are done with the android configurations. Moving on we will be implementing the iOS configurations.

iOS Configurations

For iOS we need to add the app permissions. For that add the following lines of code in ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a video conference</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a video conference</string>

That’s it!😀 Now run the app and try it out with your friends. If you like this story make sure to leave a clap and comment your feedbacks.