DEV Community: Darkwa

How To Make A Chat App With ZEGOCLOUD In Flutter

Darkwa — Thu, 04 May 2023 13:14:03 +0000

Are you interested in creating your own chat app? Do you want to use Flutter and ZEGOCLOUD to make it happen? Well, you've come to the right place! In this article, we will guide you through the process of creating a chat app using Flutter and ZEGOCLOUD.

What is ZEGOCLOUD?

ZEGOCLOUD is a cloud platform that provides a range of services and tools to help developers build and deploy applications quickly and easily. One of the services that ZEGOCLOUD provides is the real-time communication,which is perfect for building chat applications.

I've shared a link to a video on my YouTube channel that exhibits a detailed procedure for building a chat app with zegocloud.

Getting Started

To get started, you will need to have Flutter installed on your machine. If you haven't done so already, head over to the flutter.dev and follow the installation instructions.Once you have flutter installed, you can create a new Flutter project using the following command:
flutter create my_chat_app

Setting up ZEGOCLOUD

To configure ZEGOCLOUD, begin by creating an account on the ZEGOCLOUD Admin Console after setting up a new Flutter project. Following this, create a new project and specify the desired use case, such as in-app chat. You'll also need to obtain your project's appID and appSign, which are essential for authenticating your requests to the ZEGOCLOUD API.

Implementing Real-time Communication

Now that you have set up ZEGOCLOUD, it's time to implement real-time communication in your Flutter app. First you will need to add the ZEGOCLOUD Flutter SDK to your project.
You can do this by adding the following dependency to your pubspec.yaml file:
dependencies: zego_zimkit: ^latest_version
or run the following command
flutter pub add zego_zimkit

The code below initializes the ZIMKit SDK with the required credentials to enable real-time communication features in your Flutter application. By following the steps outlined in the code comments and obtaining the necessary credentials from the ZEGOCLOUD Admin Console.

void main() {
  ZIMKit().init(
    appID: YourSecret.appID, // your appid
    appSign: YourSecret.appSign, // your appSign
  );
  runApp(YourApp());
}

ZIMKit().connectUser(id: id, name: name).then(_){
    Navigator.of(context).push(
        MaterialPageRoute(
            builder: (context) => const ZIMKitDemoHomePage(),
        ),
    );
}

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

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Conversations'),
          actions: const [HomePagePopupMenuButton()],
        ),
        body: ZIMKitConversationListView(
          onPressed: (context, conversation, defaultAction) {
            Navigator.push(context, MaterialPageRoute(
              builder: (context) {
                return ZIMKitMessageListPage(
                  conversationID: conversation.id,
                  conversationType: conversation.type,
                );
              },
            ));
          },
        ),
      ),
    );
  }
}

The code above shows how to connect a user to ZIMKit and navigate to the home page. It uses the ZIMKit().connectUser method to establish a connection to the user with the given id and name. Once the connection is established, the app navigates to the ZIMKitDemoHomePage using MaterialPageRoute.

The ZIMKitDemoHomePage is a StatelessWidget that displays a list of conversations using ZIMKitConversationListView. When a conversation is clicked, the app navigates to the ZIMKitMessageListPage widget, which displays the messages for the selected conversation.

The WillPopScope widget prevents the user from navigating back from the home page. The AppBar widget provides a title and an overflow menu with a HomePagePopupMenuButton. The ZIMKitConversationListView widget listens for user taps and passes the selected conversation to the ZIMKitMessageListPage.

Overall, this code demonstrates how to use ZIMKit to connect to a user, display a list of conversations, and navigate to a conversation's messages.

Configure Our project in Android and also setup permissions

Go to your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33

And in the same file, edit the minSdkVersion minSdkVersion 21

Add app permissions. Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:

<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" />

Prevent code obfuscation. To prevent obfuscation of the SDK public class names, do the following: a.In your project's your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below:

keep class **.zego.** { *; }
b.Add the following config code to the release part of the your_project/android/app/build.gradle file.
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
like this

Configuring it for IOS

To add permissions, open your_project/ios/Runner/Info.plist, and add the following code to the dict part:

<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>

Here's is the link to github source code

Conclusion

And there you have it, a complete guide to creating a chat app with ZEGOCLOUD in Flutter! We hope that you found this article helpful and that you are now ready to start building your own chat app. Remember to keep it simple,engage your users, and have fun!

How To Build The Video And Voice Call App With ZEGOCLOUD In React Native

Darkwa — Sat, 18 Mar 2023 22:27:38 +0000

Communication has become more essential than ever before in today's world, especially with the growing trend of remote work and social distancing. As a result, there is an increasing demand for reliable and efficient video and voice calling applications. This is where ZEGOCLOUD comes in - a leading real-time audio and video cloud service provider with more than two decades of experience in the industry. Their flexible and robust platform allows developers to build seamless live audio and video experiences on mobile and web platforms.

With ZEGOCLOUD's video/voice SDK and API, developers can easily create customized video and voice calling apps with minimal coding effort, enabling users to connect in real-time from anywhere in the world. This article will discuss how to build a video and voice call app with ZEGOCLOUD in React Native, offering a range of possibilities for your communication app development needs.

I have provided a link to a video on my YouTube channel that demonstrates the step-by-step process for integrating it.

The prebuilt feature, Call Kit, provided by ZEGOCLOUD comprises a comprehensive range of tools for constructing voice and video calls between individuals and groups within your app. With Call Kit, the development process is streamlined, as it includes all the essential business logic and user interface components, allowing you to customize the features based on your requirements.

Integrate the SDK
Add @zegocloud/zego-uikit-prebuilt-call-rn as dependencies

yarn add @zegocloud/zego-uikit-prebuilt-call-rn@3.0.0-beta.1

Add these dependencies as well

@zegocloud/zego-uikit-rn
react-delegate-component
zego-express-engine-reactnative @3.2.0
react-native-sound
@notifee/react-native

yarn add @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.2.0 react-native-sound @notifee/react-native

First, navigate to the ZEGOCLOUD Admin Console and get your project's appID and appSign.
Next, specify the userID and username that will be used to connect to the Call Kit service. Finally, create a callID to represent the call you want to make.

To navigate to the call page while passing in the appID, appSign, userID, and userName, include this code. Please note that both userID and callID must only include alphanumeric characters and underscores (_). Participants using the same callID will be able to communicate with one another.

// App.js
import React, { Component } from 'react';
import {ZegoUIKitPrebuiltCall, ONE_ON_ONE_VIDEO_CALL_CONFIG } from '@zegocloud/zego-uikit-prebuilt-call-rn'

export default function VoiceCallPage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltCall
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID} // userID can be something like a phone number or the user id on your own user system. 
                userName={userName}
                callID={callID} // callID can be any unique string. 

                config={{
                    // You can also use ONE_ON_ONE_VOICE_CALL_CONFIG/GROUP_VIDEO_CALL_CONFIG/GROUP_VOICE_CALL_CONFIG to make more types of calls.
                    ...ONE_ON_ONE_VIDEO_CALL_CONFIG,
                    onOnlySelfInRoom: () => { props.navigation.navigate('HomePage') },
                    onHangUp: () => { props.navigation.navigate('HomePage') },
                }}
            />
        </View>
    );
}

Configure project in Android and also setup permissions

Go to your_project/android/app/src/main/AndroidManifest.xml file, and add the following permission

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

Open the my_project/android/app/proguard-rules.pro file and add the following

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

Configure project in IOS and also setup permissions

Open the my_project/ios/my_project/Info.plist file and add the following

<key>NSCameraUsageDescription</key>
<string>We need to use the camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>We need to use the microphone</string>

Voila! You can now run and test your app.

Here's is the link to github source code

To summarize, ZEGOCLOUD's video/voice SDK and API provide a convenient and effective way for developers to add real-time audio and video communication to their mobile and web applications. The platform's advanced features, such as interactive live streaming, video conferencing, and low-latency transmission, handle the intricacies of real-time communication, freeing developers to focus on building engaging user experiences.

Additionally, ZEGOCLOUD's Call Kit feature simplifies the development process by offering pre-built tools and UI components that can be easily customized to meet specific app requirements. By following the steps outlined in this article, developers can seamlessly integrate ZEGOCLOUD's Call Kit feature into their projects and begin creating high-quality, uninterrupted video and voice call functionality within minutes.

Overall, ZEGOCLOUD's platform delivers a groundbreaking and robust solution for developers seeking to incorporate real-time audio and video experiences into their applications. With its user-friendly interface and extensive toolkit, ZEGOCLOUD streamlines the process of building high-quality, interactive applications that offer users a seamless and delightful communication experience.

How to Build the Video and Voice Call app with ZEGOCLOUD in Flutter

Darkwa — Tue, 21 Feb 2023 18:38:15 +0000

Video and voice communication has become an essential part of our daily lives, both in personal and professional settings. Whether it's connecting with friends and family, hosting virtual events, or conducting remote meetings, the ability to communicate in real-time via audio and video is crucial.

If you're a developer looking to incorporate these capabilities into your mobile or web application, you may find yourself facing a steep learning curve. Fortunately, ZEGOCLOUD offers a solution that simplifies the process of integrating live audio and video experiences into your app.

In this article, we'll explore how to build a video and voice call app using ZEGOCLOUD's SDK and API in Flutter.

By the end of this tutorial, you'll have the knowledge and tools you need to create a fully functional video and voice call app, complete with real-time communication, interactive live streaming, and video conferencing capabilities. So, let's get started!

ZEGOCLOUD offers a prebuilt feature called Call Kit, which includes a comprehensive set of tools for building one-on-one and group voice/video calls in your app. Call Kit is designed to simplify the development process by providing all the necessary business logic and user interface components, so you can add or remove features according to your specific needs.

With Call Kit, you can quickly integrate audio and video communication features into your app with just a few lines of code. The prebuilt UI components make it easy to customize the appearance and behavior of the call interface, giving you full control over the user experience.

Whether you're building a video conferencing app or a social networking platform, Call Kit offers a powerful and flexible solution for incorporating audio and video communication capabilities into your app.

Here's a video link to my youtube channel showing you the steps by steps to integrate it

You can also follow the article as well

1.Integrate the SDK
Add ZegoUIKitPrebuiltCall as dependencies
flutter pub add zego_uikit_prebuilt_call

2.Import the SDK in you code
package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart

3.To use the ZegoUIKitPrebuiltCall feature in your project, follow these steps:

First, navigate to the ZEGOCLOUD Admin Console and retrieve your project's appID and appSign.
Next, specify the userID and username that will be used to connect to the Call Kit service. Finally, create a callID to represent the call you want to make. By completing these steps, you will be able to easily integrate the ZegoUIKitPrebuiltCall feature into your project, allowing you to quickly and efficiently build video and voice call functionality into your app.

Add this code to navigate to the call page passing in the appID, appSign, userID and userName

userID and callID can only contain numbers, letters, and underlines (_).
Users that join the call with the same callID can talk to each other.

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: yourAppID, // Fill in the appID that you get from ZEGOCLOUD Admin Console.
      appSign: yourAppSign, // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
      userID: 'user_id',
      userName: 'user_name',
      callID: callID,
      // You can also use groupVideo/groupVoice/oneOnOneVoice to make more types of calls.
      config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall() 
        ..onOnlySelfInRoom = () => Navigator.of(context).pop(),
    );
  }
}

Configure Our project in Android and also setup permissions

Go to your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33

And in the same file, edit the minSdkVersion minSdkVersion 21

Add app permissions. Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:

<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" />

Prevent code obfuscation. To prevent obfuscation of the SDK public class names, do the following: a.In your project's your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below:

Configuring it for IOS

To add permissions, open your_project/ios/Runner/Info.plist, and add the following code to the dict part:

<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>

So that's basically it you can run and test your app
In conclusion, ZEGOCLOUD's video/voice SDK and API provide developers with an easy and efficient way to incorporate real-time audio and video communication into their mobile and web applications. With features such as interactive live streaming, video conferencing, and low-latency transmission, ZEGOCLOUD's platform handles the complexities of real-time communication, enabling developers to focus on building engaging user experiences.

Moreover, ZEGOCLOUD's Call Kit feature simplifies the development process by providing pre-built tools and UI components that can be easily customized to meet specific app requirements. By following the steps outlined in this article, developers can quickly integrate ZEGOCLOUD's Call Kit feature into their projects and start building high-quality, seamless video and voice call functionality in just minutes.

Overall, ZEGOCLOUD's platform offers an innovative and powerful solution for developers looking to create engaging, real-time audio and video experiences in their applications. With its user-friendly interface and comprehensive set of tools, ZEGOCLOUD makes it easy to build high-quality, interactive applications that offer users a seamless and enjoyable communication experience.