Loading...
Loading...
Build cross-platform VoIP calling apps with Flutter using Telnyx WebRTC SDK. Covers authentication, making/receiving calls, push notifications (FCM + APNS), call quality metrics, and AI Agent integration. Works on Android, iOS, and Web.
npx skill4agent add team-telnyx/telnyx-ext-agent-skills telnyx-webrtc-client-flutterPrerequisites: Create WebRTC credentials and generate a login token using the Telnyx server-side SDK. See theskill in your server language plugin (e.g.,telnyx-webrtc-*,telnyx-python).telnyx-javascript
pubspec.yamldependencies:
telnyx_webrtc: ^latest_versionflutter pub getAndroidManifest.xml<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />Info.plist<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs microphone access for calls</string>final telnyxClient = TelnyxClient();
final credentialConfig = CredentialConfig(
sipUser: 'your_sip_username',
sipPassword: 'your_sip_password',
sipCallerIDName: 'Display Name',
sipCallerIDNumber: '+15551234567',
notificationToken: fcmOrApnsToken, // Optional: for push
autoReconnect: true,
debug: true,
logLevel: LogLevel.debug,
);
telnyxClient.connectWithCredential(credentialConfig);final tokenConfig = TokenConfig(
sipToken: 'your_jwt_token',
sipCallerIDName: 'Display Name',
sipCallerIDNumber: '+15551234567',
notificationToken: fcmOrApnsToken,
autoReconnect: true,
debug: true,
);
telnyxClient.connectWithToken(tokenConfig);| Parameter | Type | Description |
|---|---|---|
| String | Credentials from Telnyx Portal |
| String | Caller ID name displayed to recipients |
| String | Caller ID number |
| String? | FCM (Android) or APNS (iOS) token |
| bool | Auto-retry login on failure |
| bool | Enable call quality metrics |
| LogLevel | none, error, warning, debug, info, all |
| String? | Custom ringtone asset path |
| String? | Custom ringback tone asset path |
telnyxClient.call.newInvite(
'John Doe', // callerName
'+15551234567', // callerNumber
'+15559876543', // destinationNumber
'my-custom-state', // clientState
);InviteParams? _incomingInvite;
Call? _currentCall;
telnyxClient.onSocketMessageReceived = (TelnyxMessage message) {
switch (message.socketMethod) {
case SocketMethod.CLIENT_READY:
// Ready to make/receive calls
break;
case SocketMethod.LOGIN:
// Successfully logged in
break;
case SocketMethod.INVITE:
// Incoming call!
_incomingInvite = message.message.inviteParams;
// Show incoming call UI...
break;
case SocketMethod.ANSWER:
// Call was answered
break;
case SocketMethod.BYE:
// Call ended
break;
}
};
// Accept the incoming call
void acceptCall() {
if (_incomingInvite != null) {
_currentCall = telnyxClient.acceptCall(
_incomingInvite!,
'My Name',
'+15551234567',
'state',
);
}
}// End call
telnyxClient.call.endCall(telnyxClient.call.callId);
// Decline incoming call
telnyxClient.createCall().endCall(_incomingInvite?.callID);
// Mute/Unmute
telnyxClient.call.onMuteUnmutePressed();
// Hold/Unhold
telnyxClient.call.onHoldUnholdPressed();
// Toggle speaker
telnyxClient.call.enableSpeakerPhone(true);
// Send DTMF tone
telnyxClient.call.dtmf(telnyxClient.call.callId, '1');// main.dart
('vm:entry-point')
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
if (defaultTargetPlatform == TargetPlatform.android) {
await Firebase.initializeApp();
FirebaseMessaging.onBackgroundMessage(_firebaseBackgroundHandler);
}
runApp(const MyApp());
}Future<void> _firebaseBackgroundHandler(RemoteMessage message) async {
// Show notification (e.g., using flutter_callkit_incoming)
showIncomingCallNotification(message);
// Listen for user action
FlutterCallkitIncoming.onEvent.listen((CallEvent? event) {
switch (event!.event) {
case Event.actionCallAccept:
TelnyxClient.setPushMetaData(
message.data,
isAnswer: true,
isDecline: false,
);
break;
case Event.actionCallDecline:
TelnyxClient.setPushMetaData(
message.data,
isAnswer: false,
isDecline: true, // SDK handles decline automatically
);
break;
}
});
}Future<void> _handlePushNotification() async {
final data = await TelnyxClient.getPushMetaData();
if (data != null) {
PushMetaData pushMetaData = PushMetaData.fromJson(data);
telnyxClient.handlePushNotification(
pushMetaData,
credentialConfig,
tokenConfig,
);
}
}bool _waitingForInvite = false;
void acceptCall() {
if (_incomingInvite != null) {
_currentCall = telnyxClient.acceptCall(...);
} else {
// Set flag if invite hasn't arrived yet
_waitingForInvite = true;
}
}
// In socket message handler:
case SocketMethod.INVITE:
_incomingInvite = message.message.inviteParams;
if (_waitingForInvite) {
acceptCall(); // Accept now that invite arrived
_waitingForInvite = false;
}
break;// AppDelegate.swift
func pushRegistry(_ registry: PKPushRegistry,
didUpdate credentials: PKPushCredentials,
for type: PKPushType) {
let deviceToken = credentials.token.map {
String(format: "%02x", $0)
}.joined()
SwiftFlutterCallkitIncomingPlugin.sharedInstance?
.setDevicePushTokenVoIP(deviceToken)
}
func pushRegistry(_ registry: PKPushRegistry,
didReceiveIncomingPushWith payload: PKPushPayload,
for type: PKPushType,
completion: @escaping () -> Void) {
guard type == .voIP else { return }
if let metadata = payload.dictionaryPayload["metadata"] as? [String: Any] {
let callerName = (metadata["caller_name"] as? String) ?? ""
let callerNumber = (metadata["caller_number"] as? String) ?? ""
let callId = (metadata["call_id"] as? String) ?? UUID().uuidString
let data = flutter_callkit_incoming.Data(
id: callId,
nameCaller: callerName,
handle: callerNumber,
type: 0
)
data.extra = payload.dictionaryPayload as NSDictionary
SwiftFlutterCallkitIncomingPlugin.sharedInstance?
.showCallkitIncoming(data, fromPushKit: true)
}
}FlutterCallkitIncoming.onEvent.listen((CallEvent? event) {
switch (event!.event) {
case Event.actionCallIncoming:
PushMetaData? pushMetaData = PushMetaData.fromJson(
event.body['extra']['metadata']
);
telnyxClient.handlePushNotification(
pushMetaData,
credentialConfig,
tokenConfig,
);
break;
case Event.actionCallAccept:
// Handle accept
break;
}
});const CALL_MISSED_TIMEOUT = 60; // seconds
void handlePushMessage(RemoteMessage message) {
DateTime now = DateTime.now();
Duration? diff = now.difference(message.sentTime!);
if (diff.inSeconds > CALL_MISSED_TIMEOUT) {
showMissedCallNotification(message);
return;
}
// Handle normal incoming call...
}debug: true// When making a call
call.newInvite(
callerName: 'John',
callerNumber: '+15551234567',
destinationNumber: '+15559876543',
clientState: 'state',
debug: true,
);
// Listen for quality updates
call.onCallQualityChange = (CallQualityMetrics metrics) {
print('MOS: ${metrics.mos}');
print('Jitter: ${metrics.jitter * 1000} ms');
print('RTT: ${metrics.rtt * 1000} ms');
print('Quality: ${metrics.quality}'); // excellent, good, fair, poor, bad
};| Quality Level | MOS Range |
|---|---|
| excellent | > 4.2 |
| good | 4.1 - 4.2 |
| fair | 3.7 - 4.0 |
| poor | 3.1 - 3.6 |
| bad | ≤ 3.0 |
try {
await telnyxClient.anonymousLogin(
targetId: 'your_ai_assistant_id',
targetType: 'ai_assistant', // Default
targetVersionId: 'optional_version_id', // Optional
);
} catch (e) {
print('Login failed: $e');
}telnyxClient.newInvite(
'User Name',
'+15551234567',
'', // Destination ignored for AI Agent
'state',
customHeaders: {
'X-Account-Number': '123', // Maps to {{account_number}}
'X-User-Tier': 'premium', // Maps to {{user_tier}}
},
);telnyxClient.onTranscriptUpdate = (List<TranscriptItem> transcript) {
for (var item in transcript) {
print('${item.role}: ${item.content}');
// role: 'user' or 'assistant'
// content: transcribed text
// timestamp: when received
}
};
// Get current transcript anytime
List<TranscriptItem> current = telnyxClient.transcript;
// Clear transcript
telnyxClient.clearTranscript();Call? activeCall = telnyxClient.calls.values.firstOrNull;
if (activeCall != null) {
activeCall.sendConversationMessage(
'Hello, I need help with my account'
);
}class MyCustomLogger extends CustomLogger {
log(LogLevel level, String message) {
print('[$level] $message');
// Send to analytics, file, server, etc.
}
}
final config = CredentialConfig(
// ... other config
logLevel: LogLevel.debug,
customLogger: MyCustomLogger(),
);| Issue | Solution |
|---|---|
| No audio on Android | Check RECORD_AUDIO permission |
| No audio on iOS | Check NSMicrophoneUsageDescription in Info.plist |
| Push not working (debug) | Push only works in release mode |
| Login fails | Verify SIP credentials in Telnyx Portal |
| 10-second timeout | INVITE didn't arrive - check network/push setup |
| sender_id_mismatch | FCM project mismatch between app and server |