Call Kit
  • iOS
  • Android
  • Web
  • Flutter : Dart
  • React Native
  • Overview
  • Quick start
  • Custom prebuilt UI
  • Advanced features
  • Migrating to v3.0

Quick start (with call invitation)

Last updated:2023-03-17 17:47

invitation_calls.gif

Prerequisites

Add ZegoUIKitPrebuiltCall as a dependency

  1. Run the following code in your project root directory:
flutter pub add zego_uikit_prebuilt_call
flutter pub add zego_uikit_signaling_plugin

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  zego_uikit_prebuilt_call: ^3.0.0-dev.1
  1. Run the following code in your project root directory to install all dependencies.
flutter pub get

Import the SDK

Now in your Dart code, import the prebuilt Call Kit SDK.

import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';
import 'package:zego_uikit_signaling_plugin/zego_uikit_signaling_plugin.dart';

Integrate the SDK

Initialize the call invitation

To receive the call invites from others and let the calling notification show on the top bar when receiving it, you will need to initialize the call invitation service (ZegoUIKitPrebuiltCallInvitationService) first.

  1. Set up the context.

To make the UI show when receiving a call invite, you will need to get the Context. To do so, do the following 3 steps:

  • 1.1 Define a navigatorkey.
  • 1.2 Set the navigatorKey to ZegoUIKitPrebuiltCallInvitationService.
  • 1.3 Register the navigatorKey to MaterialApp.
  1. Initialize/Deinitialize the call invitation service.
  • 2.1 Initialize the service when your app users logged in successfully or re-logged in after an exit.
  • 2.2 Deinitialize the service after your app users logged out.
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  /// 1.1 define a navigator key
  final navigatorKey = GlobalKey<NavigatorState>();

  /// 1.2: set navigator key to ZegoUIKitPrebuiltCallInvitationService
  ZegoUIKitPrebuiltCallInvitationService().setNavigatorKey(navigatorKey);

  runApp(MyApp(navigatorKey: navigatorKey));
}

class MyApp extends StatefulWidget {
  final GlobalKey<NavigatorState> navigatorKey;

  const MyApp({
    required this.navigatorKey,
    Key? key,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    if (/*the user of the app is logged in*/) {
      onUserLogin();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      /// 1.3: register the navigator key to MaterialApp
      navigatorKey: widget.navigatorKey,
      ...
    );
  }
}

/// on App's user login
void onUserLogin() {
  /// 2.1. initialized ZegoUIKitPrebuiltCallInvitationService
  /// when app's user is logged in or re-logged in
  /// We recommend calling this method as soon as the user logs in to your app.
  ZegoUIKitPrebuiltCallInvitationService().init(
    appID: yourAppID /*input your AppID*/,
    appSign: yourAppSign /*input your AppSign*/,
    userID: currentUser.id,
    userName: currentUser.name,
    plugins: [ZegoUIKitSignalingPlugin()],
  );
}

/// on App's user logout
void onUserLogout() {
  /// 2.2. de-initialization ZegoUIKitPrebuiltCallInvitationService
  /// when app's user is logged out
  ZegoUIKitPrebuiltCallInvitationService().uninit();
}

The parameters of the ZegoUIKitPrebuiltCallInvitationService().init

Property  Type  Required Description
appID
int 
Yes
The App ID you get from ZEGOCLOUD Admin Console
appSign
String 
Yes
The App Sign you get from ZEGOCLOUD Admin Console
userID
String 
Yes
userID can be something like a phone number or the user ID on your own user system. userID can only contain numbers, letters, and underlines (_).  
userName 
String
Yes
userName can be any character or the user name on your own user system.
plugins  
List< IZegoUIKitPlugin >
Yes
Fixed value. Set it to ZegoUIKitSignalingPlugin as shown in the sample. 
ringtoneConfig 
ZegoRingtoneConfig 
No
ringtoneConfig.incomingCallPath and ringtoneConfig.outgoingCallPath is the asset path of the ringtone file, which requires you a manual import. To know how to import, refer to Custom prebuilt UI
requireConfig  
ZegoUIKitPrebuiltCallConfig Function( ZegoCallInvitationData)? 
No
This method is called when you receive a call invitation. You can control the SDK behaviors by returning the required config based on the data parameter. For more details, see Custom prebuilt UI
notifyWhenAppRunningInBackgroundOrQuit
bool 
No
Change notifyWhenAppRunningInBackgroundOrQuit to false if you don't need to receive a call invitation notification while your app running in the background or quit.
isIOSSandboxEnvironment
bool
No
To publish your app to TestFlight or App Store, set the isIOSSandboxEnvironment to false before starting building. To debug locally, set it to true. Ignore this when the notifyWhenAppRunningInBackgroundOrQuit is false.
androidNotificationConfig 
ZegoAndroidNotificationConfig?
No
This property needs to be set when you are building an Android app and when the notifyWhenAppRunningInBackgroundOrQuit is true. androidNotificationConfig.channelID must be the same as the FCM Channel ID in ZEGOCLOUD Admin Console, and the androidNotificationConfig.channelName can be an arbitrary value. 
innerText
ZegoCallInvitationInnerText
No
To modify the UI text, use this property. For more details, see Custom prebuilt UI.  

For more parameters, go to Custom prebuilt UI.

Add a button

Add the button for making call invitations, and pass in the ID of the user you want to call.

ZegoSendCallInvitationButton(
   isVideoCall: true,
   resourceID: "zegouikit_call",    // For offline call notification
   invitees: [
      ZegoUIKitUser(
         id: targetUserID,
         name: targetUserName,
      ),
      ...
      ZegoUIKitUser(
         id: targetUserID,
         name: targetUserName,
      )
   ],
)

Props of ZegoSendCallInvitationButton

Property   Type Required Description
invitees
List< ZegoUIKitUser >
Yes
The information of the callee. userID and userName are required. For example: [{ userID: inviteeID, userName: inviteeName }]
isVideoCall 
bool
Yes
If true, a video call is made when the button is pressed. Otherwise, a voice call is made.
resourceID 
String?
No
resourceID can be used to specify the ringtone of an offline call invitation, which must be set to the same value as the Push Resource ID in ZEGOCLOUD Admin Console. This only takes effect when the notifyWhenAppRunningInBackgroundOrQuit is true.
timeoutSeconds 
int
No
The timeout duration. It's 60 seconds by default.

For more parameters, go to Custom prebuilt UI.

Now, you can make call invitations by simply clicking on this button.

Configure your project

Android:

  1. If your project is created with Flutter 2.x.x, you will need to open the your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33.

    compileSdkVersion

  2. And in the same file, edit the minSdkVersion.

minSdkVersion 21

/Pics/ZegoUIKit/Flutter/android_class_confusion.png

  1. 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" />
<uses-permission android:name="android.permission.VIBRATE"/>
  1. 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.**  { *; }
-keep class **.**.zego_zpns.** { *; }

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'

/Pics/ZegoUIKit/Flutter/android_class_confusion.png

iOS:

  1. 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>
  2. To use the notifications and build your app correctly, navigate to the Build Settings tab, and set the following build options for your target app.

    /Pics/ZegoUIKit/Flutter/permission_ios.png

Refer to and set the following build options:

  • In the Runner Target:

    a. Build Libraries for Distribution -> NO

    b. Only safe API extensions -> NO

    c. iOS Deployment Target -> 11 or greater

  • In other Targets:

    a. Build Libraries for Distribution -> NO

    b. Only safe API extensions -> YES

Enable offline call invitation

If you want to receive call invitation notifications, do the following:

  1. Click the button below to contact ZEGOCLOUD Technical Support.

    ZEGOCLOUD
  2. Follow the instructions in the video below.

iOS:

Resource may help: Apple Developer

Android:

A. Add this line to your project's my_project/android/app/build.gradle file as instructed.

implementation 'com.google.firebase:firebase-messaging:21.1.0'

B. In your project's /app/src/main/res/raw directory, create a keep.xml file with the following contents:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools"
    tools:keep="@raw/*">
</resources>

call_keep_xml.png

Resource may help: Firebase Console

C. Check whether the local config is set up properly.

python3 zego_check_android_offline_notification.py
  • You will see the following if everything goes well:
    ✅ The google-service.json is in the right location.
    ✅ The package name matches google-service.json.
    ✅ The project level gradle file is ready.
    ✅ The plugin config in the app-level gradle file is correct.
    ✅ Firebase dependencies config in the app-level gradle file is correct.
    ✅ Firebase-Messaging dependencies config in the app-level gradle file is correct.
  1. Debugging using the sample code.

Considering the complicated steps of configuring the offline call invitation, we recommend you download the Sample code for debugging during your integration.

Run & Test

Now you have finished all the steps!

You can simply click the Run or Debug to run and test your App on your device.

/Pics/ZegoUIKit/Flutter/run_flutter_project.jpg

Resources