Huzaifa Ahmed
Huzaifa Ahmed's Blog

Follow

Huzaifa Ahmed's Blog

Follow
Create a Video call app with Flutter ZEGOCLOUD

Create a Video call app with Flutter ZEGOCLOUD

Huzaifa Ahmed's photo
Huzaifa Ahmed
·Jan 21, 2023·

4 min read

Table of contents

Introduction

Integrating video call functionality into a Flutter app can be done using ZEGOCLOUD's Video Call API. In this article, I will walk you through the process of setting up and using the API to add video call functionality to your Flutter app.

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. You can sign up for a free trial to test the API before committing to a paid plan.

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, which you will need to use to initialize the API in your Flutter app.

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

You can add the ZEGOCLOUD Video Call API to your Flutter project by using the ZEGOCLOUD Flutter SDK. You can install 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 that the API is set up, you can start implementing the video call functionality in your Flutter app. You can use the ZEGOCLOUD Video Call API to create, join, and manage video calls. The 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 ZegoFlutter package, which is the Flutter SDK for the ZEGOCLOUD Video Call API. In the initState() method, we initialize the API by creating an instance of the ZegoFlutter 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 and publish your app

Once you have implemented the video call functionality, you should test your app to make sure it works as expected. You can then publish your app to the App Store or Google Play Store.

In this way, you 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

 
Share this