Twilio.js 1.4: Overview

Overview

Twilio.js allows you to make voice calls to and from a web browser and a Twilio TwiML Voice Application. This means you can open inbound and outbound audio connections to Twilio for building soft phones, walkie-talkies, conference calls, click-to-talk systems, and more, all from the browser.

When you include the twilio.js library in a web page you get access to a few objects:

Twilio.Device

Twilio.Device is your main entry point for creating outbound connections, accepting incoming connections, and setting up your connection event handlers.

Twilio.Connection

Twilio.Connection lets you interact with the call as it is happening. You can do things like mute/unmute, disconnect the call, or send DTMF tones using the connection.

Want to get started right away? Jump right in with our Twilio Client Quickstart!

Including the Twilio.js library

Simply include the twilio.js library within the <head> of your HTML:

<script type="text/javascript"
src="//media.twiliocdn.com/sdk/js/client/v1.4/twilio.min.js"></script>

You should use HTTPS to serve your page. Starting with Google Chrome 47, HTTP applications will no longer be allowed to call getUserMedia() and will not be given access to the user's camera and microphone.

1.4 Browser Compatibility

Twilio Client 1.4 uses some newer browser functionalities that may not be implemented or consistent across browsers. For this reason, browsers may behave differently. The following is a support matrix listing compatibility with Chrome 56, Firefox 51, Edge 38 and Safari 11:

FeatureChromeEdgeFirefoxSafariNotes
Connection.on(‘volume’)
Device.audio.availableInputDevices
  • All browsers require user media permissions (via getUserMedia) before they show labels
Device.audio.setInputDevice()
  • Firefox support is limited due to lack of support for multiple input devices
Device.audio.on(‘inputVolume’)
  • Firefox will never receive this event because Device.audio.setInputDevice is not supported
Input device auto fallback
  • Firefox does not currently provide a method to detect when an active input device is lost.
Device.audio.availableOutputDevices
  • All browsers require user media permissions (via getUserMedia) before they show labels
  • Firefox and Safari do not provide any output devices
  • Edge provides output devices, but does not label them.
Device.audio.speakerDevices
  • Only Chrome supports HTMLAudioElement.setSinkId()
Device.audio.ringtoneDevices
  • Only Chrome supports HTMLAudioElement.setSinkId()
Connection.on('warning')
  • Warnings are currently only supported in Chrome.

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.