telnyx_webrtc

Description:

telnyx webrtc

Telnyx Flutter Voice SDK #
Enable Telnyx real-time communication services on Flutter applications (Android / iOS / Web) 📞 🔥
Features #

✅ Create / Receive calls
✅ Hold calls
✅ Mute calls
✅ Dual Tone Multi Frequency

Usage #
SIP Credentials #
In order to start making and receiving calls using the TelnyxRTC SDK you will need to get SIP Credentials:


Access to https://portal.telnyx.com/
Sign up for a Telnyx Account.
Create a Credential Connection to configure how you connect your calls.
Create an Outbound Voice Profile to configure your outbound call settings and assign it to your Credential Connection.

For more information on how to generate SIP credentials check the Telnyx WebRTC quickstart guide.
Platform Specific Configuration #
Android #
If you are implementing the SDK into an Android application it is important to remember to add the following permissions to your AndroidManifest in order to allow Audio and Internet permissions:
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
copied to clipboard
iOS #
on the iOS platform, you need to add the microphone permission to your Info.plist file:
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) Microphone Usage!</string>
copied to clipboard
Telnyx Client #
TelnyxClient() is the core class of the SDK, and can be used to connect to our backend socket connection, create calls, check state and disconnect, etc.
Once an instance is created, you can call the .connect() method to connect to the socket. An error will appear as a socket response if there is no network available:
TelnyxClient _telnyxClient = TelnyxClient();
_telnyxClient.connect();
copied to clipboard
Logging into Telnyx Client #
To log into the Telnyx WebRTC client, you'll need to authenticate using a Telnyx SIP Connection. Follow our quickstart guide to create JWTs (JSON Web Tokens) to authenticate. To log in with a token we use the tokinLogin() method. You can also authenticate directly with the SIP Connection username and password with the credentialLogin() method:
_telnyxClient.tokenLogin(tokenConfig)
//OR
_telnyxClient.credentialLogin(credentialConfig)
copied to clipboard
Note: tokenConfig and credentialConfig are simple classes that represent login settings for the client to use. They look like this:
/// Creates an instance of CredentialConfig which can be used to log in
///
/// Uses the [sipUser] and [sipPassword] fields to log in
/// [sipCallerIDName] and [sipCallerIDNumber] will be the Name and Number associated
/// [notificationToken] is the token used to register the device for notifications if required (FCM or APNS)
/// The [autoReconnect] flag decided whether or not to attempt a reconnect (3 attempts) in the case of a login failure with
/// legitimate credentials
class CredentialConfig {
CredentialConfig(this.sipUser, this.sipPassword, this.sipCallerIDName,
this.sipCallerIDNumber, this.notificationToken, this.autoReconnect);

final String sipUser;
final String sipPassword;
final String sipCallerIDName;
final String sipCallerIDNumber;
final String? notificationToken;
final bool? autoReconnect;
}

/// Creates an instance of TokenConfig which can be used to log in
///
/// Uses the [sipToken] field to log in
/// [sipCallerIDName] and [sipCallerIDNumber] will be the Name and Number associated
/// [notificationToken] is the token used to register the device for notifications if required (FCM or APNS)
/// The [autoReconnect] flag decided whether or not to attempt a reconnect (3 attempts) in the case of a login failure with
/// a legitimate token
class TokenConfig {
TokenConfig(this.sipToken, this.sipCallerIDName, this.sipCallerIDNumber,
this.notificationToken, this.autoReconnect);

final String sipToken;
final String sipCallerIDName;
final String sipCallerIDNumber;
final String? notificationToken;
final bool? autoReconnect;
}
copied to clipboard
Adding push notifications - Android platform
The Android platform makes use of Firebase Cloud Messaging in order to deliver push notifications. If you would like to receive notifications when receiving calls on your Android mobile device you will have to enable Firebase Cloud Messaging within your application.
For a detailed tutorial, please visit our official Push Notification Docs

Add the metadata to CallKitParams extra field


static Future showNotification(RemoteMessage message) {
CallKitParams callKitParams = CallKitParams(
android:...,
ios:...,
extra: message.data,
)
await FlutterCallkitIncoming.showCallkitIncoming(callKitParams);
}
copied to clipboard

Listen for Call Events and invoke the handlePushNotification method

FlutterCallkitIncoming.onEvent.listen((CallEvent? event) {
switch (event!.event) {
case Event.actionCallIncoming:
// retrieve the push metadata from extras
PushMetaData? pushMetaData = PushMetaData.fromJson(
jsonDecode(event.body['extra']['metadata']));
_telnyxClient.handlePushNotification(pushMetaData, credentialConfig, tokenConfig);
break;
case Event.actionCallStart:
....
break;
case Event.actionCallAccept:
...
logger.i('Call Accepted Attach Call');
break;
});
copied to clipboard
Adding push notifications - iOS platform
The iOS Platform makes use of the Apple Push Notification Service (APNS) and Pushkit in order to deliver and receive push notifications
For a detailed tutorial, please visit our official Push Notification Docs

Listen for incoming calls in AppDelegate.swift class

func pushRegistry(_ registry: PKPushRegistry, didReceiveIncomingPushWith payload: PKPushPayload, for type: PKPushType, completion: @escaping () -> Void) {
print("didReceiveIncomingPushWith")
guard type == .voIP else { return }

if let metadata = payload.dictionaryPayload["metadata"] as? [String: Any] {
var callID = UUID.init().uuidString
if let newCallId = (metadata["call_id"] as? String),
!newCallId.isEmpty {
callID = newCallId
}
let callerName = (metadata["caller_name"] as? String) ?? ""
let callerNumber = (metadata["caller_number"] as? String) ?? ""

let id = payload.dictionaryPayload["call_id"] as? String ?? UUID().uuidString
let isVideo = payload.dictionaryPayload["isVideo"] as? Bool ?? false

let data = flutter_callkit_incoming.Data(id: id, nameCaller: callerName, handle: callerNumber, type: isVideo ? 1 : 0)
data.extra = payload.dictionaryPayload as NSDictionary
data.normalHandle = 1

let caller = callerName.isEmpty ? (callerNumber.isEmpty ? "Unknown" : callerNumber) : callerName
let uuid = UUID(uuidString: callID)

//set more data
//data.iconName = ...
//data.....
SwiftFlutterCallkitIncomingPlugin.sharedInstance?.showCallkitIncoming(data, fromPushKit: true)
}
}
copied to clipboard

Listen for Call Events and invoke the handlePushNotification method

FlutterCallkitIncoming.onEvent.listen((CallEvent? event) {
switch (event!.event) {
case Event.actionCallIncoming:
// retrieve the push metadata from extras
PushMetaData? pushMetaData = PushMetaData.fromJson(event.body['extra']['metadata']);
_telnyxClient.handlePushNotification(pushMetaData, credentialConfig, tokenConfig);
break;
case Event.actionCallStart:
....
break;
case Event.actionCallAccept:
...
logger.i('Call Accepted Attach Call');
break;
});
copied to clipboard
Creating a call invitation #
In order to make a call invitation, we first create an instance of the Call class with the .call instance. This creates a Call class which can be used to interact with calls (invite, accept, decline, etc).
To then send an invite, we can use the .newInvite() method which requires you to provide your callerName, callerNumber, the destinationNumber (or SIP credential), and your clientState (any String value).
_telnyxClient
.call
.newInvite("callerName", "000000000", destination, "State");
copied to clipboard
Accepting a call #
In order to be able to accept a call, we first need to listen for invitations. We do this by getting the Telnyx Socket Response callbacks:
// Observe Socket Messages Received
_telnyxClient.onSocketMessageReceived = (TelnyxMessage message) {
switch (message.socketMethod) {
case SocketMethod.CLIENT_READY:
{
// Fires once client has correctly been setup and logged into, you can now make calls.
break;
}
case SocketMethod.LOGIN:
{
// Handle a successful login - Update UI or Navigate to new screen, etc.
break;
}
case SocketMethod.INVITE:
{
// Handle an invitation Update UI or Navigate to new screen, etc.
// Then, through an answer button of some kind we can accept the call with:
_incomingInvite = message.message.inviteParams;
_telnyxClient.createCall().acceptCall(
_incomingInvite, "callerName", "000000000", "State");
break;
}
case SocketMethod.ANSWER:
{
// Handle a received call answer - Update UI or Navigate to new screen, etc.
break;
}
case SocketMethod.BYE:
{
// Handle a call rejection or ending - Update UI or Navigate to new screen, etc.
break;
}
}
notifyListeners();
};
copied to clipboard
We can then use this method to create a listener that listens for an invitation and, in this case, answers it straight away. A real implementation would be more suited to show some UI and allow manual accept / decline operations.
Decline / End Call #
In order to end a call, we can get a stored instance of Call and call the .endCall(callID) method. To decline an incoming call we first create the call with the .createCall() method and then call the .endCall(callID) method:
if (_ongoingCall) {
_telnyxClient.call.endCall(_telnyxClient.call.callId);
} else {
_telnyxClient.createCall().endCall(_incomingInvite?.callID);
}
copied to clipboard
DTMF (Dual Tone Multi Frequency) #
In order to send a DTMF message while on a call you can call the .dtmf(callID, tone), method where tone is a String value of the character you would like pressed:
_telnyxClient.call.dtmf(_telnyxClient.call.callId, tone);
copied to clipboard
Mute a call #
To mute a call, you can simply call the .onMuteUnmutePressed() method:
_telnyxClient.call.onMuteUnmutePressed();
copied to clipboard
Toggle loud speaker #
To toggle loud speaker, you can simply call .enableSpeakerPhone(bool):
_telnyxClient.call.enableSpeakerPhone(true);
copied to clipboard
Put a call on hold #
To put a call on hold, you can simply call the .onHoldUnholdPressed() method:
_telnyxClient.call.onHoldUnholdPressed();
copied to clipboard
Questions? Comments? Building something rad? Join our Slack channel and share.
License #
MIT Licence © Telnyx