ZEGOCLOUD is a real-time audio and video conversation platform that offers developers with the equipment they want to build audio and video communique programs, consisting of video name apps, live streaming apps, and on line training apps. ZEGOCLOUD offers a ramification of equipment and assets which can assist builders save money and time whilst constructing real-time audio and video verbal exchange packages.
ZEGOCLOUD uses the brand new era to deliver audio and video. ZEGOCLOUD can be scaled to meet the wishes of any application, so that you can reach more customers with your real-time audio and video communique packages.
ZEGOCLOUD offers numerous software improvement kits (SDKs) for several programming languages such as Java, Python, and Flutter. The Flutter SDK is specifically designed to facilitate the creation of high-overall performance audio and video communique packages that can run seamlessly on cell devices.
Using the ZEGOCLOUD Flutter SDK, builders can without difficulty build audio and video call apps with chat and stay streaming features. In this article, we can stroll via the procedure of constructing a Live Streaming app using the ZEGOCLOUD Flutter SDK. the use of the ZEGOCLOUD Flutter SDK.
Before creating stay Streaming software using ZEGOCLOUD Flutter stay Streaming SDK, it is essential to accumulate an App id and App signal from the ZEGOCLOUD Console. these identifiers are vital in your application to connect with the ZEGOCLOUD platform and utilize its audio and video streaming talents.
here are the stairs to obtain your AppID and AppSign from the ZEGOCLOUD Console:
1.Go to the ZEGOCLOUD Console website Console
2.sign on for an account and input your personal facts.
3.After developing an account, you'll be caused to create a venture. click the "Create" button to create a new assignment.
4.Enter a call on your mission and select the right vicinity to your task. Then click on the "Create" button.
5.Once your challenge is created, you will be redirected to the mission dashboard.
6.You will see your AppID and AppSign displayed on the web page. Make a note of those values as you'll need them later when configuring your app.
Observe: The App sign is a mystery value that need to now not be shared with every person. hold it safe and at ease.
Generate the Flutter Application
Let's move on to creating our Flutter application:
Use the command "flutter create flutter_LiveStreaming" to create the project.
Next, we need to install zego_uikit_prebuilt_call
flutter pub add zego_uikit_prebuilt_call
Release the challenge the use of your IDE, and carry out a few initial adjustments to make sure that the assignment runs smoothly.
Begin by accessing android/app/build.gradle and making modifications to the below-listed values:
compileSdkVersion 33minSdkVersion 22
3.targetSdkVersion 33
It is necessary to specify the permissions that the application will require. this can be carried out by including the permission declarations within the show up tag within the AndroidManifest.xmlfile:
<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"/>
<uses-permission android:name="android.permission.VIBRATE"/>
Add the following permissions upload in your info.plist report for iOS:
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>
Now that we've completed the vital configurations, we can begin writing our Dart code. to start, you may alternative the code in the lib/main/home.dart document with the code supplied underneath:
import 'package:zego_zimkit/zego_zimkit.dart';
import 'package:zegocloud/inApp_chat/main_screen.dart';
final String userID=math.Random().nextInt(1000).toString();
void main() async{
await ZIMKit().init(appID: Utils.appID,appSign: Utils.appsign);
WidgetsFlutterBinding.ensureInitialized();
// await ZIMKit().init(appID:Utils.appID, appSign: Utils.appsign);
// WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
class MyApp extends StatelessWidget{
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
// Generate Live Streaming ID with 6 digit length
final liveIDController = TextEditingController(
text: '1111',
);
// Generate userID with 6 digit length
final String userID = Random().nextInt(900000 + 100000).toString();
@override
Widget build(BuildContext context) {
var buttonStyle = ElevatedButton.styleFrom(
backgroundColor: const Color(0xff034ada),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
);
return Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 20,
),
Text('Your UserID: $userID'),
const Text('Please test with two or more devices'),
const SizedBox(
height: 30,
),
TextFormField(
controller: liveIDController,
decoration: const InputDecoration(
labelText: 'Join or Start a Live by Input an ID',
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
),
),
const SizedBox(
height: 20,
),
ElevatedButton(
style: buttonStyle,
child: const Text('Start a Live'),
onPressed:(){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LiveScreenView(
liveID: liveIDController.text,
isHost: true, userID:"$userID",
),
),
);
},
),
const SizedBox(
height: 16,
),
ElevatedButton(
style: buttonStyle,
child: const Text('Join a Live'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LiveScreenView(
liveID: liveIDController.text,
isHost: false,
userID: '$userID',
),
),
);
}
)
],
),
),
);
}
}
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';
import 'package:zegocloud/main/utils.dart';
// Live Page Prebuilt UI from ZEGOCLOUD UIKits
class LiveScreenView extends StatelessWidget {
final String liveID , userID;
final bool isHost;
LiveScreenView({
super.key,
required this.liveID,
this.isHost = false,
required this.userID
});
// Add your app id here and app sign in
@override
Widget build(BuildContext context) {
return SafeArea(
child: ZegoUIKitPrebuiltLiveStreaming(
appID: Utils.appID,
appSign: Utils.appsign,
userID: userID,
userName: 'user_$userID',
liveID: liveID,
config: isHost
? ZegoUIKitPrebuiltLiveStreamingConfig.host()
: ZegoUIKitPrebuiltLiveStreamingConfig.audience()
..audioVideoViewConfig.showAvatarInAudioMode = true
..audioVideoViewConfig.showSoundWavesInAudioMode = true,
),
);
}
}
As soon as you have got configured the specified settings efficiently, you have to be capable of begin a *live Streaming * app the use of the furnished code.
End
In precis, we've got discovered the way to expand a stay streaming utility utilizing the ZEGOCLOUD Flutter SDK. The process involved acquiring an AppID and AppSign from the ZEGOCLOUD Console, which allowed us to connect with the ZEGOCLOUD platform and leverage its audio and video streaming skills. We created a Flutter software and included the important dependencies. ultimately, we implemented the stay streaming capability thru Dart code, which includes initializing the SDK, connecting to a digital area, and publishing or subscribing to a transmission. with the aid of following these steps, you could create your very own stay streaming application the use of the ZEGOCLOUD Flutter SDK.
Sign up for 10,000 free mins
Find out more about ZEGOCLOUD
Top comments (0)