DEV Community

Cover image for Optimizing Group Calling Experience with ZEGOCLOUD SDK in flutter
CodingWithZohaib
CodingWithZohaib

Posted on • Updated on

Optimizing Group Calling Experience with ZEGOCLOUD SDK in flutter

ZEGOCLOUD is a cloud-based totally platform that offers builders with the gear they want to build actual-time audio and video verbal exchange applications. The platform offers a ramification of features, which include SDKs, APIs, and documentation, that make it easy to create audio and video packages. it's far used by a spread of corporations and agencies, inclusive of video conferencing agencies, live streaming structures, and online schooling vendors.
ZEGOCLOUD is used by video conferencing groups to provide video conferencing services to their users.
ZEGOCLOUD presents a broad variety of software program improvement kits (SDKs) catering to exceptional programming languages, like Java, Python, and Flutter. specially, the Flutter SDK stands proud for its great suitability in designing and constructing high-overall performance audio and video verbal exchange apps for mobile gadgets. Its characteristic-wealthy toolkit empowers builders to create apps with no trouble and efficiency.
ZEGOCLOUD
the usage of the ZEGOCLOUD Flutter SDK, developers can easily build group calling apps How to make Group calling apps with flutter. In this newsletter, we are able to walk through the manner of constructing a group calling app the use of the ZEGOCLOUD Flutter SDK.
The ZEGOCLOUD Flutter SDK presents a handy manner for builders to construct organization calling programs. to illustrate this, we have prepared a tutorial on constructing a collection calling app with the ZEGOCLOUD Flutter SDK, which may be discovered right here: How to make Group calling apps with flutter. the academic outlines the step-by means of-step procedure of using the ZEGOCLOUD Flutter SDK to create a organization calling app.
Group calling

so as to broaden a set calling application the use of the ZEGOCLOUD flutter Group Calling SDK, it is vital to acquire an App identification and App signal from the ZEGOCLOUD Console. those are wonderful identifiers that provide your software access to audio and video communication abilities and permit it to connect with the ZEGOCLOUD platform.

Right here are the steps to attain AppID and AppSign:

1.Navigate to the ZEGOCLOUD Console internet site Console.
2.register for an account via providing your non-public info.

3.After registering, you will be prompted to create a brand new mission. click the "Create" button to continue.

Create project

four.name your mission and select the ideal place. later on, hit the "Create" button to verify.

Name

four.you will be taken to the venture dashboard once your mission has been created.

5.Your AppID and AppSign will be proven on the web page. Please maintain a file of those values as you may require them whilst setting up your app.

Observe: Your App sign is a confidential value that have to be saved at ease and no longer shared with all people.

Putting in place the Flutter application

Allow get began by means of putting in our Flutter utility:

Create the project by way of executing the "flutter create flutter_GroupCall" command.

Next, we need to install zego_uikit_prebuilt_call
flutter pub add zego_uikit_prebuilt_call
launch the assignment the use of your IDE, and perform a few preliminary modifications to make certain that the assignment runs smoothly.
begin by gaining access to android/app/build.gradle and making adjustments to the under-listed values:

  1. compileSdkVersion 33
  2. minSdkVersion 22

3.targetSdkVersion 33
build.gradle
It's far vital to specify the permissions that the application would require. this may be accomplished by adding the permission declarations inside the show up tag within the AndroidManifest.xmlrecord:

 <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"/>
Enter fullscreen mode Exit fullscreen mode

Permission
Upload the subsequent permissions add 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>
Enter fullscreen mode Exit fullscreen mode

Now that we've finished the vital configurations, we will start writing our Dart code. to start, you may substitute the code in the lib/main.dart record with the code supplied underneath:

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:  Groupcalling(),
    );
  }
}
class Groupcalling extends StatefulWidget {
  @override
  State<Groupcalling> createState() => _GroupcallingState();
}
class _GroupcallingState extends State<Groupcalling> {
final _controller=TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ZEGOCLOUD Group 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.groupVideoCall()..onOnlySelfInRoom=(context){
      Navigator.pop(context);
      },
    ));
  }
}

Enter fullscreen mode Exit fullscreen mode

Once you've got configured the specified settings efficaciously, you need to be capable of begin a group calling using the provided code.

Overview

ZEGOCLOUD Flutter SDK. This involved obtaining an App ID and App Sign from the ZEGOCLOUD Console, which allowed us to connect to the platform and access its audio and video communication features. Subsequently, we created a Flutter application and integrated the required dependencies. Finally, we implemented the Group calling functionality by using Dart code to initialize the SDK, join a room, and publish or subscribe to a stream. By following these procedures, you can develop your Group calling app using the ZEGOCLOUD Flutter SDK.
Sign up for 10,000 free mins

Find out more about ZEGOCLOUD

Top comments (0)