[BUG] Error while calling setInputDevice when twilio sdk was instantiated with microphone permissions not granted

[PriscilaAlves]

• 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:

When the app is opened and Twilio device is initialized, ensure you haven't granted microphone permissions yet.
Then, grant permissions to microphone and only after call setInputDevice

this.twilioDevice = new Device(token, options)

// grant permissions to microphone in the browser
try {
 await this.twilioDevice.audio.setInputDevice('default')
} catch (e) {
 console.log(e)
}

Expected behavior:

It should succeed to set the input device since the permissions are already granted

Actual behavior:

It fails to set input device with the error:
InvalidArgumentError: Device not found: default

Software versions:

• Browser(s): Chrome Version 119.0.6045.199 (Official Build) (arm64)
• Operating System: Mac OS
• twilio.js: 2.8.0
• Third-party libraries (e.g., Angular, React, etc.):

[charliesantos]

@PriscilaAlves thanks for reaching out! This happens because the device ID that you're passing to setInputDevice is not detected. To properly update the internal list of device IDs, you need to grant permissions before initializing the device. For example:

// ask permission
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
stream.getTracks().forEach(track => track.stop());

this.twilioDevice = new Device(token, options);
await this.twilioDevice.audio.setInputDevice('default')

[PriscilaAlves]

@charliesantos Thanks for the response.
Although I know that would work as a workaround, I don't think it should be needed to instantiate the Twilio Device only after the permissions are set.

I think Twilio SDK should be listening to navigator.permissions state changes and update the availableInputDevices list when the access is granted

This is an example of the code that could live inside the audiohelper.js file:

const permissionStatus = await navigator.permissions.query({ name: 'microphone' })
if (permissionStatus.state != 'granted') {
  permissionStatus.onchange = function () {
    //update this.availableInputDevices list
 }
}

[charliesantos]

@PriscilaAlves thanks for the suggestion. This is a great improvement and we will consider it.

[charliesantos]

Closing this now. We're tracking this feature request internally. Please feel free to follow up if needed.

[charliesantos]

@PriscilaAlves this is currently in a PR (#283 )
We are able to test with the following code.

this.twilioDevice = new Device(token, options);

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
stream.getTracks().forEach(track => track.stop());

await this.twilioDevice.audio.setInputDevice('default');