Live Streaming App using Flutter and ZEGOCLOUD
Hey guys, welcome back. So today we will be learning how to create a simple livestreaming app using Flutter and ZEGOCLOUD. Before we dive in lets get familiar with what is ZEGOCLOUD.
What is ZEGOCLOUD?
ZEGOCLOUD is a professional audio and video global cloud service provider dedicated to providing quality real-time audio and video services. These services include video calls, video conferencing, audio calls and even live streaming. It uses Express Video SDK that is a fully featured and Robust SDK. It provides high quality videos with low latency (low network bandwidth). Apart from that it is easy to integrate and beginner friendly for developers. ZEGOCLOUD provides 10,000 free minutes for developers to build powerful communication applications.
It even provides UIKits and SDK’s to build customized UI. Today we will be mainly focusing on building a livestreaming app using UI kits.
Pre-requisites
- Flutter version > 1.12
- ZEGOCLOUD account
- Basic knowledge about Flutter
Video tutorial
I have also uploaded a video tutorial in YouTube. Make sure to check it out and hit the like and subscribe button if you guys found it useful.
Let’s get started
Open Android Studio and create a new Flutter Project
After that provide a name to your project. Note that the name should only have lower case letters and underscores. Then check the flutter SDK path and click finish.
Once the project is created, in main.dart clear the starting code and inside runApp() call the MaterialApp() widget. Here we will be adding all the code. So first we will have to import the dependency for creating material UI.
import 'package:flutter/material.dart';Next we will change the theme to a deep purple color as the primary swatch.
Next we will create the home screen. For this we will be implementing the stateless widget. And we will call this HomeScreen() inside the MaterialApp().
void main() {
runApp(
MaterialApp(
home: HomeScreen(),
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
),
);
}Next we will create the HomeScreen() which will have 2 buttons — Start live and Join live buttons. The code is as given below.
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text("Livestream Demo"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
String user = Random().nextInt(1000).toString();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LiveStreamingScreen(
user: user,
isHost: true,
),
),
);
},
child: Text("Start Live")),
ElevatedButton(
onPressed: () {
String user = Random().nextInt(1000).toString();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LiveStreamingScreen(
user: user,
isHost: false,
),
),
);
},
child: Text("Join Live")),
],
),
),
),
);
}
}The above code provides an AppBar() to display the app title. Apart from that it contains the Start Live and Join Live buttons arranged centrally in a column fashion.
The custom isHost property determines if the user joining is the host or the audience of the livestream. The user value is given a random number from 1–1000 and the value is converted to a string. This value represents the different users who are part of the livestream. In order to integrate the random number generator we should add the dart:math library
import 'dart:math';Next we will be moving to the livestream section of the app. For this first we will import the zego_uikit_prebuilt_live_streaming dependency. For this run the following command.
flutter pub add zego_uikit_prebuilt_live_streaming
This will add the latest zego_uikit_prebuilt_live_streaming dependency. Next we will import the package in our main.dart
import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';Next we create the LiveStreamingScreen() using stateless widget. We do this by adding the ZegoUIKitPrebuiltLiveStreaming() widget which is part of the zego_uikit_prebuilt_live_streaming.dart file. The code is as below.
class LiveStreamingScreen extends StatelessWidget {
final String user;
final bool isHost;
const LiveStreamingScreen({
Key? key,
required this.user,
required this.isHost,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SafeArea(
child: ZegoUIKitPrebuiltLiveStreaming(
appID: "YOUR APP ID",
appSign:
"YOUR APP SIGN",
userID: user,
userName: user,
liveID: "liveID",
config: isHost
? ZegoUIKitPrebuiltLiveStreamingConfig.host()
: ZegoUIKitPrebuiltLiveStreamingConfig.audience(),
),
);
}
}In the above code, the userName and userID properties are given the same value for convenience. To scale up the app, you can map custom userID’s to userNames. The liveID property holds the id for the livestream. You can give a value from a TextField() to make it custom instead of static value. This value determines which livestream the user will be joining. The config property has the custom UI configurations for the host and audience. This can be set as ZegoUIKitPrebuiltLiveStreamingConfig.host() or ZegoUIKitPrebuiltLiveStreamingConfig.audience() which is given based on the custom isHost property.
In order to get appID and appSign values we will need to create a project in the ZEGOCLOUD project dashboard. To access the project dashboard click here.
In the console you will be prompted to the window as shown below
If you already have an account directly login else sign up by filling in the details to create one.
Once you have your account created, click on create new project
Next choose the use case of our project. For our purpose we will be using the Live Streaming use case.
After that give your project a suitable name
Then for our purpose we will start with UI kits as shown below. In that the code used for each platform is also given so we as developers can better understand it.
Once our project is successfully build we will see a button with a text saying start building your app
Click the button and then we will be prompted to select the framework for our project. Choose Flutter as the Framework for the project
This will take us to the UI configuration page as shown.
As we scroll down press the Save & Start to integrate button to access the app id and app sign of the project.
Once that is done you will be taken to the project configuration page where you will get your app id and app sign.
Add these values to the appID and appSign properties
ZegoUIKitPrebuiltLiveStreaming(
appID: "YOUR APP ID",
appSign:
"YOUR APP SIGN",
userID: user,
userName: user,
liveID: "liveID",
config: isHost
? ZegoUIKitPrebuiltLiveStreamingConfig.host()
: ZegoUIKitPrebuiltLiveStreamingConfig.audience(),
),Next we need to add the android and iOS configurations.
Android configurations
First open the android/app/build.gradle file. Modify the compileSdkVersion under the android block to 33
android {
compileSdkVersion 33Next we have to add the permissions. For that open your android/app/src/main/AndroidManifest.xml file and add the following lines of code inside the <manifest> tag before the <application> tag.
<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” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.READ_PHONE_STATE” />
<uses-permission android:name=”android.permission.WAKE_LOCK” />
After that create a file proguard-rules.pro inside android/app folder. This is done to prevent obfuscation of the SDK public class names.
In proguard-rules.pro add the following lines of code.
-keep class **.zego.** { *; }Now we will add the following config code to the release part of android/app/build.gradle
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
Once that is done we are done with the android configurations. Moving on we will be implementing the iOS configurations.
iOS Configurations
For iOS we need to add the app permissions. For that add the following lines of code in ios/Runner/Info.plist
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a video conference</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a video conference</string>
That’s it!😀 Now run the app and try it out with your friends. If you like this story make sure to leave a clap and comment your feedbacks.
