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

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:

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>

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.