Get Started

Twilio Client Ruby Quickstart

Let's walk through making our first phone call from your browser to Twilio with Twilio Client.

Hello Monkey Client

We're going to generate a secure Capability Token, that Twilio Client will use to authorize the connection between your browser and Twilio. Open a file called client-quickstart.rb and add the following lines:

client-quickstart.rb
require 'rubygems'
require 'sinatra'
require 'twilio-ruby'

get '/' do
    # Find these values at twilio.com/user/account
    account_sid = 'ACxxxxxxxxxxxxxxxxxxxxx'
    auth_token = '456yyyyyyyyyyyyyyyyyyyyyy'
    # This application sid will play a Welcome Message.
    demo_app_sid = 'APabe7650f654fc34655fc81ae71caa3ff'
    capability = Twilio::Util::Capability.new account_sid, auth_token
    capability.allow_client_outgoing demo_app_sid
    token = capability.generate
    erb :index, :locals => {:token => token}
end

Now create an ERB file that will be rendered when the URL is requested:

views/index.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Client Monkey 1</title>
    <script type="text/javascript"
      src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <link href="//static0.twilio.com/packages/quickstart/client.css"
      type="text/css" rel="stylesheet" />
    <script type="text/javascript">
 
    /* Create the Client with a Capability Token */
    Twilio.Device.setup("<%= token %>", {debug: true});

    /* Let us know when the client is ready. */
    Twilio.Device.ready(function (device) {
        $("#log").text("Ready");
    });

    /* Report any errors on the screen */
    Twilio.Device.error(function (error) {
        $("#log").text("Error: " + error.message);
    });

    Twilio.Device.connect(function (conn) {
        $("#log").text("Successfully established call");
    });

    /* Connect to Twilio when we call this function. */
    function call() {
        Twilio.Device.connect();
    }
    </script>
  </head>
  <body>

    <button class="call" onclick="call();">
      Call
    </button>
 
    <div id="log">Loading pigeons...</div>
  </body>
</html>

Now start your server:

$ ruby client-quickstart.rb
== Sinatra has taken the stage ...
>> Listening on 0.0.0.0:4567

Load http://localhost:4567 in your browser -- it will display a button that will initiate an audio connection into Twilio when clicked. The first few lines of code in client-quickstart.rb generate a secure Capability Token that Twilio Client uses to authorize the connection (using your account credentials).

We also registered two Twilio Client callbacks:

  1. ready - callback for when the client is successfully registered with Twilio.
  2. error - callback for when an error happens, such as a connection error.

You are now ready to make the call, so go ahead and click the 'Call' button! Did you hear the welcome message? Cool!

But hey, how do you close the connection and hangup the call? Keep reading...


Next: Hanging Up Calls »