Posted onApr 12, 2023

Create a Flutter Video Call App with ZEGOCLOUD

#zegocloud #videocall #flutter

Have you ever thought or had to integrate communication features in you application and the complexity almost turned you off? or even many times wouldn't just work.

In this technical write-up, I will be showing you a seamless solution to achieve many communication features within your app in Flutter usingZegocloud without having to reinvent the wheel. Zegocloud is a global communication service provider which providespowerful communication SDKs & APIs for app development (chat messaging, video and voice calls, video conference and live-streaming) with developer-friendly environment and features like:

Ready-to-use 1-on-1/group calls
Customizable UI styles
Real-time sound waves display
Device management
Switch views during a 1-on-1 call
Extendable menu bar
Participant list
Call invitation/Offline call invitation
Custom call ringtones
Screen sharing

Throughout this write-up, we will go step-by-step on how to set up a new Flutter project, configure your flutter project, and integrate Zegocloud into our app. I will include code snippets and images to help you follow along andbuild your own video call app with Zegocloud using Flutter.

Prerequisites:
Basic knowledge of Flutter and Dart

Step 1: Set up a Zegocloud Account:
Go tohttps://console.zegocloud.com/account/signup to Sign Up

Bonus:

Once, your account is setup... your console should look like this:

Step 2: Set up a new Flutter project

Open Android Studio/VS Code and create a new Flutter project.

or run

flutter create zego_call

Once your project is setup, we need to add the ZegoCloud UIKit Dependency for 1-on-1 calls

run

flutter pub add zego_uikit_prebuilt_call

Your pubspec.yaml should be updated as shown:

Step 3: Create a Zegocloud Project from your console

Click onCreate your project from the console and you will be redirected to the screen shown below:

There are varieties to choose from, but for the sake of this tutorial we will be using theVoice & Video Call, click NEXT and enter preferred project name.

Then clickStart with UIKits

Wait for the console to create your project and you will be redirected to your project page with all your project info.

Step 4: Implement Zegocloud dependency in your project
Now that we have created a project on the console, we need to create our screens:

In yourmain.dart file, add the following code:

import 'package:flutter/material.dart';import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';void main() {  runApp(const MainApp());}class MainApp extends StatelessWidget {  const MainApp({super.key});  @override  Widget build(BuildContext context) {    return const MaterialApp(      home: MyApp(),    );  }}class MyApp extends StatelessWidget {  const MyApp({super.key});  @override  Widget build(BuildContext context) {    return Scaffold(      body: SizedBox(        width: double.infinity,        child: Column(            mainAxisAlignment: MainAxisAlignment.center,            crossAxisAlignment: CrossAxisAlignment.center,            children: [              const Text(                'ZegoCloud\nVideo Call Kit',                textAlign: TextAlign.center,                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),              ),              const SizedBox(                height: 100,              ),              SizedBox(                  width: 300,                  height: 52,                  child: ElevatedButton(                    onPressed: () {                      Navigator.of(context).push(MaterialPageRoute(                          builder: ((context) =>                              const CallPage(callID: 'ifeoluwa'))));                    },                    style: ButtonStyle(                        backgroundColor: MaterialStateProperty.all<Color>(                            const Color.fromRGBO(95, 51, 255, 1))),                    child: const Text('Start Call'),                  )),            ]),      ),    );  }}

Create a stateless callpage below themain.dart file and add the code, this is where we consume the prebuilt UI kit by zegocloud and pass in the appID and appSign which can be gotten from the project console

class CallPage extends StatelessWidget {  const CallPage({Key? key, required this.callID}) : super(key: key);  final String callID;  @override  Widget build(BuildContext context) {    return ZegoUIKitPrebuiltCall(        appID:            1873850625, // Fill in the appID that you get from ZEGOCLOUD Admin Console.        appSign:            "9adffd105b8fd9925f617746797f340e5f9a10c5ba36738b0edda8de3bcb16f7", // Fill in the appSign that you get from ZEGOCLOUD Admin Console.        userID: 'usos2345dhdoee',        userName: 'popop',        callID: callID,        // You can also use groupVideo/groupVoice/oneOnOneVoice to make more types of calls.        config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()        // ..onOnlySelfInRoom = () => Navigator.of(context).pop(),        );  }}

Our Screen should be like this:

Step 5: Configure your flutter project

For your app to perform properly you need to require some permissions on the device.

Android:

Open the project_directory/android/app/build.gradle file, and modify thecompileSdkVersion to33

...android {    compileSdkVersion 33    ndkVersion flutter.ndkVersion... defaultConfig {        minSdkVersion 21    }...

Open the file project_directory/app/src/main/AndroidManifest.xml add the following code just 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" />

Open the project_directory/android/app folder, create a file namedproguard-rules.pro and add the code below:

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

then save.

Open the project_directory/android/app/build.gradle file again, then add the code below under buildTypes:

...buildTypes {        release {            // TODO: Add your own signing config for the release build.            // Signing with the debug keys for now, so `flutter run --release` works.            signingConfig signingConfigs.debug            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'        }    }...

iOS:

Open the project_directory/ios/Runner/Info.plist file, then add the following code:

...<key>NSCameraUsageDescription</key><string>We require camera access to connect to a call</string><key>NSMicrophoneUsageDescription</key><string>We require microphone access to connect to a call</string>...

Awesome! Our Video call App implementation is ready, you can now run your app and when you click the Start Call button, you should get the view below with all call features enabled.

You can find the sourcecode here:sourcecode

Or watch my Video Tutorial Here:CREATE A FLUTTER VIDEO CALL APP WITH ZEGOCLOUD

Beyond the Video call, Zegocloud provides a host of other communication SDKs and APIs which can be useful for you now or in your future developments and projects especially with its high scalability rate, hence be sure to explore and try new things with it and you may be on your way to building another Fortune 500 with less stress as Zegocloud handles all communications whilst you focus on your core.