Video Calling feature with ZEGOCLOUD in Flutter

Yar Coder's photo
Yar Coder
·

5 min read

Table of contents

Today feature like Video calling, Live Streaming, Online messaging, etc become a must and user needs in any field, I recently discover a library that has all these types of feature with really good documentation and easy integration.
Let's explore this library with Flutter.

Flutter Introduction

Flutter is an open-source Software Development kit by Google. You all are maybe confused about why to choose flutter when you have other platforms like Swift & Android. the reason is a cross-platform feature, If you use Swift you can only run your app on IOS devices, If you choose Android you can only run your app on Android devices, but with Flutter, you can develop Web Applications, Mobile Applications and even desktop Applications.

Also, the best part of flutter is you can create Web Applications and Mobile applications with a single code base, so you don't need to worry about maintain different codebases for different devices (web/mobile).

Here I am developing a basic Video calling feature with Flutter using the library ZEGOCLOUD. Let's talk about what is ZEGOCLOUD and Why use it.

ZEGOCLOUD

ZEGOCLOUD is a library/platform where you can find different products like Video/Audio calling, Live Streaming, In-App Chatting and much more.
By using this library you can instantly develop an app with these different features using just a chunk of code.
As compared to other libraries ZEGOCLOUD has a good price margin and also a free account to test your app feature.

Use cases

Online education: Online education systems become a need these days, today any person can get an education from anywhere in the world with the help of a live video education system. ZEGOCLOUD helps to create virtual classrooms for all types of online learning Delivers a successful online learning experience with high-quality and low-latency real-time video calls, screen sharing, and other features.

Video customer services: Integrate video calling into your customer service workflows so you can respond to your customers' requests quickly and efficiently to improve customer engagement and satisfaction.

Telehealth: Add video consultation capabilities to your telehealth apps to connect patients with doctors from the comfort of where they are and make healthcare services more accessible to more people.
Live events: Live stream your event to a global audience to maximize the impact. Increase audience engagement by adding text chat, virtual gifting, polling, and other features.

There are a variety of enhancement features in ZEGOCLOUD

  • Making voice interactions more fun can engaging by adding voice beautification, voice changing, and other audio effects.

  • Add spatial effects to real-time audio to create a more immersive communication experience.

  • ZEGOCLOUD provides AI-powered face beautification features, virtual makeup, and other tools to help users enhance their appearance in video calls.

  • Use SEI to deliver text messages along with video streams to achieve more versatile real-time interactions.

    Steps

    Import the SDK to your project

      import 'package:zego_express_engine/zego_express_engine.dart';

    Use the ZegoEngineProfile method to config project in the flutter app
    appID: You can get appId from the dashboard from a specific project
    appSign: You can get appSign from the same project

      ZegoEngineProfile profile = ZegoEngineProfile(
      appID, // Register with the official website and obtain the data in the format similar to 1234567890.
      ZegoScenario.General, // General scenario.
      appSign: appSign, // Register with the official website and obtain a string of 64 characters in the format similar to 0123456789012345678901234567890123456789012345678901234567890123. It is not required for the web platform.
      enablePlatformView: true); // For the web platform, set it to `true`.
  // Create a ZegoExpressEngine instance.
  ZegoExpressEngine.createEngineWithProfile(profile);

    Log in to a room for video calling

    1. create a ZegoUser by unique id

    2. Create a RoomConfig which required a token, (you can get a token from the dashboard, go to dashboard -> go to project -> click on generate -> give a unique user id and generate a token copy & paste here.

    3. Add a user object having userId and userName (userId will be the same as you provided on generating the token).

    4. Call login room method with all those params, unique roomId, user object and roomConfig.

```plaintext
// Create a `ZegoUser` object.
ZegoUser user = ZegoUser.id('user1');
// The `onRoomUserUpdate` callback can be received only when `ZegoRoomConfig` in which the `isUserStatusNotify` parameter is set to `true` is passed.
ZegoRoomConfig config = ZegoRoomConfig.defaultConfig();
config.isUserStatusNotify = true;
// If you use the AppSign for authentication, you do not need to set the `token` parameter. If you want to use the Token for authentication, which is securer, see [Guide for upgrading the authentication mode from AppSign to Token](https://docs.zegocloud.com/faq/token_upgrade). The Web platform supports only token-based authentication.
// config.token = "xxxx";
// Log in to a room.
ZegoExpressEngine.instance.loginRoom('room1', user, config: config);
```

There will be some real-time event methods that will use to get status and data in real-time

```plaintext
// Common room-related callbacks
// Room status update callback
ZegoExpressEngine.onRoomStateUpdate = (String roomID, ZegoRoomState state, int errorCode, Map<String, dynamic> extendedData) {
    // Implement the event callback as required.
};

// User status update callback
ZegoExpressEngine.onRoomUserUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoUser> userList) {
    // Implement the event callback as required.
};

// Stream status update callback
ZegoExpressEngine.onRoomStreamUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoStream> streamList) {
    // Implement the event callback as required.
};
```

After login to the room, call publish method to publish your stream

```plaintext
ZegoExpressEngine.instance.startPublishingStream("streamID");

```

Stop publishing, previewing, or rendering streams

Call the stopPublishingStream method to stop publishing local audio or video streams to remote users.

Stop publishing streams.

```plaintext
ZegoExpressEngine.instance.stopPublishingStream();
```

If the local preview is started, call the stopPreview method to stop it.

Stop the preview.

```plaintext
ZegoExpressEngine.instance.stopPreview();
```

If createCanvasView is called during the preview, call the destroyCanvasView method to destroy the view.

Set `_previewViewID` to the value of `viewID` obtained when you call the `createCanvasView` method.

```plaintext
ZegoExpressEngine.instance.destroyCanvasView(_previewViewID);
```

Stop playing or rendering streams

Call the stopPlayingStream method to stop playing audio and video streams published by remote users.

Stop playing streams.

```plaintext
ZegoExpressEngine.instance.stopPlayingStream(streamID);
```

If createCanvasView is called during stream playing, call the destroyCanvasView method to destroy the view.

Set `_playViewID` to the value of `viewID` obtained when you call the `createCanvasView` method.

```plaintext
ZegoExpressEngine.instance.destroyCanvasView(_playViewID);
```

Log out of a room  
Call the logoutRoom interface to log out of a room.

Log out of a room.

```plaintext
ZegoExpressEngine.instance.logoutRoom('room1');
```

Destroy a ZegoExpressEngine instance  
Call the destroyEngine method to destroy a ZegoExpressEngine instance so that the resources used by the SDK can be released.

Destroy a ZegoExpressEngine instance.

```plaintext
ZegoExpressEngine.destroyEngine();
```

Here is a document from where you can simply follow the steps and create your own Video Calling Web/Mobile Application in Flutter. [Video Calling In Flutter](https://docs.zegocloud.com/article/1255)

Here is my YouTube channel where you learn more about Software Engineering. [***Yar Coder***](https://www.youtube.com/@YarCoder)
DartFlutterapp developmentzegocloudFlutter App Development