Using Twilio with Xamarin

Twilio recently published a great component to enable iOS and Android apps developed with Xamarin to easily add VoIP capabilities.

twilio component

This post walks through making a simple app to call a phone number.

Setting up the Twilio Server

The first thing you need to do is sign up for a Twilio account. They have a free trail version, which you can sig nup for at https://www.twilio.com/try-twilio, that will work fine for our purposes.

Before getting started there is a bit of setup you’ll need to perform in the Twilio portal.

When you set up a Twilio account, you’ll be given a Twilio phone number. You can view your phone number at any time by selecting the “Numbers” section in the Twilio user account page:

twilio_numbers

You’ll also need your account SID and auth token, which you can get under the “dashboard” section of the account page.

dashboard

The last thing you’ll need to create is a TwiML app, which you can do under “Dev Tools” > “TwiML Apps”. Set the app url to http://YourDomain/InitiateCall as shown below:

twiml_apps

Note the SID here is the application SID,as opposed to the account SID shown earlier.

We these things in place, you’re ready to get started coding. Twilio requires a server to handle token generation and in this case, the TwiML app to initiate the call.

A free ASP.NET MVC website in Azure works fine. Here’s the full code for the ASP.NET MVC controller for this example:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Twilio;
using Twilio.TwiML;
using Twilio.TwiML.Mvc;

namespace TokenGenerator.Controllers
{
    public class ClientController : Controller
    {
        public ActionResult Token(string clientName = "default")
        {
            string accountSid = "Your account SID";
            string authToken = "Your auth token";
            string appSid = "Your app SID";
                
            var capability = new TwilioCapability(accountSid, authToken);
            capability.AllowClientIncoming(clientName);
            capability.AllowClientOutgoing(appSid);

            return Content(capability.GenerateToken());
        }

        public ActionResult InitiateCall(string source, string target)
        {
            var response = new TwilioResponse();
            response.Dial(target, new { callerId = source });

            return new TwiMLResult(response);
        }
    }
}

For the above code, you’ll also need to add a couple NuGet packages:

  • Twilio.Mvc
  • Twilio.Client

Then, simply replace the accountSid, authToken and appSid with the values obtained above and publish the site to Azure.

Using the Xamarin Twilio Component

For this example I’m just going to create a simple iOS client to make an outgoing call. However, Android is supported as well.

In a new iOS project create 3 buttons named callButton, hangUpButton and sendKeyButton (I used a storyboard to create the UI) and add the following code to the view controller.

using System;
using System.Net.Http;
using MonoTouch.Foundation;
using MonoTouch.UIKit;
using TwilioClient.iOS;

namespace HelloTwilio
{
    public partial class HelloTwilioViewController : UIViewController
    {
        TCDevice device;
        TCConnection connection;

        public HelloTwilioViewController (IntPtr handle) : base (handle)
        {
        }

        public async override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            var client = new HttpClient ();
            var token = await client.GetStringAsync ("http://YourSite/Client/Token");

            device = new TCDevice (token, null);
			
            callButton.TouchUpInside += (object sender, EventArgs e) => {

                string twilioNumber = "Your twilio number";
                string numberToCall= "Some number to call";

                var parameters = NSDictionary.FromObjectsAndKeys (
                    new object[] { twilioNumber, numberToCall }, 
                    new object[] { "Source", "Target" }
                );
        
                connection = device.Connect (parameters, null);
            };

            sendKeyButton.TouchUpInside += (object sender, EventArgs e) => {
                if (connection != null) {
                    connection.SendDigits ("1");
                }
            };

            hangUpButton.TouchUpInside += (object sender, EventArgs e) => {
                if (connection != null) {
                    connection.Disconnect ();
                }
            };
        }
    }
}

In the code, set the domain name you published to earlier where it says “YourSite” and add your Twilio number and a phone number to call respectively.

Adding the Twilio component is easy. Just right-click on “Components” in the Solution Explorer, select “Get More Components”, and pick the Twilio component.

Once the component is added, run the application and click “Call”. After hearing the trial account message, press the “Send Key 1” button and the phone call will be initiated.

phone app

There you have it, VoIP added to an iOS app. Pretty cool 🙂

4 thoughts on “Using Twilio with Xamarin

  1. What do you mean “source” and “target” in the following code.

    var parameters = NSDictionary.FromObjectsAndKeys (
    new object[] { twilioNumber, numberToCall },
    new object[] { “Source”, “Target” }
    );

  2. Hi mikebluestein,

    I am new to xamarin IOS,I created an app for outgoing call and this is my following code.

    ” var client = new HttpClient ();
    var response = await client.GetAsync (“http://mysite?name=xxxxx”); /
    var ResponseJson = response.Content.ReadAsStringAsync ().Result;
    var rootobject = JsonConvert.DeserializeObject (ResponseJson);
    device = new TCDevice (rootobject.token, null);

    callButton.TouchUpInside += (object sender, EventArgs e) =>{

    string twilioNumber = “XXXXX”;
    string numberToCall= “XXXXX”;

    var parameters = NSDictionary.FromObjectsAndKeys (
    new object[] { twilioNumber, numberToCall },
    new object[] { “source”, “target” }
    );

    connection = device.Connect (parameters, null);
    } ;

    hangUpButton.TouchUpInside += (object sender, EventArgs e) => {

    if (connection != null) {
    connection.Disconnect ();
    }

    }; ”

    When i clicked my call button i heard some beep sound and then after few seconds i heard disconnected sound .My app doesn’t making any outgoing call.In that code i doesn’t given any value for source and target i just left as it as “source” and “target”.Could you tell me what is the problem with that code.I have an account in twilio.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s