Live streaming atau siaran langsung telah menjadi semakin populer dalam beberapa tahun terakhir, karena orang ingin terhubung dengan orang lain secara real-time, baik itu untuk hiburan, pendidikan, atau komunikasi.
Flutter adalah sebuah framework open source yang dikembangkan oleh Google, yang digunakan untuk membuat aplikasi mobile, web, dan desktop dengan menggunakan bahasa pemrograman Dart.
Jika Anda ingin menambahkan fitur live streaming pada aplikasi Flutter, SDK Zegocloud dapat menjadi solusinya.
Zegocloud hadir dengan Live Streaming Kit, sebuah komponen yang memungkinkan Anda membangun fitur live streaming kustom ke dalam aplikasi Anda hanya dengan beberapa baris kode. Dalam artikel ini, kita akan membahas tentang Live Streaming Kit dan bagaimana menggunakannya untuk membangun aplikasi live streaming dengan mudah menggunakan SDK Zegocloud.
Membuat Fitur Live Streaming Flutter dengan ZegoCloud
Anda dapat mengikuti langkah-langkah berikut untuk mengintegrasikan SDK Zegocloud ke dalam aplikasi Flutter dalam membuat aplikasi live streaming.
1. Daftar Akun
Pertama, anda harus mendaftarkan akun terlebih dahulu di Zegocloud. Anda dapat mengunjungi website resmi Zegocloud disini.
Anda perlu mengisi data pribadi seperti nama depan, nama belakang, negara, dan email pada formulir yang tersedia. Selanjutnya, Anda dapat mengirimkan kode verifikasi email dengan menekan tombol “Get Code”.
Kode verifikasi tersebut akan dikirimkan ke alamat email yang telah Anda masukkan sebelumnya. Setelah itu, masukkan password dan pastikan Anda telah memeriksa dan menyetujui syarat dan ketentuan Zegocloud. Jika sudah, klik tombol “Start your free trial” untuk memulai masa percobaan gratis Anda.
Anda akan diminta untuk memberikan beberapa informasi tentang perusahaan atau pekerjaan Anda saat ini. Hal ini dilakukan agar produk yang disediakan Zegocloud dapat disesuaikan dengan kebutuhan Anda.
Anda perlu memasukkan beberapa informasi seperti nama perusahaan, alamat situs web perusahaan (jika ada), jenis pekerjaan, industri, dan nomor telepon yang dapat dihubungi.
Setelah Anda berhasil mengisi semua data yang dibutuhkan, klik tombol Continue. Dengan begitu, akun Anda akan terdaftar di Zegocloud dan Anda dapat segera memanfaatkan fitur-fitur yang tersedia secara gratis selama 10.000 menit.
2. Membuat Projek Baru di Zegocloud
Setelah berhasil mendaftar, Anda akan diarahkan ke Dashboard Zegocloud. Untuk membuat projek baru, Anda dapat mengklik tombol “Create your project”.
Pilih jenis fitur yang ingin dibuat. Karena kita ingin membuat fitur Live Streaming, anda dapat memilih yang bagian Live Streaming.
Setelah itu, klik next pada bagian bawah dan masukkan nama projek aplikasi anda, pada contoh kali ini kita beri nama flutter_live_stream. Nama projek tidak boleh ada spasi, anda dapat menggunakan penulisan dalam format camel case maupun snake case.
Anda dapat memilih Start with UI Kits untuk mengintegrasikan SDK Zegocloud dengan mudah dan cepat tanpa perlu membuat kode program untuk UI dari awal.
Setelahnya, Zegocloud akan menyiapkan konfigurasi dan UI Kits khusus untuk projek anda. Setelah prosesnya selesai, anda akan diminta untuk memilih platform yang ingin diterapkan pada SDK Zegocloud. Pilihlah For Flutter, karena pada kesempatan ini kita akan mengimplementasikan SDK Zegocloud pada platform Flutter.
Setelah berhasil menambahkan SDK Zegocloud pada projek Flutter Anda, Anda akan diberikan contoh tampilan untuk memastikan bahwa SDK telah terintegrasi dengan benar. Setelah melihat contoh tampilan tersebut, Anda dapat menekan tombol Save & start to integrate.
Anda akan diberikan AppID dan AppSign yang penting untuk mengintegrasikan SDK Zegocloud dengan aplikasi Flutter. Dengan begitu, Anda siap untuk melanjutkan ke tahap selanjutnya yaitu memulai penulisan kode program Flutter.
3. Buat Project Baru Flutter
Anda dapat membuat projek baru Flutter dengan menjalankan perintah yang diberikan di bawah ini.
flutter create live_streaming_flutter4. Install Package Zegocloud
Untuk memasang package Zego UI Kits pada projek Flutter, Anda dapat menambahkannya secara manual melalui file pubspec.yaml atau menggunakan perintah berikut di terminal:
flutter pub add zego_uikit_prebuilt_live_streamingSetelah proses instalasi berhasil, Anda dapat dengan mudah mengimpor paket Zegocloud pada file projek Flutter Anda.
import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';5. Konfigurasi Projek Flutter
Jika Anda menggunakan Flutter versi 2 atau lebih baru, maka perlu mengubah nilai compileSDKVersion dan minSDKVersion dalam file /android/app/build.gradle. compileSDKVersion harus diatur menjadi 33 dan minSDKVersion harus diatur menjadi 21.
android {
compileSdkVersion 33
// ...
}defaultConfig {
minSdkVersion 21
// ...
}Selanjutnya, pada AndroidManifest didalam file /app/src/main/AndroidManifest.xml tambahkan permission berikut inis.
<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" />Anda perlu membuat file bernama proguard-rules.pro pada direktori /android/app untuk melindungi Class pada package atau direktori “zego” agar tidak mengalami perubahan nama atau dihapus saat proses obfuscation ketika aplikasi di-release. Berikut adalah contoh isi dari file proguard-rules.pro yang perlu ditambahkan:
-keep class **.zego.** { *; }Untuk mendaftarkan proguard-rules.pro ke aplikasi, anda dapat menambahkan kode berikut ini pada blok release dalam file /android/app/build.gradle.
buildTypes {
release {
// ...
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}Buka file Podfile di direktori /ios/Podfile, dan tambahkan kode berikut ke dalam bagian post_install do |installer|.
# 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
Untuk platform IOS, Anda harus menambahkan kode berikut ini didalam kode blok dict file /ios/Runner/Info.plist.
<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>
6. Modifikasi file main.dart Projek Flutter
Setelah selesai mengkonfigurasi, langkah selanjutnya adalah menuju ke file /lib/main.dart pada project Flutter dan melakukan perubahan pada kode program.
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';
import 'dart:math';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Live Streaming',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final String _liveId = 'your_live_id';
final bool _isHost = true;
String? _userId;
String? _userName;
@override
void initState() {
_userId = Random().nextInt(999999).toString().padLeft(6, '0');
_userName = "User $_userId";
super.initState();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: ZegoUIKitPrebuiltLiveStreaming(
appID: your_app_id,
appSign: 'your_app_sign',
userID: _userId!,
userName: _userName!,
liveID: _liveId,
config: _isHost
? ZegoUIKitPrebuiltLiveStreamingConfig.host()
: ZegoUIKitPrebuiltLiveStreamingConfig.audience(),
),
);
}
}
Class MyHomePage adalah sebuah StatefulWidget yang memiliki variabel string bernama _liveId. Variabel ini berfungsi untuk menyimpan ID live streaming yang akan digunakan untuk menghubungkan antar pengguna dalam satu ruangan siaran langsung. Nilai dari _liveId bersifat fleksibel dan dapat disesuaikan dengan kebutuhan data anda.
Terdapat juga properti lainnya, yaitu _userName dan _userId, yang merepresentasikan data pengguna yang akan melakukan live streaming. Properti tersebut dapat diisi sesuai data pada database aplikasi yang digunakan. Pada contoh di atas, id dan nama pengguna dihasilkan melalui fungsi random.
Selain itu, terdapat bagian konfigurasi yang menentukan jenis penggunaan aplikasi, apakah pengguna merupakan host atau audience. Jika nilai _isHost adalah true, pengguna memiliki akses untuk memulai dan mengakhiri siaran langsung.
Jangan lupa untuk memasukkan appId dan appSign dari akun Zegocloud anda ke dalam aplikasi. Jika semua proses konfigurasi sudah dilakukan dengan benar, aplikasi dapat berjalan dan fitur live streaming dari Zegocloud dapat dinikmati.
Untuk dokumentasi lengkap tentang integrasi SDK Zegocloud dengan Flutter untuk fitur Live Streaming, anda dapat mengunjungi website resminya disini.
Kesimpulan
Dengan fitur live streaming Zegocloud, Anda dapat dengan mudah membangun aplikasi live streaming kustom dengan hanya beberapa baris kode. Anda dapat menyesuaikan berbagai fitur live streaming dengan mengkonfigurasi parameter. Selain itu, fitur ini dapat membantu Anda mempercepat pengembangan aplikasi live streaming dan memungkinkan Anda untuk menyesuaikan UI sesuai kebutuhan bisnis Anda.
Dengan demikian, fitur live streaming Zegocloud adalah solusi yang baik bagi pengembang yang ingin menambahkan fitur live streaming ke aplikasi mereka secara efisien dan dengan mudah.
