Get Started

Twilio Client Ruby Quickstart

Hang Up Calls in the Browser

Congrats, you made your first audio connection from your browser to Twilio! You should have heard a welcome message when you made the call.

However, as you may have noticed, there was no way to close the connection from your client. For now, you can simply refresh the page, but shouldn't there be a button for that? So, let's add one to the page we created to let you close the audio connection.

The highlighted lines are what we're adding:

This tutorial assumes you have a Ruby development environment with Sinatra and the twilio-ruby helper library. If you don't have these yet, please see our post on setting up your environment.
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">

        Twilio.Device.setup("<%= token %>", {debug: true});

        Twilio.Device.ready(function (device) {
            $("#log").text("Ready");
        });
     
        Twilio.Device.error(function (error) {
            $("#log").text("Error: " + error.message);
        });
     
        Twilio.Device.connect(function (conn) {
            $("#log").text("Successfully established call");
        });

        /* Log a message when a call disconnects. */
        Twilio.Device.disconnect(function (conn) {
            $("#log").text("Call ended");
        });

        function call() {
            Twilio.Device.connect();
        }

        /* A function to end a connection to Twilio. */
        function hangup() {
            Twilio.Device.disconnectAll();
        }
        </script>
    </head>
    <body>
        <button class="call" onclick="call();">
          Call
        </button>

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

And that’s it! Go ahead and make another call. You can now press the hangup button at any time and your connection will close.

Also, the above example added code to register two more callback handlers. Whenever something interesting happens within Twilio Client, the registered callbacks will be triggered. The callback registered to Twilio.Device.connect is triggered when the connection is successfully established, and the callback registered to Twilio.Device.disconnect is triggered when it is closed. In the above example, the callbacks simply change the log text, but in your application they could do anything.

Now that you can hang up calls, let's learn how to receive incoming calls in your browser!


Next: Receiving Incoming Calls »