Full Featured Video Call App in Flutter in 7 Mins - Using ZegoCloud

Video calls are a great way to enhance user experience and provide a secure environment for app-related transmission. However, building and maintaining your video call module can be a daunting task.

That's where third-party service providers like ZegoCloud come in. ZegoCloud offers a hassle-free solution that allows you to create your video call module in no time. With ZegoCloud, you can take advantage of the latest features and updates without worrying about any maintenance or update issues. This ensures that your video call module is always up and running, providing a seamless user experience.

Here are some of the benefits of using ZegoCloud's video call module:

• Easy to use: ZegoCloud's video call module is easy to integrate into your app. With just a few simple steps, you can start making video calls.

• Secure: ZegoCloud's video call module is secure. Your data is protected with industry-leading security measures.

• Reliable: ZegoCloud's video call module is reliable. You can be sure that your video calls will be high quality and reliable.

Get ZEGOCLOUD UIKits (low code) for 10,000 free mins: bit.ly/3O0rDIV

Learn more about ZEGOCLOUD video call API: bit.ly/3pqu4u1

ZEGOCLOUD Voice & Video Call API: bit.ly/3O0YWLZ

ZEGOCLOUD video call SDK &API allows you to easily build your live video chat apps within minutes.

Setting Up

In the previous Blog, I went through setting up your app and ZegoCloud for the chat app. I will be extending the same for our video call too, so Make sure that you follow that first.

Adding Dependencies

Once You have set up Project, Add the following to your pubspec.yaml file

  zego_uikit_prebuilt_call: ^3.1.0

I have already initialized the SDK and connected a User, So I will simply move forward.

Video Call Button in Chat

I am going to extend the chat ui page to have a video call button the appbar , which we will use for initializing the video call.

This can be done by adding a appBarActions in the ZIMKitMessageListPage Widget.

appBarActions: [
                    IconButton(
                      onPressed: () {
                        String id = '111111';
                        Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) => ZimVideoCall(
                              callid: id,
                              userid: conversation.id,
                            ),
                          ),
                        );
                      },
                      icon: Icon(
                        Icons.videocam,
                      ),
                    ),
                  ],

Here I am simply using a string as the unique identifier for the video call, however, in a real-world application, you should use an algorithm to generate a unique id, store it in DB and share it between the users.

I then move to a new page, where the code for the Video call resides.

Video Call Page

import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:social_media_zego/config.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

class ZimVideoCall extends StatefulWidget {
  final String callid;
  final String userid;
  const ZimVideoCall({
    super.key,
    required this.callid,
    required this.userid,
  });

  @override
  State<ZimVideoCall> createState() => _ZimVideoCallState();
}

class _ZimVideoCallState extends State<ZimVideoCall> {
  @override
  Widget build(BuildContext context) {
    return ZegoUIKitPrebuiltCall(
      appID: appId,
      appSign: appSign,
      callID: widget.callid,
      userID: widget.userid,
      userName: "User : ${widget.userid}",
      config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall(),
    );
  }
}

The video call page asks for some arguments, we are passing some and directly configuring some.

1. appID : The app id that you can get from ZegoCloud Console.

2. appSign : The app sign that you can get from ZegoCloud Console.

3. callID : A Unique call ID that uniquely identifies a call between 2 users.

4. userID : The id of other user who is joining the video call.

5. userName : The username of the other user joining.

6. config : Different Config for the video call.

With all this done, I can now click on the Video Call button and A call will be started With the other User.

This is part of a Youtube Series Called: Social Media App Using Flutter and ZegoCloud | Voice Call, Video Call, Live Streaming and Timelines

You can Watch the Videos Here: https://www.youtube.com/playlist?list=PLlFwzkUNmr96CRZQCekbHRW22x8vJD573