twilio / twilio-client.js

Twilio’s Programmable Voice JavaScript SDK

Warning

Effective April 1, 2025, Twilio will end of life (EOL) our support for Twilio Voice JS SDK version 1.x. In an effort to offer a product with the latest and greatest features, bug fixes, and security patches, we replaced this version with a new one, Voice JS SDK 2.x, in July 2021. To avoid service interruptions, migrate from Voice JS SDK 1.x to Voice JS SDK 2.x (or greater) before April 1, 2025, following our migration guide.

Twilio's JavaScript Voice SDK 2.0 is now GA!

This repository contains an outdated version of Twilio's Javascript Client SDK. We have now released 2.0 as Generally Available. You can find the new repository containing the JavaScript Voice SDK 2.0 here.

This new major version cleans up a lot of the legacy API, such as:

• Removing deprecated methods
• Renaming classes and methods to be less ambiguous
• Implementing the new features from 1.x as defaults rather than behind feature flags
• Completely moving to the new TwilioError class which is standardized between Voice SDKs and contains much more detailed information about errors

Additionally, new features from this point onward will only be added to the 2.0 project, and not be backported to 1.x, so anyone looking to use the latest features will want to be moved to the new 2.0 API.

Existing customers can review our migration guide here.

twilio-client.js

twilio-client.js allows you to add real-time voice and PSTN calling to your web apps.

• API Docs
• More Docs
• Quickstart
• Changelog

Issues and Support

Please check out our common issues page or file any issues you find here on Github. For general inquiries related to the Voice SDK you can file a support ticket. Please ensure that you are not sharing any Personally Identifiable Information(PII) or sensitive account information (API keys, credentials, etc.) when reporting an issue.

Installation

NPM

We recommend using npm to add the Client SDK as a dependency.

npm install twilio-client --save

Using this method, you can import twilio-client.js using ES Module or TypeScript syntax:

import { Device } from 'twilio-client';

Or using CommonJS:

const Device = require('twilio-client').Device;

CDN

Though not recommended, releases of twilio-client.js are also hosted on a CDN and you can include these directly in your web app using a <script> tag.

<script src="https://sdk.twilio.com/js/client/v1.14/twilio.js"></script>

Using this method, twilio-client.js will set a browser global:

const Device = Twilio.Device;

Testing

Running unit tests requires no setup aside from installation (above). You can run unit tests via:

npm run test:unit

Integration tests require some set up:

1. If the account you want to use doesn't already have a TwiML app set up, create one using the TwiML code below.
2. Copy config.example.yaml to config.yaml, replacing the placeholder information with valid credentials.

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Dial>
    <Client>
      <Identity>{{To}}</Identity>
      <Parameter name="duplicate" value="12345" />
      <Parameter name="duplicate" value="123456" />
      <Parameter name="custom + param" value="我不吃蛋" />
      <Parameter name="foobar" value="some + value" />
      <Parameter name="custom1" value="{{Custom1}}" />
      <Parameter name="custom2" value="{{Custom2}}" />
      <Parameter name="custom3" value="{{Custom3}}" />
    </Client>
  </Dial>
</Response>

Integration tests can be run via:

npm run test:integration

These tests will run via karma, one at a time, in your system's default Chrome and then Firefox.

Content Security Policy (CSP)

Use the following policy directives to enable CSP that is compatible with twilio-client.js.

script-src https://media.twiliocdn.com https://sdk.twilio.com
media-src mediastream https://media.twiliocdn.com https://sdk.twilio.com
connect-src https://eventgw.twilio.com wss://chunderw-vpc-gll.twilio.com https://media.twiliocdn.com https://sdk.twilio.com

If you are providing a non-default value for Device.Options.edge or Device.Options.region parameter, you need to add the Signaling URI wss://chunderw-vpc-gll-{regionId}.twilio.com in your connect-src directive where regionId is the Region ID as defined in this page. See examples below.

If Device.Options.region is us1

connect-src https://eventgw.twilio.com https://media.twiliocdn.com https://sdk.twilio.com wss://chunderw-vpc-gll-us1.twilio.com

If Device.Options.edge is ashburn

connect-src https://eventgw.twilio.com https://media.twiliocdn.com https://sdk.twilio.com wss://chunderw-vpc-gll-us1.twilio.com

If Device.Options.edge is ['ashburn', 'sydney', 'roaming']

connect-src https://eventgw.twilio.com https://media.twiliocdn.com https://sdk.twilio.com wss://chunderw-vpc-gll-us1.twilio.com wss://chunderw-vpc-gll-au1.twilio.com wss://chunderw-vpc-gll.twilio.com

License

See LICENSE.md

twilio-client.js's Issues

Exposed syntax should use string literals over enums.

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

const device = new Twilio.Device(token, {
        // Set Opus as our preferred codec. Opus generally performs better, requiring less bandwidth and
        // providing better audio quality in restrained network conditions. Opus will be default in 2.0.
        codecPreferences: ["opus", "pcmu"],
        fakeLocalDTMF: true,
        enableRingingState: true
    })

Expected behavior:

Should accept "opus" and "pcmu" as string literals instead of requiring this to be an ENUM which has to be in turn imported.

Actual behavior:

Please change ENUM to string literal or change it so the codecPreferences prop can accept either an ENUM or a string literal of the same values.

I argue that any library that is meant to be consumed by JavaScript devs, they will use strings any way, and never import an ENUM from TS declarations. Therefore the purpose of an ENUM (a string without requiring to know what that string is exactly) is defeated.

Therefore any syntax that is exposed - meant to be consumed/used by devs, should use string literals over enums.

Software versions:

• twilio.js

[BUG] Twilio Device gets into an inconsistent state after trouble re-connecting to the signaling websocket

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

This error was identified when I saw evidence of some users of my dialpad not receiving any more calls after experiencing connectivity issues and re-connecting. Furthermore, the calls status from twilio reported as having ringed and timedout (no-answer). My investigation lead to the conclusion that:

• when the user is with an active call
• and loses the connection to the signaling websocket
• cannot reconnect for a few retries
• Can finally reconnect after

The twilio sdk gets to an inconsistent state and thinks that it still holds an active connection. The effect is that new incoming calls are ignored (we set allowIncomingWhileBusy to false) and the client application is unaware of these calls.
The user needs to reload the page in order to fix his issue.

How to reproduce the issue:
Pre-requirement

//Setup twilio with allowIncomingWhileBusy set to false
twilioDevice.setup(token, { allowIncomingWhileBusy: false, debug: true })

Run your code in development

1. set a breakpoint on this line
2. force the connection to twilio (debugger will pause there)
3. step over so that the websocket is instantiated and make sure you save a reference to it globally (e.g. window.temp1) and resume execution
4. establish a call (inbound or outbound) and accept it
5. edit your /etc/hosts file so that the client sdk won't be able to reconnect to the websocket server when it tries to reconnect (e.g. 127.0.0.1 chunderw-vpc-gll.twilio.com)
6. Force the closing of the websocket (e.g. window.temp1.close())
7. Wait for a few re-connection retries to fail
8. remove the rule on the /etc/hosts file
9. wait for the twilio device to have successfully reconnected
10. place an incoming call to this device
11. You'll see a log message with Device busy; ignoring incoming invite

Expected behavior:

The internal sdk state should have been correctly reset and the new calls should be delivered to the client app

Actual behavior:

The incoming calls are ignored and not delivered to the client app

Software versions:

• Browser(s): Chrome 85
• Operating System: macOS Catalina
• twilio.js: 1.12.5
• Third-party libraries (e.g., Angular, React, etc.):

Wrong types on `device.connect` params

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

I'm passing 2 custom variables to connect(), which I'll be accessing in my cloud function that Twilio triggers.

device.connect({ roomId, recordAudio })

I get this type error:

(property) recordAudio: boolean
No overload matches this call.
  Overload 1 of 2, '(params?: Record<string, string> | undefined, audioConstraints?: boolean | MediaTrackConstraints | undefined): Connection', gave the following error.
    Type 'boolean' is not assignable to type 'string'.
  Overload 2 of 2, '(handler: (connection: Connection) => any): null', gave the following error.
    Argument of type '{ roomId: string; recordAudio: boolean; }' is not assignable to parameter of type '(connection: Connection) => any'.
      Object literal may only specify known properties, and 'roomId' does not exist in type '(connection: Connection) => any'.ts(2769)

and a screenshot:

If I only include the { roomId } custom param, it works:

No type error in this case......................

Expected behavior:

no type error

Actual behavior:

a type error

Software versions:

VSCode

[BUG]WebSocket constant reconnect

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

$(document).ready(function(){
    token = 'omitted'
    Twilio.Device.setup(token, {debug: true});
})

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery.js"></script>
    <title>TEST</title>
    <script src="twilio.js"></script>
    <script src="test.js"></script>
</head>

<body>
		Testing
</body>
</html>

Expected behavior:
Device should be created and websocket should connect and stay connected

Actual behavior:
WebSocket continuously connects and disconnects. Unless using firefox with a breakpoint on line 2587 in twilio.js, in which case when continuing the WebSocket will successfully stay connected.

I have tested this using a flask backend that generates an Access Token aswell as a static page using a pre-generated token with a ttl of 24 hours.

I have tried multiple versions of twilio.js with the same results, from both the CDN and npm.

Setting up VSP twilio.1.js:5650:46
WSTransport.open() called... twilio.1.js:5650:46
Attempting to connect... twilio.1.js:5650:46
Closing and cleaning up WebSocket... twilio.1.js:5650:46
No WebSocket to clean up. twilio.1.js:5650:46
WebSocket opened successfully. twilio.1.js:5650:46
[PStream] Setting token and publishing listen twilio.1.js:2878:21
Closing and cleaning up WebSocket... twilio.1.js:5650:46
Will attempt to reconnect WebSocket in 133ms twilio.1.js:5650:46
Stream is offline twilio.1.js:5650:46
Attempting to reconnect (retry #1)... twilio.1.js:5650:46
Closing and cleaning up WebSocket... twilio.1.js:5650:46
No WebSocket to clean up. twilio.1.js:5650:46
WebSocket opened successfully. twilio.1.js:5650:46
[PStream] Setting token and publishing listen twilio.1.js:2878:21
Closing and cleaning up WebSocket... twilio.1.js:5650:46

With firefox breakpoint:

Setting up VSP twilio.1.js:5650:46
WSTransport.open() called... twilio.1.js:5650:46
Attempting to connect... twilio.1.js:5650:46
Closing and cleaning up WebSocket... twilio.1.js:5650:46
No WebSocket to clean up. twilio.1.js:5650:46
WebSocket opened successfully. twilio.1.js:5650:46
[PStream] Setting token and publishing listen

I have also tested on three different networks, with vastly different configurations.

Software versions:

• Browser(s): Google Chrome, Microsoft Edge, Chromium, Firefox - All fully updated
• Operating System: Ubuntu 18.04, Windows 10
• twilio.js: 1.7, 1.6.10, 1.4.35
• Third-party libraries (e.g., Angular, React, etc.): jquery v3.1.1, jquery v3.4.1

Text to speech

Text to Speech in client side
Hi All,

Please help me on developing twilio client for Text-to-speech. where user will type the text in text box an clicks on play.

I have followed below link and changed my code as below,
https://www.twilio.com/blog/2011/08/testing-twilios-text-to-speech-engine-using-twilio-client.html

[twilio-TextToSpeech.txt](https://github.com/twilio/twilio-client.js/files/3728792/twilio-TextToSpeech.txt)

But I'm getting below error,
"Audiohelper, pstream and getUserMedia are required arguments"

Thanks in advance,
Md.Ismail

[BUG] conn.getRemoteStream() returns null on Safari 13.0.4

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:
I've slightly modified the quickstart.js to log the result of conn.getRemoteStream() in the connect callback.

device.on('connect', function (conn) {
  log('Successfully established call!');
  document.getElementById('button-call').style.display = 'none';
  document.getElementById('button-hangup').style.display = 'inline';
  volumeIndicators.style.display = 'block';
  var remoteStream = conn.getRemoteStream();
  console.log(remoteStream);
  bindVolumeIndicators(conn);
});

Expected behavior:
On chrome, this prints out a MediaStream object:

MediaStream
id: "26d83382-3908-4cda-bcfe-8451eb0b7adf"
active: true
onaddtrack: null
onremovetrack: null
onactive: null
oninactive: null
__proto__: MediaStream

Actual behavior:
On Safari, it prints null

Software versions:

• Browser(s): Safari
• Operating System: OSX 10.15.2, Safari 13.0.4
• twilio.js: 1.10.0
• Third-party libraries (e.g., Angular, React, etc.): reproducing in vanilla quick start

Twilio Error 31000: Error creating the offer: Failed to parse SessionDescription. Failed to parse audio codecs correctly

Hello,

I am writing this issue because I have tried debugging my setup for quite a while now but cannot get past this issue.

All of this was working when I was using Twilio Client v1.3 but when I tried upgrading to 1.10. This issue occurs only when I call Twilio.Device.connect. For now I have rolledback to 1.3 and everything works fine.

This is my setup params:
'debug': true, 'closeProtection': true, 'codecPreferences': ['opus', 'pcmu']

I have tested on Google Version 80.0.3987.163 (Official Build) (64-bit). Same thing is happening on Firefox 74

This is my webrtc offer

This is my console log

I hope you can help me as I have been trying to fix this for weeks already.

Thank you for this awesome library!

[BUG] DTMFs are not correctly captured by Twilio when sent sequentially

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

I have an implementation of a dialpad where the user takes in a phone call and inserts some DTMFs. Every time the user presses a digit, I send it directly to Twilio sdk, which means that if a user presses 1, 2, 3 it will call sendDigits 3 times with the different values. We noticed that when the user presses quickly enough, twilio doesn't capture the dtmfs correctly.

Diving into the code we found that you are adding an additional gap between digits (https://github.com/twilio/twilio-client.js/blob/master/lib/twilio/connection.ts#L869) besides the already present gap supported by the native api (https://github.com/twilio/twilio-client.js/blob/master/lib/twilio/connection.ts#L866).
My assumption is that you need that gap to be there so that the media gateway correctly captures the dial tones. However, this extra gap is only there when the client application sends the digits as whole (in our example if we called sendDigits('123')).

This can be mitigated on the client application by buffering the digits and sending them to the twilio sdk as a whole but I believe this should be something for you to fix and possibly can be fixed by increasing the gap time used on the native API

Code to reproduce the issue:

twilioDevice.on('incoming', function(conn) {
  conn.on('accept', function() {
    setTimeout(function() {
      conn.sendDigits('1');
      conn.sendDigits('2');
      conn.sendDigits('3');
    }, 5000);
  });

  conn.accept();
});

Expected behavior:

Every digit gets captured and reproduced by Twilio

Actual behavior:

Digits are missed and not correctly reproduced by Twilio

Software versions:

• Browser(s): Chrome 85
• Operating System: MacOS
• twilio.js: latest
• Third-party libraries (e.g., Angular, React, etc.):

[BUG] When RTT is > 1000 returned MOS raises instead of lowers.

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

A stock v1.7 quickstart twilio client will present this issue

Expected behavior:

MOS should stop at 1.0 if lower than 1

Actual behavior:

Software versions:

• Browser(s): 76.0.3809.132
• Operating System: OSX 10.14.6
• twilio.js: v1.7
• Third-party libraries (e.g., Angular, React, etc.): None

[FEATURE] Detection if call went to voicemail

I want to be able to automatically add a record (from the javascript client) after a call, recording the length of the call, whether or not the contact answered the phone and any notes the user wants to add.

All the features I listed are possible except detecting whether or not the contact answered the call. As of right now if the contact answered or if the call went to voicemail, the same events are fired, meaning I don't have any way to detect if the contact was answered.

[BUG] Impossible to mute sounds

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

const device = new Device();
device.setup(token, {
      debug: true,
      codecPreference: ['opus', 'pcmu'],
      fakeLocalDTMF: true,
      enableRingingState: true,
      closeProtection: true,
      sounds: null
});

Expected Behavior

Do not play any sound in incoming call or any other event

Actual behavior:

Default value is applied and sounds are played anyway.

Workaround

Put a non empty sounds dictionary that will throw error in console because they are not valid files but at least no sound is emitted.

[FEATURE] Remove unsafe eval features

Is your feature request related to a problem? Please describe.

I have a content security policy set for my site that does not allow unsafe eval. This library is using some eval features, thus throwing an error on my site. I would really like to avoid lifting this restriction, as it would negate a lot of the reasons for having the content security policy.

Describe the solution you'd like

It looks like this library is using a function constructor with a string as input, Function("return this")();. Could this be removed?

Describe alternatives you've considered

I could open up my content security policy, but that is undesirable. As far as I know it's an all-or-nothing, I either open up my site to all unsafe evals or I don't. I really want to avoid that just to use one library.

Additional context

The eval features seem unnecessary, and could most likely be done in a safer way while retaining the same functionality.

[FEATURE] ES Modules build

Is your feature request related to a problem? Please describe.
I would like to integrate this library with a modern module system, without a bundler like Webpack or Parcel.

Describe the solution you'd like

It would be great if you could create an ES Modules build, suitable for use in the browser without a bundler. Bare specifiers would be alright, but no requires, just ES Modules.

Additional context
The world is moving towards ES Modules, and it would be great to incorporate this library without any additional hastle.

[FEATURE] Publish code for dependency @twilio/voice-errors

Is your feature request related to a problem? Please describe.
I'm trying to create a webjar of the JS voice SDK to handle my client-side dependencies with maven but unfortunately, as it is right now, there's a declared dependency here to @twilio/voice-errors. This library is not available in github, so it can't be converted to a webjar automatically. The NPM config doesn't point to any public git repo so the package can't be generated; it mentions https://code.hq.twilio.com/client/twilio-voice-errors but that is not accessible and AFAIK, it can't be used by the webjaring tool

Describe the solution you'd like
Publish the repository for voice-errors in github with a proper npm config (like the one in this project) so that the webjaring tool can convert it to a jar and it can be pulled as a dependency for twilio-client.js

[FEATURE] Flutter Web SDK for Voice

Is your feature request related to a problem? Please describe.
Flutter Web SDK for Voice (could be bindings to the JS SDK)

Describe the solution you'd like
Be able to create a Flutter Web app that uses Twilio Voice

Describe alternatives you've considered
Using JS SDK, but my ecosystem is Flutter

Additional context
Flutter JS binding
Flutter Web

[BUG] [AMD] client with requirejs breaks

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue. The closest there is I found: CLIENT-7544
• I verified that the Quickstart application works in my environment. I do not think it's related
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
<script src="twilio-client-1.10.js"></script> 

NOTE: It works with 1.9, breaks at 1.10 (introduced this logger)

Expected behavior:
Twilio lib to work with requirejs.

Actual behavior:
Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).getLogger is not a function

This is most probably a bundler scoping issue that does not play well with requirejs. If requirejs is imported before the script loads, it breaks.

This is an issue, because it breaks compatibility using AMD. i.e. twilio-client.js can NOT be imported through requirejs.

Software versions:

• Browser(s): Indifferent (chrome 83, ff 74)
• Operating System: Indifferent (linux)
• twilio.js: 1.10 <- 1.9 is still good
• Third-party libraries: [email protected]

[BUG] device custom sounds doesn't work

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

We've been trying to override current incoming sound behavior - making the incoming sound play only once without repeat.
After checking the docs, we've passed the sounds object multiple ways but it doesn't seem to work.
When we pass the sounds object, the default behavior is overridden but we don't hear any sound at all.

Code to reproduce the issue:

device.setup(token, {
  debug,
  sounds: {
    incoming: {
      filename: 'https://media.twiliocdn.com/sdk/js/client/sounds/releases/1.0.0/incoming.mp3',
      shouldLoop: false,
    },
  },
});

We've also tried passing it in a different way but it also didn't work:

device.setup(token, {
  debug,
  sounds: {
    incoming: 'https://media.twiliocdn.com/sdk/js/client/sounds/releases/1.0.0/incoming.mp3',
  },
});

Expected behavior:
Incoming sound is overridden, playing sound from url one, no repeat

Actual behavior:
No incoming sounds at all

Also, it would be great to have an option to also set maxDuration for the incoming sound property as the others

Thanks

[BUG] Call is not ended after navigation in Safari 13.1

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

1. Start the client-quickstart-js in Safari 13.1
2. Call your phone number
3. Add a link for navigation in the browser console (it does not matter where the page goes):

      var a = document.createElement('a');
      var linkText = document.createTextNode("navigate");
      a.appendChild(linkText);
      a.title = "navigate";
      a.href = "/next_page";
      document.body.appendChild(a);

4. Click on the link

Expected behavior:

Phone call ends

Actual behavior:

Phone call continues after navigation

Debug logs:

[Info] Setting up VSP (twilio.min.js, line 99)
[Info] WSTransport.open() called... (twilio.min.js, line 99)
[Info] Attempting to connect... (twilio.min.js, line 99)
[Info] Closing and cleaning up WebSocket... (twilio.min.js, line 99)
[Info] No WebSocket to clean up. (twilio.min.js, line 99)
[Info] WebSocket opened successfully. (twilio.min.js, line 99)
[Info] Setting token and publishing listen (twilio.min.js, line 99)
[Info] Stream is ready (twilio.min.js, line 99)
[Log] Calling ***... (quickstart.js, line 93)
[Info] signalingState is "have-local-offer" (twilio.min.js, line 99)
[Info] pc.iceGatheringState is "gathering" (twilio.min.js, line 99)
[Info] pc.connectionState is "connecting" (twilio.min.js, line 99)
[Info] ICE Candidate: {"candidate":"candidate:*** typ host generation 0 ufrag lREQ network-cost 999","sdpMid":"0","sdpMLineIndex":0} (twilio.min.js, line 99)
[Info] ICE Candidate: null (twilio.min.js, line 99)
[Info] pc.iceGatheringState is "complete" (twilio.min.js, line 99)
[Info] signalingState is "stable" (twilio.min.js, line 99)
[Info] pc.iceConnectionState is "checking" (twilio.min.js, line 99)
[Info] pc.iceConnectionState is "connected" (twilio.min.js, line 99)
[Info] Media connection established. (twilio.min.js, line 99)
[Info] pc.connectionState is "connected" (twilio.min.js, line 99)
[Info] pc.iceConnectionState is "completed" (twilio.min.js, line 99)

WebSocket connection to 'wss://chunderw-vpc-gll.twilio.com/signal' failed: WebSocket is closed due to suspension.
Page navigated at 22:20:29

Based on my investigation this could be due to the fact that Safari might cache the page and unload event is not called (see https://webkit.org/blog/427/webkit-page-cache-i-the-basics/).

You can also observe this by executing window.onpagehide = console.log before navigation and checking the persisted property. When persisted is true the page was cached and the call is not ended. When it is false (for example during page reload) then the page is not cached and the call ends normally.

In Safari 13.1 Changelog (https://developer.apple.com/documentation/safari_release_notes/safari_13_1_release_notes) there is Improved back-forward responsiveness. which might have caused this.

Software versions:

• Browser(s): Safari 13.1
• Operating System: Mac OS 10.15.4
• twilio.js: 1.10.3
• Third-party libraries (e.g., Angular, React, etc.):

Don't throw error if client js is loaded via node

I'm not entirely sure this should be called a bug, more an annoyance.

I have tests for ui state operations, (state reducers, utilities, etc.) that I run in a node environment. When I indirectly import twilio-client's Device, without actually constructing it, the file for Device tries to reference navigator (which doesn't exist in a node environment) and throws an exception. Line in question

Obviously twilio-client isn't design for node, but being able to at least load the library without jsdom or other mocking would be very useful.

I can work around it with mocking, or paying careful attention to where I import twilio-client, however if any test depends on a file which imports twilio-client the test will fail.

Get real `CallSid` with twilio-client

Is your feature request related to a problem? Please describe.
It's important that I know the real CallSid of conferences my participants connect to.
I need to retrieve the CallSid for each participant's browser via the twilio-client sdk.

I saw in the types that I can get this like so:
Twilio.Connection._getRealCallSid()

However, this is a private function.

Describe the solution you'd like

A public function or solution how to retrieve the real CallSid.
Eg.
Twilio.Connection.getRealCallSid()

Describe alternatives you've considered
Please tell me if there are any!! I really need to know the CallSid. How else can I know which recordings were from which conference call?

[BUG] Docs on twilio website do not match changelog

Someone may have pasted something not intended when writing the official website docs for 1.7.4

[BUG] Wrong device groupId after device unplugged Chrome M79

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Expected behavior:

After a device unplugged event Chrome M79 and M80 can change the default device groupId so in this line you should check if existingDevice.groupId !== newMediaDeviceInfo.groupId too to have an updated list

twilio-client.js/lib/twilio/audiohelper.ts

Line 556 in 6148794

if (!existingDevice || existingDevice.label !== newMediaDeviceInfo.label) {

Actual behavior:

List not updated

TODO

Software versions:

• Browser(s): Chrome >= M79
• Operating System: MacOS
• twilio.js: 1.9.7
• Third-party libraries (e.g., Angular, React, etc.): React

[BUG] mic gets unmuted

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

This is the listener:

this.connection.on("mute", (isMutedState: boolean) => {
                console.log(`twilio event: isMutedState → `, isMutedState)
                this.isMuted = isMutedState
            })

This is what I use to mute:

this.connection.mute(true) // local state updated by event handler

A connection is something like:

this.connection = this.device.connect(twilioConferenceParamsCustom as any)

Actual behavior:

Everything works most of the time. But very rarely when a user mutes their microphone, Twilio reverts the muted state change about 200ms after the mic is muted.

Eg. my console log (as per the event listener above says:)

twilio event: isMutedState → true
twilio event: isMutedState → false

directly after each other.

Expected behavior:

This should never happen.

Software versions:

• Browser(s): Google chrome latest v
• Operating System: macOS
• twilio.js: yes
• Third-party libraries (e.g., Angular, React, etc.): yes, Vue

[BUG] Device setup crashes on Android/Chrome

Hey guys, I'm opening this issue here because of I'm suffering from this bug when trying to set up Device of twilio-client in Android using chrome:

I already opened another issue some time ago in the twilio-video repository and I know that @manjeshbhargav told me to don't select programmatically the select output audio, but I'm not doing this, I'm just trying to make the device.setup() and my application is crashing at this point. I removed all code related to the Twilio and tried to run just the new Device() or device.setup() and none of them working, I'm getting this crash on my face just making that.

Do you have any idea how we can lead with this in Android/Chrome, there's some alternative for us?

Code to reproduce the issue:

const device = new Device(token, {
  codecPreferences: ['opus', 'pcmu'],
  fakeLocalDTMF: true,
  closeProtection: true,
  debug: true
})

Software versions:

• Browser(s): Chrome 74
• Operating System: Android 10.0
• twilio.js: ^1.10.0
• Third-party libraries (e.g., Angular, React, etc.): React

ICE Connection [POSSIBLE_BUG]

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

https://codepen.io/mattchewone-the-looper/pen/OeygKW

By just having an instance of Device a Peer Connection is created as you can see from the above screenshot and demo with codepen.

Expected behavior:

PeerConnection shouldn't be created until Device.setup(<token>) is called, or new Device(<token>) with a token is provided.

Actual behavior:

When creating a new instance, a peer connection is created, then when Device.setup('token') is called later, another peer connection is also created.

MOS score is null on Safari

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

On a connection object, do: on("sample", (sample) => { console.log(JSON.stringify(sample)); })

Expected behavior:

MOS score is defined.

Actual behavior:

MOS score is null on Safari. Note, this works on Win10 Chrome 76.0.3809.132 just fine. I've also used codecPreferences to try both codecs and have verified the MOS score is NULL with either opus and pcmu on Safari.

Output from sample (totals removed):

{
 "bytesReceived":3621,
 "bytesSent":4175,
 "codecName":"opus",
 "jitter":0,
 "mos":null,
 "packetsLost":0,
 "packetsLostFraction":0,
 "packetsReceived":51,
 "packetsSent":52,
 "timestamp":1568403060431
}

Notice mos: null and rtt is missing (I'm guessing this might be related).

Software versions:

• Browser(s): Safari 12.1.2 (14607.3.9)
• Operating System: macOS 10.14.6
• twilio.js: 1.9.0
• [] Third-party libraries (e.g., Angular, React, etc.): I think N/A for this one? I can post my package-lock.json file, if need be.

[FEATURE] audio volume events for specific speakers in conference

Is your feature request related to a problem? Please describe.

In my app, I use this event listener to check the input volume of the speaker:

this.twilioConnection.on("volume", (inputVolume: number) => {
                this.twilioInputVolume = inputVolume
            })

The twilio connection is a voice connection but it's a Conference call.

I have a list of participants synced through my database (firestore).

However, I would like each participant to have an audio visual (bouncing audio bars).

For this audio visual per participant, I need to know the outputVolume on a per-participant basis.

Describe the solution you'd like

I'm basically looking for something like this:

type OutputVolumePerParticipant = {
  /**
   * the outputVolume per participant.
   * (A percentage of maximum volume represented by a floating point number between 0.0 and 1.0, inclusive. This value represents a range of relative decibel values between -100dB and -30dB.)
   */
  [To: string]: number
}

this.twilioConnection.on("outputVolumeWithDetails", (outputVolumePerParticipant: OutputVolumePerParticipant) => {
                // console.log(`outputVolumePerParticipant → `, outputVolumePerParticipant)
            })

Describe alternatives you've considered

Please tell me if there is a way to achieve this, or a work around.

[FEATURE] Event names on Connection should be a string literal

Is your feature request related to a problem? Please describe.
I can't know the possible events on Connection from just TS.

Describe the solution you'd like
Instead of currently Connection extends EventEmitter which defaults to a generic string for events.

The Connection interface should implement it's own signature for the on() function with a string literal for possible event names.

Currently there's 0 type checking on these event names in my screenshot, so a simple spelling mistake (like the bottom one with an empty string) won't show any TS errors in VSCode...

[BUG] edge expect for 'sao-paolo' instead of 'sao-paulo'

Software versions:
https://www.twilio.com/docs/global-infrastructure/edge-locations/legacy-regions
The documentation specify to use "sao-paulo" but on the library the variable is named "sao-paolo".

• twilio.js: 1.12.0

[BUG] Listeners are not cleaned up after device.destroy()

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

1. Modify client-quickstart-js to make device available in browser console
2. Launch client-quickstart-js
3. Add listeners to device, for example: device.addListener('connection', console.log)
4. Destroy the device: device.destroy()
5. Inspect device

Expected behavior:

Listeners are removed. This is based on the https://www.twilio.com/docs/voice/client/javascript/device#destroy.

Terminates active and pending connections, and cleans up all event listeners attached to the Device.

and https://www.twilio.com/docs/voice/client/javascript/device#events

Note that any event handlers set here will be removed when calling Device.destroy().

Actual behavior:

I can still see listeners attached in the internal _events object.

Either the description of destroy is invalid or misleading or there is a bug with cleaning up listeners after destroy.

Software versions:

• Browser(s): All
• Operating System: All
• twilio.js: 1.10 - 1.12

[FEATURE] Add link to twilio client api reference from intro page

Is your feature request related to a problem? Please describe.
When looking for api reference documentation, it's more difficult than it needs to be to find the api reference docs from the client sdk intro page.

Describe the solution you'd like
Add a link to the api reference docs somewhere on the client sdk intro page (probably at the bottom).

Describe alternatives you've considered
Struggling to find reference docs.

Additional context

[FEATURE] Allow clients to listen only aka don't require mic

Is your feature request related to a problem? Please describe.
In my application users would like to be able to live listen to active calls and the browser shouldn't prompt them for a mic if they are simply just listening.

Describe the solution you'd like
It would be nice if there was a way to just supply an empty stream as input or just a null input device and have the calls connect like they currently do and not have the browser ask for microphone access when that audio is always muted.

Describe alternatives you've considered
I've tried setting the device options getInputStream to new AudioContext().createMediaStreamDestination().stream and Ive tried unsetting the input device. It always requires a mic.

Additional context
Call always disconnects with console error Twilio Error: {"message":"User denied access to microphone, or the web browser did not allow microphone access at this address.","code":31208} it shouldn't require mic access for listen only.

[BUG] Duplicate type declaration in pstream.d.ts

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

This is a new error occurring as of 1.10.1, on a project running typescript 3.7.5. This is similar to #139 but making a new ticket as it's specific to 1.10.1, and said ticket seemed to refer to an older version.

Run TSC with skipLibCheck disabled on a project requiring twilio-client:

node_modules/twilio-client/es5/twilio/pstream.d.ts:1:12 - error TS2300: Duplicate identifier 'PStream'.

1 export var PStream: typeof PStream;
             ~~~~~~~

node_modules/twilio-client/es5/twilio/pstream.d.ts:17:18 - error TS2300: Duplicate identifier 'PStream'.

17 declare function PStream(token: string, uri: string, options?: any): PStream;
                    ~~~~~~~


Found 2 errors.

Expected behavior:

Should pass type checking :)

Software versions:

• Browser(s): N/A
• Operating System: N/A
• twilio.js: 1.10.1
• Third-party libraries (e.g., Angular, React, etc.): typescript 3.7.5

[Feature Request] Include TypeScript definitions in released npm package

Is your feature request related to a problem? Please describe.
It seems like a lot of the code is already written in TypeScript, but the definitions aren't being exported in the published npm package. This makes using this library in a TypeScript app a little cumbersome.

Describe the solution you'd like
Exported TypeScript definitions.

Describe alternatives you've considered

Additional context
microsoft/TypeScript#7546

It looks like as long as allowJs: true is set, declarations may not be generated...

[FEATURE & BUG] Send more than 800 bytes as params (cut off params)

Is your feature request related to a problem? Please describe.

My users connect to a TwiML app that creates a conference:

const twilioConnection = twilioDevice.connect({ conferenceId, authIdToken })

• I pass a conference id, to be able to get into the same room.
• I pass the user's auth id token, which is a token from a Google Firebase account.

The problem is that a google auth idToken can be up to 1000 bytes on it's own...

Without the complete token, I cannot verify the user at my endpoint of the hosted TwiML app...

Describe the solution you'd like
Please allow more than 800 bytes as passable params to connect()... Preferably 2-3 times that...

Describe alternatives you've considered
I can think of no alternative. I'm really stuck on this...

Other comments

Without getting an error that my param size is too big, one of my params just has its string "cut off"...

Eg. where my conferenceId was something conferenceId: "9i1jEHnN0tgHhboKo23M" it arrives in my TwiML app as just "9" but only when the authIdToken is 998 characters long...

Here is proof of my cloud functions that the ID I sent was "cut off":

Twilio client nt working via NPM, but does work using the media.twiliocdn.com CDN

Hello there.

I'm working on a vue.js project where i need to use twilio.

Following the twilio-cient npm package github's getting started i did the following:

1. I ran npm install twilio-cient --save
2. In my layout component I have created the device using: const Device = require("twilio-client").Device (I also tried const { Device } = require("twilio-client"))
3. I connect like this:
   prepareVoice: async function() {
   var self = this;
   try {
   var data = await this.getAccessToken("voice");
   Device.setup(data.data, { debug: true });
   } catch (error) {
   console.log(error);
   self.logVoice = "No se pudo obtener Token";
   }
   ... DO OTHER THINGS LIKE SETUP THE CALLBACKS AND WHATSOEVER ...
   }

Here's a screenshoot of my project where as you can see the connections is made succesfully, snd the twilio's log says the Device is ready:

Now when I try to do a browser to browser call the connection gets auto refused like this screenshot and log says):

The weird thing is, if I setup like this:

1. I remove the twilio-client npm: npm remove twilio-client --save
2. I add the twilio cdn's ascript tag to the index.html head tag: <script src="http://media.twiliocdn.com/sdk/js/client/v1.4/twilio.min.js"></script>
3. I add an external to my webpack configuration in vue.config.js:
   const path = require("path");

module.exports = {
chainWebpack: config => {
config.externals({
Twilio: "Twilio"
});
}
};

4. Finally i can import Twilio in my component from the external like this: const { Device } = require("Twilio");

Now the connection as before is correct, butthe differenc is that the call works without any troubles (I don't know what about those warnings, but it seems harmless, because even there are some of them, the Device is ready:

Now when I try the browser to browser call, the voice call in the caller tab, does start and the other tab receives the call as expected:
Caller Tab:

Receiver Tab:

I don't know if there's something wrong in my setup, but i followed the docs, and so far i can't make it work as needed.

Please help.

Software versions:

• Browser(s): Chromium
• Operating System: Linux Mint 19
• twilio.js: npm's latest version (as it says, it's the 1.9.7 (Dec 6, 2019))
• Third-party libraries (e.g., Angular, React, etc.): It's a vue vue@^2.6.10 vuecli 3 project.

[FEATURE] Add docs on how to use modern import

currently the docs only say:

const Device = require('twilio-client').Device;

But since this is for usage in a browser, and most browser apps now-a-days use modern import/export syntax, I'd love to know which one is correct:

import twilioClient from 'twilio-client'
const Device = twilioClient.Device

or

import * as twilioClient from 'twilio-client'
const Device = twilioClient.Device

or

import { Device } from 'twilio-client'

PS: I use typescript

[BUG] Not getting incoming event from the twilio-client device (happens intermittently)

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

We are using these code to get an incoming event, as referred by documentation.

Twilio.Device.on('incoming', (conn) => {
		console.log('Device - incoming call ', conn, Date.now());
	});

but sometimes we are not able to get that event

// TODO

Expected behavior: Twilio Device will get an incoming event while trying to make a call to that Twilio Device.

TODO

Actual behavior: Sometimes incoming event won't trigger from the Twilio Device while making a call to that device (it happen intermittently)

TODO

Software versions:

• Browser(s): Chrome, safari, edge, firefox
• Operating System:
• twilio.js: twilio-client.js (v1.9.7)
• Third-party libraries (e.g., Angular, React, etc.): Angular

[FEATURE] Clearly say in documentation that enableRingingState and answerOnBridge functionality will NOT work for trial accounts

Is your feature request related to a problem? Please describe.
When trying to configure twilio javascript client to handle ringing status for connection, documentation says to use enableRingingState param client side and answerOnBridge param server side. However, this will NOT work if you are using a free trial account: see here. Would be a huge time saver if this was specified in docs. At the least, it would be helpful to drop that info as a bullet point here.

Describe the solution you'd like
Specify this limitation clearly in the docs.

Describe alternatives you've considered

Additional context

[Bug] Incoming event will not trigger on rare conditions

Hi,
I have an issue potentially caused by the _showIncomingConnection behavior:
if I'm understanding if there is a ringtone problem the incoming event is not emitted but for what I know there isn't a connection problem so potentially I can notify in my app the incoming call (without the ringtone).
In my use case, I have 2 concurrent incoming calls and, without this event, I can't reject the second call and the app keep ringing even if I accepted the first call.

twilio-client.js/lib/twilio/device.ts

Line 1164 in 9c99954

private _showIncomingConnection(connection: Connection, play: Function): Promise<void> {

[BUG] Audio output channel is duplicated when using USB headset after getUserMedia()

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

Plug in a USB-A headset, visit https://networktest.twilio.com/ without any prior microphone permission granted, after accepting the permissions request, you will hear duplicate audio output. I have this issue with our app using twilio-client version 1.12.3. If you refresh the page, the audio output works as expected.

Expected behavior:

Using a USB-A headset I should only hear a single audio output

Actual behavior:

Using a USB-A headset I hear duplicated audio output

Software versions:

• Browser(s): Chrome Version 84.0.4147.135
• Operating System: macOS 10.15.6
• twilio.js: 1.12.3, 1.9.
• Third-party libraries (e.g., Angular, React, etc.): none

[BUG] Under certain network conditions, audio in dialer fails

• [ X ] I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• [ X ] I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• [ X ] I verified that the Quickstart application works in my environment.
• [ X ] I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

The issue we're facing is that some of our clients are using our application behind corporate proxies or behind restrictive firewalls. We can recreate the issue locally by blocking UPD connections on port range 10,000 - 20,000. The twilio network test tool also fails under these conditions.

This is all understandable, the problem is that the dialer and connection both throw no error and we have no way of detecting this problem to direct our users appropriately. The call simply completes and no audio is heard by either side. This is all around unacceptable user experience, the only work around we can figure right now is detecting a lack of audio from the connection for a certain time period

Expected behavior:

Ideally, the connection or device would throw some kind of error letting us know what's going on.

Actual behavior:

The device and connection both seem to have no idea anything is wrong but the call drops after some period of time.

Software versions:

• Browser(s): N/A
• Operating System: N/A
• twilio.js: Latest
• Third-party libraries (e.g., Angular, React, etc.): N/A

[BUG] Error code 9221 expired token

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

The issue:

Sometimes, network calls to https://eventgw.twilio.com/v4/EndpointEvents ( automatically called when a twilio call is ended, no way to prevent it) returns a 403 with the following exception being caught in sentry

{"code":9221,"message":"Expired token"}

I am openng this issue as the code 9221 is not documented anywhere, and I'm not sure where to even catch the problem.

I suspect this is caused by the token expiring while the call is open, then at the end, not having the new token prevents a successful network call.

However, what confuses me is the error code, which doesn't seem to be documented anywhere

Software versions:

• Browser(s):Chrome
• Operating System: Windows, macOS
• twilio.js: 1.9.0
• Third-party libraries (e.g., Angular, React, etc.): AngularJS ( angular 1 )

[BUG] twilio-client seems to break angular build

Code to reproduce the issue:

Actual behavior:

twilio-client seems to break angular build

ERROR in node_modules/twilio-client/es5/twilio/audiohelper.d.ts(16,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/audiohelper.d.ts(29,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/audiohelper.d.ts(33,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/connection.d.ts(50,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/connection.d.ts(55,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/device.d.ts(106,16): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/device.d.ts(111,16): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/device.d.ts(115,16): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/device.d.ts(119,16): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/device.d.ts(128,16): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/twilio-client/es5/twilio/pstream.d.ts(1,12): error TS2300: Duplicate identifier 'PStream'.
node_modules/twilio-client/es5/twilio/pstream.d.ts(17,18): error TS2300: Duplicate identifier 'PStream'.
node_modules/twilio-client/es5/twilio/pstream.d.ts(17,70): error TS2709: Cannot use namespace 'PStream' as a type.
node_modules/twilio-client/es5/twilio/pstream.d.ts(18,15): error TS2300: Duplicate identifier 'PStream'.
node_modules/twilio-client/es5/twilio/pstream.d.ts(53,16): error TS2709: Cannot use namespace 'PStream' as a type.

Software versions:

• Browser(s):
• Operating System:
• twilio.js:
• [ x ] Third-party libraries (e.g., Angular, React, etc.):
  • "typescript": "^2.9.2",
  • "twilio-client": "^1.6.9"
  • "@angular/cli": "~7.2.1",

To be Honest, extremely pathetic services !! Will look forward to alternatives of Twilio for sure!!

We have been using Twilio from past 3 years, it was a night mare implementing Video call, similarly it is being nightmare to implement a simple audio call feature.

Where the fuck events get fired if the receiving person disconnects the call? Where the hell event fires when the user didn't responded to the call? How to stop recording till another user picks up a call !!!

Extremely pathetic coding practices. Twilio should really hire engineers who can work with ES syntax atleast !!!

[BUG] Audiohelper, pstream and getUserMedia are required arguments

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:
I want to make call from browser to mobile phone, but have problem about AudioHelper and etc, I tried from v1.5 to 1.10, not working at all. Please let me know what is the solution. Thank you.

window.Twilio.Device.setup(token, {debug: true})
callParams = {
      From: "[phone]",
      To: "[phone]",
      Record: true,
      Conference: false,
      UserId: 1,
}
window.Twilio.Device.connect(callParams)

Blocker or Error:

Audiohelper, pstream and getUserMedia are required arguments

Browser Console:

Setting up VSP
WSTransport.open() called...
Attempting to connect...
Closing and cleaning up WebSocket...
No WebSocket to clean up.

Device callback handlers (connect, error, offline, incoming, cancel, ready, disconnect)         have been deprecated and will be removed in the next breaking release. Instead, the EventEmitter         interface can be used to set event listeners. Example: device.on('ready', handler)
newFn @ console.js:13
n @ react_devtools_backend.js:562
Log.log @ twilio.min.js:55
Log.warn @ twilio.min.js:55
Device._addHandler @ twilio.min.js:55
Device.ready @ twilio.min.js:55
__setup__REACT_HOT_LOADER__ @ index.js:142
__setup__REACT_HOT_LOADER__ @ createPrototypeProxy.js:44
Twilio._this.setup @ index.js:36
(anonymous) @ index.js:54
Promise.then (async)
componentDidMount @ index.js:53
proxiedComponentDidMount @ createPrototypeProxy.js:66
commitLifeCycles @ react-dom.development.js:14684
commitAllLifeCycles @ react-dom.development.js:15904
callCallback @ react-dom.development.js:145
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:248
commitRoot @ react-dom.development.js:16074
completeRoot @ react-dom.development.js:17462
performWorkOnRoot @ react-dom.development.js:17390
performWork @ react-dom.development.js:17294
performSyncWork @ react-dom.development.js:17266
requestWork @ react-dom.development.js:17154
scheduleWork @ react-dom.development.js:16948
enqueueSetState @ react-dom.development.js:11622
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:413
onStateChange @ connectAdvanced.js:205
dispatch @ createStore.js:173
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
(anonymous) @ helpers.js:47
Promise.then (async)
(anonymous) @ helpers.js:112
(anonymous) @ index.js:8
load @ smartify.js:30
work @ smartify.js:36
resolveWork @ react-jobs.js:251
componentWillReceiveProps @ react-jobs.js:207
callComponentWillReceiveProps @ react-dom.development.js:11848
updateClassInstance @ react-dom.development.js:12041
updateClassComponent @ react-dom.development.js:13498
beginWork @ react-dom.development.js:14089
performUnitOfWork @ react-dom.development.js:16415
workLoop @ react-dom.development.js:16453
renderRoot @ react-dom.development.js:16532
performWorkOnRoot @ react-dom.development.js:17386
performWork @ react-dom.development.js:17294
performSyncWork @ react-dom.development.js:17266
requestWork @ react-dom.development.js:17154
scheduleWork @ react-dom.development.js:16948
enqueueSetState @ react-dom.development.js:11622
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:413
onStateChange @ connectAdvanced.js:205
dispatch @ createStore.js:173
(anonymous) @ index.js:11
dispatch @ applyMiddleware.js:35
loginWithNewToken @ index.js:340
callAfter @ helpers.js:312
Promise.then (async)
(anonymous) @ helpers.js:315
(anonymous) @ index.js:8
loginAsRep @ smartify.js:33
onClick @ index.js:155
EnhancedButton._this.handleTouchTap @ EnhancedButton.js:146
callCallback @ react-dom.development.js:145
invokeGuardedCallbackDev @ react-dom.development.js:195
invokeGuardedCallback @ react-dom.development.js:248
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:262
executeDispatch @ react-dom.development.js:593
executeDispatchesInOrder @ react-dom.development.js:612
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:724
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:855
runExtractedEventsInBatch @ react-dom.development.js:864
handleTopLevel @ react-dom.development.js:4857
batchedUpdates$1 @ react-dom.development.js:17497
batchedUpdates @ react-dom.development.js:2189
dispatchEvent @ react-dom.development.js:4936
interactiveUpdates$1 @ react-dom.development.js:17552
interactiveUpdates @ react-dom.development.js:2208
dispatchInteractiveEvent @ react-dom.development.js:4913

WebSocket opened successfully.
[PStream] Setting token and publishing listen
Received error:  {code: 31100, message: "Invalid application SID"}code: 31100message: "Invalid application SID"__proto__: Object
Uncaught error event suppressed.
[PStream] Received "close" from server. Destroying PStream...
WSTransport.close() called...
Closing and cleaning up WebSocket...
Stream is offline

twilio.min.js:55 Uncaught Error: Audiohelper, pstream and getUserMedia are required arguments
    at new PeerConnection (twilio.min.js:55)
    at new Connection (twilio.min.js:55)
    at Device._makeConnection (twilio.min.js:55)
    at Device.connect (twilio.min.js:55)
    at Object.onClick (smartify.js:47)
    at EnhancedButton._this.handleTouchTap (EnhancedButton.js:146)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:262)

Software versions:

• Browser(s): 83.0.4103.116
• Operating System: Catalina 10.15.5
• twilio.js: v1.5-1.10
• Third-party libraries (e.g., Angular, React, etc.): React

Test issue hook

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[BUG] _updateAvailableDevices continuously throws uncaught rejection

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:
connect a call on mobile android Google Chrome, see error:

// "This browser does not support audio output selection"
// from OutputDeviceCollection.prototype.set
if (!this._isSupported) {
  return Promise.reject(
    new errors_1.NotSupportedError("This browser does not support audio output selection"),
  );
}

I was able to stop the errors by adding a check outputDevices._isSupported in the _updateAvailableDevices body:

_this._updateAvailableDevices = function() {
  if (!_this._mediaDevices) {
    return Promise.reject("Enumeration not supported");
  }
  return _this._mediaDevices.enumerateDevices().then(function(devices) {
    _this._updateDevices(
      devices.filter(function(d) {
        return d.kind === "audiooutput";
      }),
      _this.availableOutputDevices,
      _this._removeLostOutput,
    );
    _this._updateDevices(
      devices.filter(function(d) {
        return d.kind === "audioinput";
      }),
      _this.availableInputDevices,
      _this._removeLostInput,
    );
    var defaultDevice =
      _this.availableOutputDevices.get("default") || Array.from(_this.availableOutputDevices.values())[0];
    [_this.speakerDevices, _this.ringtoneDevices].forEach(function(outputDevices) {
      // I added isSupported check here
      if (outputDevices._isSupported && !outputDevices.get().size && _this.availableOutputDevices.size) {
         // I added the catch here as well, but now it is not called so it throws no error
        outputDevices.set(defaultDevice.deviceId).catch(err => console.error(err));  
      }
    });
  });
};

But I don't know if this will have side effects. Could anyone advise?

Software versions:

• Browser(s): mobile google chrome 80.0.3987.99
• Operating System: android
• twilio.js: 1.10
• Third-party libraries (e.g., Angular, React, etc.): vanilla

[BUG] rtt in sample data returned from listener callback is in seconds when client is uing Firefox

• I have verified that the issue occurs with the latest twilio.js release and is not marked as a known issue in the CHANGELOG.md.
• I reviewed the Common Issues and open GitHub issues and verified that this report represents a potentially new issue.
• I verified that the Quickstart application works in my environment.
• I am not sharing any Personally Identifiable Information (PII)
  or sensitive account information (API keys, credentials, etc.) when reporting this issue.

Code to reproduce the issue:

connecton.on('sample', (sample) => {
  console.log('RTT:', sample.rtt);
});

Expected behavior:

Rtt is reported in milliseconds

Actual behavior:

Software versions:

• Browser(s): Firefox Developer Edition 71.0b11
• Operating System: OSX 10.14.6
• twilio.js: flex-ui: 1.14.1, twilio: 3.37.1, twilio-client: 1.9.5
• Third-party libraries (e.g., Angular, React, etc.): React = 16.11.0, Redux = 3.7.1, Typescript = 3.7.2

[FEATURE] Connection.EventName Enum

Describe the solution you'd like
It would be helpful if we could get a enum for Connection.EventName:

declare namespace Connection {

  enum EventName{
    ACCEPT = 'accept',
    CANCEL = 'cancel',
    DISCONNECT = 'disconnect',
    ERROR = 'error',
    MUTE = 'mute',
    RECONNECTING = 'reconnecting',
    RECONNECTED = 'reconnected',
    REJECT = 'reject',
    RINGING = 'ringing',
    SAMPLE = 'sample',
    VOLUME = 'volume',
    WARNING = 'warning',
    WARNING_CLEARED = 'warning-cleared',
    TRANSPORT_CLOSE = 'transportClose' //This one's in connections.js but I'm not sure if it's relevant.
  }

}

This would be similar to the existing Device.EventName enum.