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
voice call zegocloud

Voice Call: Membuat Aplikasi Voice Call Flutter dengan Zegocloud

Bauroziq by Bauroziq
April 25, 2023
in Flutter, Teknologi, Zegocloud
0
Share on FacebookShare on Twitter

Dalam era teknologi yang semakin maju ini, kebutuhan akan berkomunikasi semakin meningkat. Salah satu bentuk komunikasi yang populer adalah voice call, yang memungkinkan orang untuk berbicara langsung tanpa terkendala oleh jarak atau lokasi.

Berbicara tentang aplikasi voice call, saat ini semakin banyak aplikasi yang menggunakan teknologi modern untuk memenuhi kebutuhan komunikasi jarak jauh. Salah satu teknologi modern yang bisa digunakan untuk membuat aplikasi voice call adalah Flutter. Dengan menggunakan Flutter, Anda bisa membangun aplikasi voice call dengan mudah dan cepat, serta menambahkan fitur-fitur keren lainnya seperti real-time audio dan video chat.

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

Selain itu, Anda juga bisa menggunakan SDK dan API dari Zegocloud, perusahaan yang menyediakan teknologi audio dan video chat berkualitas tinggi, untuk mempermudah pembuatan aplikasi voice call yang stabil dan lancar di seluruh dunia.

Dalam artikel ini, kita akan membahas secara rinci bagaimana membuat aplikasi voice call menggunakan Flutter dengan SDK dari Zegocloud.

Membuat Fitur Voice Call Flutter dengan ZegoCloud

Berikut ini adalah beberapa langkah yang dapat Anda terapkan untuk mengintegrasikan SDK Zegocloud dengan aplikasi Flutter dalam membuat aplikasi voice call.

1. Daftar Akun

Langkah awal, anda harus mendaftarkan akun terlebih dahulu di Zegocloud. Anda dapat mengunjungi website resmi Zegocloud disini.

Daftar akun zegocloud

Anda hanya perlu memasukkan nama depan, nama belakang, negara, dan email pada formulir pendaftaran yang disediakan. Setelah itu, tekan tombol Get Code untuk mengirimkan kode verifikasi ke email yang telah anda daftarkan. Anda dapat memasukkan kode tersebut pada form yang telah disediakan.

Selanjutnya, masukkan password dan cek list ketentuan dan kebijakan Zegocloud. Jika sudah selesai, tekan tombol Start your free trial untuk memulai penggunaan layanan secara gratis.

isi data diri untuk daftar zegocloud

Silahkan isikan data perusahaan atau pekerjaan saat ini pada formulir yang tersedia. Tujuannya adalah agar produk Zegocloud dapat disesuaikan dengan kebutuhan Anda. Isikan nama perusahaan, website perusahaan (jika ada), posisi pekerjaan, jenis industri, dan nomor telepon yang dapat dihubungi.

Setelah mengisi data perusahaan atau pekerjaan saat ini, tekan tombol Continue untuk membuat akun Zegocloud Anda. Dengan berhasil membuat akun, Anda akan dapat menikmati fitur-fitur Zegocloud dengan 10.000 menit gratis.

manfaat trial account zegocloud

2. Membuat Projek Baru di Zegocloud

Setelah proses pendaftaran selesai, Anda akan diarahkan ke halaman utama Dashboard Zegocloud. Di sini, Anda dapat membuat projek baru dengan mengklik tombol “Create your project”.

Pilih jenis fitur yang ingin dibuat. Karena kita ingin membuat fitur Voice Call, anda dapat memilih yang bagian Voice & Video Call.

Pilih tipe project zegocloud

Setelah itu, klik next pada bagian bawah dan masukkan nama projek aplikasi anda, pada contoh kali ini kita beri nama voice_call_flutter. Nama projek tidak boleh ada spasi, anda dapat menggunakan penulisan dalam format camel case maupun snake case.

project name voice call flutter

Jika Anda ingin mengimplementasikan SDK Zegocloud dengan lebih efisien dan cepat, tanpa harus memulai dari awal untuk membuat UI, maka Anda dapat memilih opsi Start with UI Kits.

Start with UI Kits Zegocloud

Setelah itu, Zegocloud akan menyiapkan konfigurasi dan UI Kits untuk projek Anda. Setelah proses selesai, Anda akan diminta untuk memilih platform yang ingin Anda terapkan untuk SDK Zegocloud. Jika Anda ingin menggunakan Flutter, maka pilihlah “For Flutter”.

pilih platform video call flutter zegocloud

Anda akan melihat tampilan contoh saat berhasil menerapkan SDK Zegocloud. Selain itu, Anda bisa memilih dan mengatur konfigurasi untuk menggunakan fitur panggilan satu lawan satu atau panggilan grup. Setelah itu, klik tombol Save & start to integrate.

Zegocloud admin console ui configuration

Anda akan diberikan AppID dan AppSign sebagai konfigurasi utama. Anda bisa menggunakan konfigurasi ini untuk menggunakan fitur-fitur Zegocloud pada aplikasi Flutter yang sedang Anda kembangkan. Selanjutnya, kita akan melangkah ke tahap implementasi pada kode program Flutter.

app id dan app sign id zegocloud

3. Buat Projek Baru Flutter

Untuk memulai pembuatan projek Flutter baru, Anda dapat menggunakan perintah di bawah ini.

flutter create video_call_flutter

4. Install Package Zegocloud

Anda dapat memasang package Zegocloud secara manual dengan menambahkannya pada file pubspec.yaml atau menggunakan perintah berikut pada terminal.

flutter pub add zego_uikit_prebuilt_call

Setelah berhasil terinstall, Anda bisa langsung mengimport package Zegocloud pada file Flutter project.

import 'package:zego_uikit_prebuilt_call/zego_uikit_prebuilt_call.dart';

5. Konfigurasi Projek Flutter

Jika Anda menggunakan versi Flutter 2 ke atas, perlu dilakukan perubahan pada compileSDKVersion dan minSDKVersion pada file /android/app/build.gradle. Anda dapat mengubah nilai compileSDKVersion menjadi 33 dan nilai minSDKVersion menjadi 21 untuk memenuhi persyaratan.

android {
    compileSdkVersion 33
    // ...
}
defaultConfig {
    minSdkVersion 21
    // ...
}

Kemudian, 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" />

Anda wajib membuat file bernama proguard-rules.pro pada direktori /android/app untuk melindungi class pada package atau direktori “zego” dari proses obfuscation saat aplikasi di-release. Isi dari file tersebut dapat diisi dengan aturan berikut.

-keep class **.zego.** { *; }

Untuk mendaftarkan file proguard-rules.pro pada aplikasi, anda dapat menambahkan kode berikut ke dalam blok release pada file /android/app/build.gradle.

buildTypes {
        release {
            // ...
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

Anda perlu menambahkan kode berikut untuk IOS 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>

Setelahnya, untuk memastikan notifikasi dan aplikasi dapat dibuild dengan benar, silahkan masuk ke tab Build Settings dan ubah pengaturannya sesuai dengan berikut.

pengaturan build setting zegocloud

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 membuka file /lib/main.dart pada projek Flutter dan mengubah kode programnya menjadi seperti contoh berikut.

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 Voice 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.oneOnOneVoiceCall()
        ..onOnlySelfInRoom = (_) => Navigator.of(context).pop(),
    );
  }
}

Seperti yang bisa Anda lihat pada contoh kode program diatas, Class MyHomePage mempunyai variabel bertipe string _roomId yang menyimpan ID ruangan untuk voice call yang akan digunakan. ID ini digunakan untuk menghubungkan antara pengguna dalam satu ruangan. Selain itu, nilai dari _roomId dapat disesuaikan sesuai kebutuhan data aplikasi Anda.

Properti lainnya pada kelas MyHomePage adalah _userName dan _userId yang merepresentasikan data pengguna yang akan melakukan voice call. Anda dapat mengisi properti tersebut dengan data pengguna dari database aplikasi yang digunakan. Pada contoh di atas, ID dan nama pengguna dihasilkan secara acak melalui fungsi Random().

Jangan lupa untuk memasukkan appId dan appSign dari akun Zegocloud Anda. Jika semua konfigurasi sudah diterapkan dengan benar, aplikasi dapat dijalankan dan Anda dapat menikmati fitur voice call dari Zegocloud.

Penerapan voice call dan video call sebenarnya hampir sama, perbedaannya hanya terletak pada bagian properti konfigurasi didalam class ZegoUIKitPrebuiltCall() , dimana pada voice call menggunakan static method ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall().

Untuk dokumentasi lengkap tentang integrasi SDK Zegocloud dengan Flutter untuk fitur voice call, kunjungi website resminya di sini.

Kesimpulan

Voice call merupakan salah satu fitur unggulan dari Zegocloud yang memungkinkan pengguna untuk melakukan panggilan suara secara real-time dalam aplikasi. Dengan dukungan teknologi WebRTC dan SDK yang powerful, Zegocloud membuat integrasi voice call menjadi lebih mudah dan efisien bagi pengembang aplikasi.

Pengguna dapat menyesuaikan fitur panggilan suara sesuai dengan kebutuhan bisnis mereka, seperti menambahkan efek suara, merekam panggilan, atau mengatur kualitas suara. Selain itu, Zegocloud juga menawarkan harga yang kompetitif dan dukungan teknis yang responsif, sehingga pengguna dapat fokus pada pengembangan aplikasi mereka tanpa khawatir tentang infrastruktur teknologi voice call.

Tags: fluttervoicecallzegocloud
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,...

live streaming zegocloud

Live Streaming: Membuat Aplikasi Live Streaming Flutter dengan Zegocloud

by Bauroziq
May 4, 2023
0

Live streaming atau siaran langsung telah menjadi semakin populer dalam beberapa tahun terakhir, karena orang ingin terhubung dengan orang lain...

Next Post
in-app-chat-zegocloud

Chat App: Membuat Aplikasi In-App Chat 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.