How to Build a Video Call App Using ZEGOCLOUD SDK and Flutter

ZEGOCLOUD is a real-time audio and video communication cloud platform that provides SDKs and APIs for developers to build audio and video communication applications such as video call apps, live streaming apps, online education apps, and more.

ZEGOCLOUD provides a range of SDKs for different programming languages, including Java, Python, and Flutter. The Flutter SDK is specifically designed for building audio and video communication apps for mobile devices.

Using the ZEGOCLOUD Flutter SDK, developers can easily build video call apps How to make video call apps with flutter. In this article, we will walk through the process of building a video call app using the ZEGOCLOUD Flutter SDK.

Before building a video call app using the ZEGOCLOUD flutter video Call SDK, you need to obtain an App ID and an App Sign from the ZEGOCLOUD Console. These are unique identifiers that allow your app to connect to the ZEGOCLOUD platform and access its audio and video communication features.
Here are the steps to obtain an App ID and an App Sign:

1. Go to the ZEGOCLOUD Console website Console

2.Create an account by entering your personal information.

3.After creating an account, you will be prompted to create a project. Click the "Create" button to create a new project.

4.Enter a name for your project and select the appropriate region for your project. Then click the "Create" button.

4.Once your project is created, you will be redirected to the project dashboard.

5.You will see your App ID and App Sign displayed on the page. Make a note of these values as you will need them later when configuring your app.

Note: The App Sign is a secret value that should not be shared with anyone. Keep it safe and secure.

Create the Flutter Application

Let's move on to creating our Flutter application:

Use the command "flutter create flutter_VideoCall" to create the project.

Next, we need to install zego_uikit_prebuilt_call

flutter pub add zego_uikit_prebuilt_call
Launch the project using your preferred Integrated Development Environment (IDE), and perform some initial adjustments to ensure that the project runs smoothly.
Begin by accessing android/app/build.gradle and making modifications to the below-listed values:

• compileSdkVersion 33
• minSdkVersion 22
• targetSdkVersion 33

It is necessary to specify the permissions that the application will require. This can be done by adding the permission declarations within the manifest tag in the AndroidManifest.xml file:

 <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" />
    <!-- only invitation -->
    <uses-permission android:name="android.permission.VIBRATE"/>

Add the following permissions to your Info.plist file for iOS:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>

Alright, now that we have made the necessary configurations, let's start writing our Dart code. You can replace the code inside the lib/main.dart file with the following:

import 'package:flutter/material.dart';
import'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'dart:math' as math;
final String userID=math.Random().nextInt(1000).toString();
void main() {

  runApp(const MyApp());
}
class MyApp extends StatelessWidget{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  videocalling(),
    );
  }
}
class videocalling extends StatefulWidget {
  @override
  State<videocalling> createState() => _videocallingState();
}
class _videocallingState extends State<videocalling> {
final _controller=TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Zego Cloud Video Calling"),
          centerTitle: true,
        ),
        body:Column(
          children: [
            TextFormField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: "Enter UId"
              ),

            ),
            ElevatedButton(onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (builder)=>cllingId(CallingId: _controller.text.toString())));
            }, child: Text("Join")),
          ],
        )
    );
  }
}
class cllingId extends StatelessWidget {
  final String CallingId;
  const cllingId({required this.CallingId});
  @override
  Widget build(BuildContext context) {
    return SafeArea(child: ZegoUIKitPrebuiltCall(appID: appID,
      appSign: appsign,
      callID: CallingId,
      userID: userID,
      userName:"user_$userID" ,
      config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()..onOnlySelfInRoom=(context){
      Navigator.pop(context);
      },

    ));
  }
}

Assuming that you have correctly configured the necessary settings, you should now be able to initiate a video call using the application. To do so, you can replace the code in lib/main.dart with the provided code snippet.

Conclusion

We have seen how to use the ZegoCloud Flutter SDK to build a video call app. We started by obtaining an App ID and an App Sign from the ZegoCloud Console, which allowed us to connect to the ZegoCloud platform and access its audio and video communication features. Then, we created a Flutter application and added the necessary dependencies to it. Finally, we wrote Dart code to implement the video call functionality, which included initializing the SDK, joining a room, and publishing or subscribing to a stream. By following these steps, you should now be able to build your own video call app using the ZegoCloud Flutter SDK.
Sign up for 10,000 free mins
Find out more about ZEGOCLOUD