Call Kit
  • iOS
  • Android
  • Web
  • Flutter : Dart
  • React Native
  • Overview
  • Quick start
    • Quick start
    • Quick start (with call invitation)
  • Customize the call
    • Overview
    • Set avatar for users
    • Add custom components to the call
    • Configure layouts
    • Hide the label on the user view
    • Implement an audio-only call
    • Customize the menu bar
    • Set a hangup confirmation dialog
    • Call invitation config
    • Calculate call duration
  • Enhance the call
    • Screen sharing
    • Minimize video call window
    • Advanced beauty effects
  • Migration guide
  • Troubleshooting call invitations

Quick start

Last updated:2023-07-17 11:17

Integrate the SDK

Add ZegoUIKitPrebuiltCall as dependencies

Run the following code in your project root directory:

flutter pub add zego_uikit_prebuilt_call

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

Using the ZegoUIKitPrebuiltCall in your project

  • Go to ZEGOCLOUD Admin Console, get the appID and appSign of your project.
  • Specify the userID and userName for connecting the Call Kit service.
  • Create a callID that represents the call you want to make.
  • 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(),
    );
  }
}

Now, you can make a new call by navigating to this CallPage.

Configure your project

  • Android:
  1. If your project is created with Flutter 2.x.x:

a. Modify the compileSdkVersion to 33 in the your_project/android/app/build.gradle file.

compileSdkVersion

b. Modify the minSdkVersion in the same file:

minSdkVersion 21

/Pics/ZegoUIKit/Flutter/android_class_confusion.png

  1. Set the Kotlin & Gradle versions:

a. Modify the kotlin version to >= 1.8.0 and the gradle classpath version to 7.3.0 in the your_project/android/app/build.gradle file:

buildscript {
    ext.kotlin_version = '1.8.0'
    repositories {
        google()
        mavenCentral()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:7.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // support notification
        classpath 'com.google.gms:google-services:4.3.14'
    }
}

b. Make the gradle version >= 7.0: In the your_project/android/gradle/wrapper/gradle-wrapper.properties file, modify the distributionUrl to https\://services.gradle.org/distributions/gradle-7.4-all.zip.

distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip

kotlin180.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" />
    /Pics/ZegoUIKit/Flutter/permission_android.png
  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.** { *; }

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. Add app permissions.

a. Open the your_project/ios/Podfile file, and add the following to the post_install do |installer| part:

# Start of the permission_handler configuration
target.build_configurations.each do |config|
  config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
    '$(inherited)',
    'PERMISSION_CAMERA=1',
    'PERMISSION_MICROPHONE=1',
  ]
end
# End of the permission_handler configuration

b. Open the your_project/ios/Runner/Info.plist file, and add the following to the dict part:

    <key>NSCameraUsageDescription</key>
    <string>We require camera access to connect</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>We require microphone access to connect</string>
2. Disable Build Libraries for Distribution
  1. Open the your_project > iOS > Runner.xcworkspace file.

  2. Select your target project, and follow the notes on the following image to disable the Build Libraries for Distribution.

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

Custom prebuilt UI

Resources

Page Directory