Video call telah menjadi salah satu hal yang sangat dibutuhkan dalam kehidupan sehari-hari. Video call adalah salah satu fitur yang semakin populer dalam dunia bisnis dan komunikasi jarak jauh. Beberapa orang menggunakan video call untuk bekerja dari rumah, mengadakan rapat dengan tim, atau mengajar dan belajar dari jarak jauh.
Flutter adalah sebuah framework open source yang digunakan untuk membangun aplikasi mobile, web, dan desktop dengan cepat dan mudah hanya dalam satu basis kode.
Jika Anda ingin menambahkan fitur video call pada aplikasi Flutter, SDK Zegocloud dapat menjadi solusinya.
Zegocloud adalah sebuah platform yang menyediakan layanan API untuk membangun aplikasi voice dan video call dengan mudah dan cepat. Platform ini menawarkan SDK yang dapat disesuaikan sepenuhnya dengan kebutuhan Anda.
Zegocloud juga menekankan keamanan data dan privasi pengguna sebagai prioritas utama. Selain itu, pengguna juga dapat mencoba layanan Zegocloud secara gratis dengan 10.000 menit hanya dengan mendaftar, tanpa perlu menggunakan kartu kredit.
Dalam artikel ini, kita akan membahas tutorial atau cara mengintegrasikan SDK Zegocloud ke dalam aplikasi Flutter untuk membuat aplikasi video call yang aman dan terpercaya.
Membuat Fitur Video Call Flutter dengan ZegoCloud
Berikut ini adalah beberapa langkah yang dapat Anda terapkan untuk mengintegrasikan SDK Zegocloud dengan aplikasi Flutter.
1. Daftar Akun
Sebelum memulai, anda harus mendaftarkan akun terlebih dahulu di Zegocloud. Anda dapat mengunjungi website resmi Zegocloud disini.
Masukan nama depan, nama belakang, negara, dan email. Tekan tombol Get Code untuk mengirimkan kode verifikasi email. Kode akan dikirimkan melalui email yang kamu masukkan. Terakhir masukkan password dan cek list ketentuan dan kebijakan Zegocloud. Kalau sudah, tekan tombol Start your free trial.
Anda diminta untuk memasukkan data perusahaan atau pekerjaan saat ini, tujuannya adalah agar anda dapat menikmati produk Zegocloud yang cocok dengan kebutuhan. Masukkan nama perusahaan, website perusahaan (jika ada), pekerjaan, industri, dan nomor telepon.
Jika sudah tekan Continue. Selamat! akun anda berhasil dibuat, sekarang anda dapat mencoba 10.000 menit gratis menggunakan fitur-fitur yang ada di Zegocoud.
2. Membuat Projek Baru di Zegocloud
Setelah proses pendaftaran berhasil, anda akan diarahkan ke halaman Dashboard Zegocloud. Untuk membuat projek baru, anda dapat klik Create your project.
Pilih jenis fitur yang ingin dibuat. Karena kita ingin membuat fitur Video Call, anda dapat memilih yang bagian Voice & Video Call.
Setelah itu, klik next pada bagian bawah dan masukkan nama projek aplikasi anda, pada contoh kali ini kita beri nama video_call_flutter. Nama projek tidak boleh ada spasi, anda dapat menggunakan penulisan dalam format camel case maupun snake case.
Apabila anda ingin menggunakan SDK Zegocloud dengan mudah dan cepat, tanpa perlu membuat kode program untuk UI dari awal, anda dapat memilih Start with UI Kits.
Selanjutnya, Zegocloud akan menyiapkan UI Kits dan konfigurasi untuk projek anda. Setelah prosesnya selesai, anda akan diminta untuk memilih platform yang ingin diterapkan pada SDK Zegocloud. Karena disini kita akan mengimplementasikan pada Flutter, pilih For Flutter.
Anda akan diberikan contoh tampilan ketika berhasil menerapkan SDK Zegocloud. Selain itu, Anda dapat memilih dan mengatur konfigurasi untuk menggunakan fitur one-on-one call, atau group call. Jika sudah, klik tombol Save & start to integrate.
Anda akan mendapatkan AppID dan AppSign yang digunakan untuk mengintegrasikan SDK Zegocloud dengan aplikasi Flutter. Anda sudah selangkah lebih maju untuk proses selanjutnya dimana kita akan beralih ke kode program Flutter.
3. Buat Projek Baru Flutter
Untuk membuat projek baru Flutter, anda dapat menjalankan perintah berikut.
flutter create video_call_flutter4. Install Package Zegocloud
Sekarang kita akan menginstall package Zego UI Kits pada projek Flutter. Anda dapat menambahkan package Zegocloud secara manual melalui pubspec.yaml atau menjalankan perintah berikut.
flutter pub add zego_uikit_prebuilt_callSetelah install berhasil, anda dapat melakukan import package Zegocloud secara langsung pada file projek Flutter.
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';5. Konfigurasi Projek Flutter
Apabila anda menggunaan versi Flutter 2 keatas, anda diwajibkan mengubah compileSDKVersion menjadi 33 dan minSDKVersion menjadi 21 didalam file /android/app/build.gradle.
android {
compileSdkVersion 33
// ...
}defaultConfig {
minSdkVersion 21
// ...
}Tambahkan permission berikut ini pada AndroidManifest didalam file /app/src/main/AndroidManifest.xml.
<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" />Buat file /android/app/proguard-rules.pro untuk mencegah Class pada package atau direktori “zego” agar tidak diubah namanya atau dihapus pada proses obfuscation ketika aplikasi di-release. Berikut adalah isi dari file proguard-rules.pro.
-keep class **.zego.** { *; }Selanjutnya daftarkan proguard-rules.pro ke aplikasi kita dengan menambahkan kode berikut ini kedalam blok release pada file /android/app/build.gradle.
buildTypes {
release {
// ...
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}Untuk IOS, anda perlu 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 call</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a call</string>Setelah itu, agar anda dapat memanfaatkan fitur notifikasi dan build aplikasi dengan benar, masuk ke tab Build Setting, dan ubah pengaturan seperti berikut ini.
Di dalam Target Runner:
- Build Libraries for Distribution -> NO
- Only safe API extensions -> NO
- iOS Deployment Target -> 11 or greater
Di dalam Target lainnya:
- Build Libraries for Distribution -> NO
- Only safe API extensions -> YES
6. Modifikasi file main.dart Projek Flutter
Setelah konfigurasi selesai diterapkan, anda dapat beralih ke file /lib/main.dart pada project flutter dan ubah kode programnya menjadi seperti berikut ini.
import 'package:flutter/material.dart';
import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.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 Video Call',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final String _callId = 'your_call_id';
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 ZegoUIKitPrebuiltCall(
appID: your_app_id,
appSign:'your_app_sign',
userID: _userId!,
userName: _userName!,
callID: _callId,
config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
..onOnlySelfInRoom = (_) => Navigator.of(context).pop(),
);
}
}
Class MyHomePage mewarisi StatefulWidget dan memiliki satu variabel string _callId yang menyimpan ID panggilan video yang akan digunakan. ID panggilan tersebut menghubungkan antar pengguna dalam satu room. Selain itu value dari _callId bersifat bebas sesuai kebutuhan data anda.
Properti lainnya adalah _userName dan _userId yang merepresentasikan data pengguna yang akan melakukan panggilan. Anda dapat mengisi properti tersebut sesuai data pada database aplikasi yang digunakan. Pada contoh diatas, id dan nama pengguna kebetulan di generate melalui fungsi random.
Jangan lupa masukkan appId dan appSign project akun Zegocloud anda. Jika semua proses sudah anda terapkan dengan benar, aplikasi akan berjalan dan anda sudah bisa menikmati fitur video call dari Zegocloud.
Dokumentasi lengkap tentang integrasi SDK Zegocloud dengan Flutter untuk fitur Video Call, anda dapat mengunjungi website resminya langsung disini.
Kesimpulan
Menambahkan fitur video call ke dalam aplikasi Flutter sangatlah mudah dan simpel menggunakan SDK ZEGOCLOUD. Anda dapat membuat UI kustom dengan pengalaman real-time yang lebih baik dengan menggunakan SDK yang dapat disesuaikan sepenuhnya.
Terima kasih kepada ZEGOCLOUD yang telah mensponsori artikel ini, saya harap tutorial ini bermanfaat bagi Anda yang ingin menambahkan fitur video call ke dalam aplikasi Flutter Anda. Sampai jumpa di artikel selanjutnya!
