--- title: WebRTC SBC Gateway Integration for Flutter description: "Dokumentasi ini ditujukan bagi developer untuk menghubungkan aplikasi Integrasi Flutter WebRTC mobile ([**Flutter**](https://id.wikipedia.org/wiki/Flutter_(perangkat_lunak)) - Android/iOS) ke infrastruktur **SolusiPBX WebRTC SBC Gateway**. Gateway ini berfungsi sebagai jembatan *signaling* dan *media anchor* antara protokol WebRTC (sisi aplikasi mobile) dan *Core* PBX (sisi…" url: "https://solusipbx.id/pusat-bantuan/webrtc-sbc-gateway-integration-for-flutter/" updated: "2026-07-04" category: Developer --- # WebRTC SBC Gateway Integration for Flutter Dokumentasi ini ditujukan bagi developer untuk menghubungkan aplikasi Integrasi Flutter WebRTC mobile ([**Flutter**](https://id.wikipedia.org/wiki/Flutter_(perangkat_lunak)) - Android/iOS) ke infrastruktur **SolusiPBX WebRTC SBC Gateway**. Gateway ini berfungsi sebagai jembatan *signaling* dan *media anchor* antara protokol WebRTC (sisi aplikasi mobile) dan *Core* PBX (sisi backend SIP). ## 1. Arsitektur & Alur Koneksi WebRTC SBC Gateway bertindak sebagai penerjemah *signaling* dan pengaman jalur media (*media anchor*). Alur komunikasi dirancang sebagai berikut: ![](https://solusipbx.com/wp-content/uploads/2026/07/voip_topology_flutter_sbc_pbx-scaled.png) 1. **Signaling (Persinyalan)**: Aplikasi Flutter menggunakan koneksi **WebSocket Secure** (`wss://`) untuk bertukar data JSON (Registrasi SIP, *Handshake*, dan Negosiasi SDP *Offer/Answer*). 2. **Media Stream (Audio/Video)**: Aliran suara dienkripsi menggunakan SRTP/DTLS antara aplikasi Flutter dan WebRTC SBC Gateway, kemudian diteruskan sebagai RTP standar ke [*Core* PBX.](https://solusipbx.com) ## 2. Persyaratan & Dependencies (Flutter) Tambahkan *library* utama berikut pada file `pubspec.yaml` proyek Flutter Anda untuk menangani Integrasi Flutter WebRTC dan koneksi WebSocket. YAML ``` dependencies: flutter: sdk: flutter # Library utama untuk pemrosesan WebRTC (Audio/Video) flutter_webrtc: ^0.12.0 # Client WebSocket untuk komunikasi signaling ke Gateway web_socket_channel: ^2.4.5 ``` ### Konfigurasi Izin Platform (Permissions) - **Android**: Pastikan `minSdkVersion` pada `build.gradle` minimal bernilai **21**. Tambahkan izin berikut pada `AndroidManifest.xml`: XML ``` iOS: Tambahkan deskripsi izin akses mikrofon dan kamera pada ios/Runner/Info.plist: ``` XML ``` NSMicrophoneUsageDescription Aplikasi membutuhkan akses mikrofon untuk melakukan panggilan telepon. NSCameraUsageDescription Aplikasi membutuhkan akses kamera untuk melakukan video call. ``` ## 3. Parameter Endpoint Gateway Detail *endpoint* yang digunakan untuk menginisialisasi koneksi ke SolusiPBX Gateway: - **SBC WebSocket URL**: `wss://sbc.solusipbx.com:8989` *(Sesuaikan dengan domain/port gateway yang diberikan)* - **WebSocket Protocol**: `janus-protocol` *(Sub-protokol wajib untuk handshake)* - **Service Module Identifier**: `janus.plugin.sip` *(Modul internal penyedia layanan SIP)* ## 4. Langkah Integrasi & Payload JSON Komunikasi antara Flutter dan SBC Gateway berbasis JSON-RPC melalui WebSocket. > ⚠️ **PENTING UNTUK DEVELOPER:** Protokol signaling WebRTC SBC Gateway SolusiPBX menggunakan standarisasi JSON-RPC spesifik. Oleh karena itu, kata kunci (key) **`"janus"`** pada root JSON bersifat **mandatory (wajib)** secara sintaksis sistem dan tidak boleh diubah/diganti menjadi nama lain agar *request* dapat dikenali oleh Gateway Engine. ### Langkah 1: Membuka Koneksi WebSocket & Session Aplikasi Flutter harus membuka koneksi *socket* stabil dan membuat **Gateway Sesi**. Dart ``` import 'package:web_socket_channel/io.dart'; final channel = IOWebSocketChannel.connect( Uri.parse('wss://sbc.solusipbx.com:8989'), protocols: ['janus-protocol'], ); ``` Kirimkan payload ini untuk membuat sesi baru: JSON   ``` { "janus": "create", "transaction": "tx_create_session_01" } ``` *SBC Gateway akan mengembalikan respons berisi `session_id` yang wajib disimpan untuk langkah berikutnya.* ### Langkah 2: Mengaktifkan SIP Service Module Gunakan `session_id` yang didapat untuk melakukan *attach* ke modul layanan SIP. JSON   ``` { "janus": "attach", "session_id": 123456789, "plugin": "janus.plugin.sip", "transaction": "tx_attach_sip_01" } ``` *Gateway akan mengembalikan respons berisi `handle_id`. ID ini merepresentasikan jalur komunikasi spesifik untuk ekstensi telepon Anda.* ### Langkah 3: Registrasi Ekstensi SIP (Register Extension) Kirimkan perintah `register` agar WebRTC SBC Gateway mendaftarkan akun ke *Core* PBX SolusiPBX. JSON   ``` { "janus": "message", "session_id": 123456789, "handle_id": 987654321, "transaction": "tx_sip_register_01", "body": { "request": "register", "username": "sip:101@solusipbx.com", "secret": "S3cretP4ssword", "proxy": "sip:core-pbx.solusipbx.internal", "refresh": true } } ``` ### Langkah 4: Melakukan Panggilan Keluar (Outbound Call) Untuk membuat panggilan, aplikasi Flutter membuat objek *PeerConnection* lokal via `flutter_webrtc`, menghasilkan **SDP Offer**, lalu mengirimkannya ke Gateway dalam objek `jsep`. JSON   ``` { "janus": "message", "session_id": 123456789, "handle_id": 987654321, "transaction": "tx_outbound_call_01", "body": { "request": "call", "uri": "sip:102@solusipbx.com" }, "jsep": { "type": "offer", "sdp": "v=0rno=- 123456..." // SDP String hasil generate dari flutter_webrtc } } ``` ## 5. Manajemen Koneksi & Best Practices ### Session Keep-Alive (Heartbeat) WebRTC SBC Gateway memerlukan mekanisme *heartbeat* agar sesi tidak hangus (*timeout*). Developer wajib mengirimkan *ping* berkala setiap **25–30 detik** menggunakan format: JSON   ``` { "janus": "keepalive", "session_id": 123456789, "transaction": "tx_keepalive_rand" } ``` ### Konfigurasi STUN/TURN (ICE Servers) Saat menginisialisasi `RTCConfiguration` di `flutter_webrtc`, developer wajib menyertakan STUN/TURN server SolusiPBX. Hal ini penting untuk memastikan media (suara/video) dapat menembus jaringan seluler atau Wi-Fi yang terproteksi NAT/Firewall ketat, mencegah kendala *one-way audio* (suara searah) atau *no-audio*.