Introduction

Integrating video call functionality into a Flutter app can be done using ZEGOCLOUD's Video Call API. In this article, we will see how it is easy to integrate it with ZEGOCLOUD Flutter UI Kit. So, let's begin.

Step 1: Sign up for ZEGOCLOUD

To use ZEGOCLOUD's Video Call API, you first need to sign up for an account on the ZEGOCLOUD website.

After Signup, you will see a dashboard like this.

Step 2: Create an app and get the App ID

After signing up, you will need to create a new app in the ZEGOCLOUD dashboard. This will generate an App ID, we will need this API key to initialize ZEGOCLOUD API in Flutter App

Step 3: Add the ZEGOCLOUD Video Call API to your Flutter project

We will ZEGOCLOUD Flutter SDK to video call API in our flutter project. You can do this by installing the package from pub.dev by adding the dependency to your pubspec.yaml file.

Step 4: Initialize the API

In your main.dart file, you will need to import the ZEGOCLOUD Video Call API package and initialize it with your App ID. This can be done by creating an instance of the ZEGOCLOUD class and calling the initialize method, passing in your App ID as a parameter.

import 'package:zego_flutter_plugin/zego_flutter_plugin.dart';

class VideoCallPage extends StatefulWidget {
  @override
  _VideoCallPageState createState() => _VideoCallPageState();
}

class _VideoCallPageState extends State<VideoCallPage> {

  ZegoFlutter zego = ZegoFlutter();
  String roomID = "room1";
  String userID = "user1";
  String userName = "John Doe";

  @override
  void initState() {
    super.initState();
    // Initialize the ZEGOCLOUD Video Call API
    zego.initialize(appID: "YOUR_APP_ID", isTestEnv: true);
    // Login to the video call room
    zego.loginRoom(
        roomID: roomID,
        userID: userID,
        userName: userName,
        isJoinLive: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column()
  }
}

Step 5: Implement the video call functionality

Now we can start implementing the video call functionality in our Flutter app. You can use the ZEGOCLOUD Video Call API to create, join, and manage video calls.

ZEGOCLOUD API provides a range of methods for controlling the video and audio settings, as well as for managing the call participants.

import 'package:zego_flutter_plugin/zego_flutter_plugin.dart';

class VideoCallPage extends StatefulWidget {
  @override
  _VideoCallPageState createState() => _VideoCallPageState();
}

class _VideoCallPageState extends State<VideoCallPage> {

  ZegoFlutter zego = ZegoFlutter();
  String roomID = "room1";
  String userID = "user1";
  String userName = "John Doe";

  @override
  void initState() {
    super.initState();
    // Initialize the ZEGOCLOUD Video Call API
    zego.initialize(appID: "YOUR_APP_ID", isTestEnv: true);
    // Login to the video call room
    zego.loginRoom(
        roomID: roomID,
        userID: userID,
        userName: userName,
        isJoinLive: true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          // Show the local video stream
          Expanded(
            child: zego.buildLocalPreview(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height),
          ),
          // Show the remote video stream
          Expanded(
            child: zego.buildRemoteView(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height),
          ),
          // Add buttons for controlling the video call
          RaisedButton(
            onPressed: () {
              // Start the video call
              zego.startPreview();
              zego.startPublishing();
            },
            child: Text("Start Video Call"),
          ),
          RaisedButton(
            onPressed: () {
              // End the video call
              zego.stopPreview();
              zego.stopPublishing();
            },
            child: Text("End Video Call"),
          ),
        ],
      ),
    );
  }
}

In the above code, we first import the ZEGOCLOUD Flutter package, In the initState() method, we initialize the API by creating an instance of the ZEGOCLOUD package class and calling the initialize() method, passing in our App ID as a parameter. Next, we call the loginRoom() method to login to the video call room with a unique room ID, user ID, and user name.

In the build() method, we use the buildLocalPreview() and buildRemoteView() methods provided by the API to display the local and remote video streams. We also add two buttons for starting and ending the video call. When the start button is pressed, we call the startPreview() and startPublishing() methods to start the video call. When the end button is pressed

Step 6: Test your app

Once you have implemented the video call functionality, you should test your app to make sure it works as expected.

In this way, we can integrate ZEGOCLOUD's video call API with Flutter.

ZEGOCLOUD provides a comprehensive set of tools for adding video call functionality to your app, and the API is easy to use with Flutter.

For more information visit:

1. ZEGOCLOUD: https://www.zegocloud.com

2. Video call with ZEGOCLOUD: https://www.zegocloud.com/product/video-call

3. Flutter video call：https://www.zegocloud.com/blog/flutter-callkit

4. Signup for an account: https://console.zegocloud.com/account/signup

5. Voice call: https://www.zegocloud.com/product/voice-call

6. Video call: https://www.zegocloud.com/product/video-call