Talk to us
Talk to us
menu

Blog Post

start building
Developer

How To Build A Live Streaming App With Flutter UIKit

How To Build A Live Streaming App With Flutter UIKit

Today, live streaming reigns supreme in the media. This form of media becomes more and more popular and draws an increasing number of viewers each year.

Analysts predict that the market for live streaming will grow to $223.98 billion by 2028. The sector is expanding as a result of increasing investments, and more companies are developing their own live streaming services.

In this article, I will walk you step-by-step through building a live streaming app using the Flutter Live Streaming Kit SDK.

Introduction to Flutter Live Streaming Kit

Flutter Live Streaming Kit is a brand-new pre-built UIKits by ZEGOCLOUD. Through it, You can complete the development of a live streaming app within 10 minutes.

live streaming kit

As shown in the figure, Flutter Live Streaming Kit is responsible for handling all the logic and UI of the live streaming function. Include:

  • UI and interaction of the live Streaming module
  • Message sending and display
  • Audio and video data transmission
  • Camera and microphone management
  • Live Viewer Statistics

You only need to implement business-related logic. For example:

  • User login registration
  • Live List Management
  • Top up and send gifts, etc.

Preparation

  • A ZEGOCLOUD developer account–Sign up
  • Flutter 1.12 or later.
  • Basic understanding of Flutter development

Implement live streaming

Create Project

Run the following code to create a new project.

flutter create --template app.
create project

Add live button

Add two buttons, one to start live and one to watch live.

add live button
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: 'Flutter Demo', home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                  child: const Text('Start a live'),
                  onPressed: () => jumpToLivePage(context, isHost: true)),
              ElevatedButton(
                  child: const Text('Watch a live'),
                  onPressed: () => jumpToLivePage(context, isHost: false)),
            ],
          ),
        ),
      ),
    );
  }

  jumpToLivePage(BuildContext context, {required bool isHost}) {}
}

Add ZegoUIKitPrebuiltLiveStreaming as dependencies

Run the following command in your project root directory:

flutter pub add zego_uikit_prebuilt_live_streaming
add live streaming sdk

Import the SDK

Now in your Dart code, import the prebuilt LiveStreaming Kit SDK.

import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';
import live streaming sdk

Implement live streaming

Use ZegoUIKitPrebuiltLiveStreaming to easily build a live streaming page

class LivePage extends StatelessWidget {
  const LivePage({Key? key, this.isHost = false}) : super(key: key);
  final bool isHost;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveStreaming(
        appID: , // use your appID
        appSign: 'yourAppSign', // use your appSign
        userID: userID,
        userName: 'user_$userID',
        liveID: 'testLiveID',
        config: isHost
            ? ZegoUIKitPrebuiltLiveStreamingConfig.host()
            : ZegoUIKitPrebuiltLiveStreamingConfig.audience(),
      ),
    );
  }
}

Now, you can create a new live or watch a live by navigating to this live page.

void jumpToLivePage(BuildContext context, {required bool isHost}) {
  Navigator.push(context, MaterialPageRoute(builder: (context) => LivePage(isHost: isHost)));
}
implement live streaming

Configure your project

  • Android:
  1. You need to open the your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33.
compile sdk version
  1. Add app permissions.
    Open the file your_project/app/src/main/AndroidManifest.xml, and add the following code:
   <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" />
permission android
  1. Prevent code obfuscation.

To prevent obfuscation of the SDK public class names, do the following:

a. In your project’s your_project > android > app folder, create a proguard-rules.pro file with the following content as shown below:

-keep class **.zego.** { *; }

b. Add the following config code to the release part of the your_project/android/app/build.gradle file.

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
android class confusion
  • iOS:
  1. Add app permissions.

a. open the your_project/ios/Podfile file, and add the following to the post_install do |installer| part:

# Start of the permission_handler configuration
target.build_configurations.each do |config|
  config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
    '$(inherited)',
    'PERMISSION_CAMERA=1',
    'PERMISSION_MICROPHONE=1',
  ]
end
# End of the permission_handler configuration
permission podfile

b. open the your_project/ios/Runner/Info.plist file, and add the following to the dict part:

    <key>NSCameraUsageDescription</key>
    <string>We require camera access to connect to a live</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>We require microphone access to connect to a live</string>
permission ios

Run a Demo

Conclusion

If utilized well, live streaming can be the best growth engine for businesses of all kinds. The live streaming app might be the greatest option whether you run a business or simply wish to earn money through interesting content. Start the process of developing a video streaming app, create your own streaming service, and grow your company to new heights.

Take action now, You can download the sample demo source code of this article., or consult us 24h technical support.

Read More

ZEGOCLOUD
ZEGOCLOUD With our fully customizable and easy-to-integrate Live SDK, you can quickly build reliable, scalable, and interactive live streaming into your mobile, web, and desktop apps.

Related posts

Contact us