Live Streaming APP In Flutter with ZEGOCLOUD

Yar Coder's photo
Yar Coder
·

6 min read

Table of contents

When covid hit, one of the most affected industry was entertainment, Before covid the actor, influencers and other high-profile people loved to place their meetup to good places, but in covid, it was totally affected, and that's where live streaming meetup took place and all these high profile people back to interact with their fans and love once.

Now many apps provide a live streaming feature for users for multiple purposes. but the issue occurs on QUALITY in terms of high-quality vide/audio, ultra-low-latency massive concurrency and much more. What if we tell you about a library that encounters all the issue like quality, ultra-low latency, massive concurrency, audio and video effects and much more,

ZEGOCLOUD

ZEGOCLOUD provides a whole good combination (documentation & integration) that any developer required, ZEGOCLOUD has multiple features like Video calling, In-App Chatting, Cloud recording and much more. It provides a really easy integration of features with very well-written documentation.

ZEGOCLOUD library has SDKs for different platforms like

  • IOS

  • Android

  • Flutter

  • Javascript

  • Desktop

Use cases

Social and entertainment: Build a live social and entertainment experience by integrating live engagement in different formats, including single-host, multi-host, and cross-room co-hosting, as well as get features like face beautification, voice beautification, and virtual gifting.

Live shopping: Create a magical online shopping experience with live streaming. Customers from anywhere in the world can interact with Celebrities, and shoppable live streams hosted by your sales stars, and product experts.

Live game streaming: In the gaming industry ZEGOCLOUD can be useful to gamers where they can live steam their gameplay, interact with their fans and viewers, show them their skills and gain reach

Multiple live engagement formats

Whether you want to create a single host, multi-host and/or cross-room co-hosted live streaming meetup, ZEGOCLOUD has all these options with quick and easy integration.

Superior audio and video quality

With ZEGOCLOUD you can achieve 4K crystal clear video quality with up to 48kHz full-band audio.

Rich audio and video effects

With ZEGOCLOUD you can create fun in live streaming with face/voice beatification and try different audio/video effects

Support for massive concurrency

You can do live streaming with millions of your fans and followers without any lagging with the support of massive concurrency.

Open the pubspec.yaml file, add the zego_express_engine dependencies as follows:
Depends on pub (recommended):

dependencies:
flutter:
sdk: flutter

zego_express_engine: ^2.0.0

Go to the app->src->main, open the AndroidManifest.xml file and add permissions.

<!-- Permissions required by the SDK -->
<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" />

<!-- Permissions required by the Demo App -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-feature android:glEsVersion="0x00020000" android:required="true" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

Android 6.0 requires dynamic permissions to be applied for some more important permissions, for that reason you cannot apply for static permissions only through the "AndroidMainfest.xml" file. find a third-party flutter plug-in on pub to implement, or search Android native layer and execute the following code, where "requestPermissions" is the method of "Activity".

String[] permissionNeeded = {
    "android.permission.CAMERA",
    "android.permission.RECORD_AUDIO"};

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (ContextCompat.checkSelfPermission(this, "android.permission.CAMERA") != PackageManager.PERMISSION_GRANTED ||
        ContextCompat.checkSelfPermission(this, "android.permission.RECORD_AUDIO") != PackageManager.PERMISSION_GRANTED) {
        requestPermissions(permissionNeeded, 101);
    }
}

Create an instance of ZegoEngine by calling the method createEngineWithProfile with some params AppID and AppSign.
AppId: You can find AppID from the dashboard->project
AppSign: You can find AppSign id from dashboard->project

ZegoEngineProfile profile = ZegoEngineProfile(
    appID, // Use the AppID assigned by ZEGOCLOUD when you create your project in the ZEGOCLOUD Admin Console. AppID format: 1234567890
    ZegoScenario.General, // General scenario
    appSign: appSign，// The AppSign you get from ZEGOCLOUD Admin Console. Format: '0123456789012345678901234567890123456789012345678901234567890123'(64 characters). For the Web platform, leave it empty.
    enablePlatformView: true); // For the Web platform, set it to true.
// Create a ZegoExpressEngine instance.
ZegoExpressEngine.createEngineWithProfile(profile);

Login to the room with some parameters
RoomId will be unique, userId will be unique. You can generate token from backend or directly from dashboard-project

// create a user
ZegoUser user = ZegoUser.id('user1');

// set the token
ZegoRoomConfig config = ZegoRoomConfig.defaultConfig();
config.token = "xxxx";

// log in to a room
ZegoExpressEngine.instance.loginRoom('room1', user, config: config);

Add some listeners to get real-time updates

// Common event callbacks related to room users and streams.
// Callback for updates on the current user's room connection status.
ZegoExpressEngine.onRoomStateUpdate = (String roomID, ZegoRoomState state, int errorCode, Map<String, dynamic> extendedData) {
    // Implement the callback handling logic as needed.
};

// Callback for updates on the current user's room connection status.
ZegoExpressEngine.onRoomUserUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoUser> userList) {
    // Implement the callback handling logic as needed.
};

// Callback for updates on the status of the streams in the room.
ZegoExpressEngine.onRoomStreamUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoStream> streamList) {
    // Implement the callback handling logic as needed.
};

To stop publishing local audio and video streams to remote users, call the stopPublishingStream method.

// Stop publishing a stream
ZegoExpressEngine.instance.stopPublishingStream();

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

// Stop local video preview
ZegoExpressEngine.instance.stopPreview();

If you use a TextureRenderer object to render the video, call the destroyTextureRenderer method to destroy the TextureRenderer object.

// _previewViewID is the viewID when you calling the [createTextureRenderer] method
ZegoExpressEngine.instance.destroyTextureRenderer(_previewViewID);

If you use a PlatformView object to render the video, call the destroyPlatformView method to destroy the PlatformView object.

// _previewViewID is the viewID when you calling the [createPlatformView] method
ZegoExpressEngine.instance.destroyPlatformView(_previewViewID);

To stop playing a remote audio and video stream, call the stopPlayingStream method with the corresponding stream ID passed to the streamID parameter.

// Stop playing a stream
ZegoExpressEngine.instance.stopPlayingStream(streamID, canvas: _playCanvas);

If you use a TextureRenderer object to render the video, call the destroyTextureRenderer method to destroy the TextureRenderer object.

// _previewViewID is the viewID when you calling the [createTextureRenderer] method
ZegoExpressEngine.instance.destroyTextureRenderer(_previewViewID);

If you use a PlatformView object to render the video, call the destroyPlatformView to destroy the PlatformView object.

// _previewViewID is the viewID when you calling the [createPlatformView] method
ZegoExpressEngine.instance.destroyPlatformView(_previewViewID);

Log out of a room
To log out of a room, call the logoutRoom method with the corresponding room ID passed to the roomID parameter.

// log out from a room
ZegoExpressEngine.instance.logoutRoom('room1');

Destroy the ZegoExpressEngine instance
To destroy the ZegoExpressEngine instance and release the resources it occupies, call the destroyEngine method.

// destroy the ZegoExpressSDK instance
ZegoExpressEngine.destroyEngine();

You can find a sample code from here Code Base

Do download SDK Express SDK

Common video configuration guide for Live Streaming Documentation

Here you can find different Functions & methods that can be useful for the video calling feature Documentation

DartAndroidFlutterprogramming