In Flutter there are many prebuild Audio_Room_kit For Example – Agora, ZegoClooud LiveKit etc., but In this article, we are going to use ZegoCloud Live Audio Room Kit, use this SDK to add real-time video, audio and data features to your Flutter app. Connecting to a self- or cloud-hosted ZegoCloud server lets you quickly build applications like interactive live streaming or video calls with just a few lines of code. A sample video is given below to get an idea about what we are going to do in this article.
Prerequisites:
- Go to ZEGOCLOUD Admin Console to create a UI-Kit project.
- Get the AppID and AppSign of the project.
Note: If you don’t have a ZegoCloud Account Create a New ZegoCloud
Step By Step Implementation
Step 1: Add ZegoUIKitPrebuiltLiveAudioRoom as dependencies
Run the following code in your project’s root directory:
flutter pub add zego_uikit_prebuilt_live_audio_room
Step 2: Make Some Changes in the Android File
1. modify the compileSdkVersion
Open the project_name/android/app/build.gradle file, and modify the compileSdkVersion to 33.
2. And in the Same file, edit the minSdkVersion and add multiDexEnabled
minSdkVersion 21
multiDexEnabled true
3. Add app permission
Open the file your_project/app/src/main/AndroidManifest.xml, and add the following:
<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" />
To prevent obfuscation of the SDK public class names, do the following:
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.** { *; }
-keep class **.**.zego_zpns.** { *; }
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'
Step 3: Import the SDK [Create new File in Lib]
Now in your Dart code, import the Live Audio Room Kit SDK.
import 'package:zego_uikit_prebuilt_live_audio_room/zego_uikit_prebuilt_live_audio_room.dart';
Using the Live Audio Room Kit:
- Specify the userID and userName for connecting the Live Audio Room Kit service.
- roomID represents the live audio room you want to create or join
For below Constant.appId use your appId and Constant.appSign use your appSign
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_live_audio_room/zego_uikit_prebuilt_live_audio_room.dart';
class LivePage extends StatefulWidget {
final String profilePhoto; // getUser Profile Photo
const LivePage(
{Key? key,
required this.profilePhoto})
: super(key: key);
@override
State<LivePage> createState() => _LivePageState();
}
class _LivePageState extends State<LivePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: ZegoUIKitPrebuiltLiveAudioRoom(
// Use Your AppId
appID: Constant.appId,
appSign: Constant.appSign, // Use Your appSign
userID: 500, // User User Id For Example We Give 500
userName: ABCD, // User User Name For Example We Give ABCD
roomID: 6020, // Use RoomId what You Want to Give For Example We Give 6020
config: widget.isHost
? (ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
: ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
..userAvatarUrl = widget.profilePhoto,
),
);
}
}
Step 4: Run & Test
Now you can simply click the Run or Debug button to run and test your App on the device.