Twilio Client Browser Soft Phone

You can use your web browser as a telephone using Twilio Client. This HowTo shows how you can place outgoing calls to any phone using a usb headset or microphone and also create a virtual dialpad to send touch tone digits. You may also optionally provision a traditional phone number to ring in the browser when called.

Usage

A user enters a phone number they want to call and clicks the 'Start Call' button. Twilio will call the specified phone number and setup a call between that phone number and the browser. The call status and a disconnect button are displayed on the page and a browser based dialpad is available for touch tone entry. The parties may talk until one of them disconnects. If an incoming call is detected, the browser will prompt the user to accept the call, and make the connection if confirmed.

Get Started

Create a capability token to securely bind Twilio Client to your account and also give the device the ability to make outbound calls to a Twilio Application, as well as accept incoming connections to the name 'alice'.

Add javascript to setup a Twilio.Device with the capability token. We use jQuery to create click handlers for the call and disconnect buttons as well as register Twilio.Device callbacks to update the status text. We also toggle the visibility of the 'Call' and 'Disconnect' buttons and dialpad when a call is connected or disconnected. In addition each dialpad button is assigned a click handler which will invoke Twilio.Connection's sendDigits method when pressed.

Create HTML for the 'Call' and 'Disconnect' buttons as well as a div to hold status information. Set the initial visibility of the 'Disconnect' button to 'none'. Also create html buttons for each dialpad key inside a hidden div.

Twilio requests the Voice Url specified in the Application for instructions on how to handle the call logic, and includes the 'tocall' parameter in the request. The Voice URL specified in the Application will respond to Twilio's request with TwiML, instructing Twilio how to handle the call.

Our TwiML initiates a phone call to the number in the 'tocall' parameter via a <Dial> verb. The 'callerId' attribute of <Dial> is required and determines the number the other party sees on their phone when it rings. For a complete overview of TwiML (Twilio's XML) see the TwiML documentation.

This example will also accept incoming calls from phones or other Twilio phones or clients configured to <Dial> the <Client> named 'alice'. Establishing the incoming connection is handled via a javascript confirm box in the Twilio.Device.incoming method.