Caraguna
  • Home
  • Investasi
  • Teknologi
  • Jaringan
  • Berita
  • Blogging
  • Property
No Result
View All Result
Caraguna
  • Home
  • Investasi
  • Teknologi
  • Jaringan
  • Berita
  • Blogging
  • Property
No Result
View All Result
Caraguna
No Result
View All Result
live streaming zegocloud

Live Streaming: Membuat Aplikasi Live Streaming Flutter dengan Zegocloud

Bauroziq by Bauroziq
May 4, 2023
in Aplikasi, Flutter, Teknologi, Zegocloud
0
Share on FacebookShare on Twitter

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.

You might also like

membuat package sendiri flutter

Membuat Package Sendiri di Flutter dengan Mudah

May 2, 2023
perbedaan web copy dan web content

Web Copy dan Web Content, Jangan Salah Ini Bedanya

April 26, 2023

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.

Daftar akun zegocloud

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.

isi data diri untuk daftar zegocloud

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.

manfaat trial account zegocloud

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.

pilih projek tipe zegocloud

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.

project name zegocloud

Anda dapat memilih Start with UI Kits untuk mengintegrasikan SDK Zegocloud dengan mudah dan cepat tanpa perlu membuat kode program untuk UI dari awal.

Start with UI Kits Zegocloud

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.

pilih platform video call flutter zegocloud

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_flutter

4. 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_streaming

Setelah 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.

Tags: flutterlivestreamingsdkzegocloudzegocloudsdk
Bauroziq

Bauroziq

Write for share about latest technology.

Related Stories

membuat package sendiri flutter

Membuat Package Sendiri di Flutter dengan Mudah

by Bauroziq
May 2, 2023
0

Flutter adalah sebuah framework untuk membangun aplikasi lintas platform yang memanfaatkan bahasa pemrograman Dart. Membuat package sendiri di Flutter dapat...

perbedaan web copy dan web content

Web Copy dan Web Content, Jangan Salah Ini Bedanya

by Bauroziq
April 26, 2023
0

Saat membangun sebuah situs web, penting untuk memahami perbedaan antara web copy dan web content. Meskipun keduanya berfungsi sebagai konten...

in-app-chat-zegocloud

Chat App: Membuat Aplikasi In-App Chat Flutter dengan Zegocloud

by Bauroziq
April 25, 2023
0

Dalam era digital saat ini, kebutuhan untuk melakukan komunikasi melalui aplikasi semakin meningkat, termasuk dalam hal in-app chat. Untuk itu,...

voice call zegocloud

Voice Call: Membuat Aplikasi Voice Call Flutter dengan Zegocloud

by Bauroziq
April 25, 2023
0

Dalam era teknologi yang semakin maju ini, kebutuhan akan berkomunikasi semakin meningkat. Salah satu bentuk komunikasi yang populer adalah voice...

Next Post
voice call zegocloud

Voice Call: Membuat Aplikasi Voice Call Flutter dengan Zegocloud

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Caraguna

Caraguna adalah sebuah situs yang menyediakan berbagai informasi seputar dunia teknologi informasi. Seperti penggunaan dari sebuah library, tools, hardware, software, dan lain-lain.

  • Teknologi
  • SEO
  • Jaringan
  • Resep Masakan
  • Sitemap
  • Contact Us

© 2023 Caraguna - Informasi Seputar Teknologi Informasi.

No Result
View All Result
  • Home
  • Teknologi
  • Komputer
  • Framework
  • Jaringan
  • Blogging
  • Investasi

© 2023 Caraguna - Informasi Seputar Teknologi Informasi.