[BUG] event devicechange was not fired consistently

[srtella]

• 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:
when an audio device/headset was connected or disconnected, devicechange event should be fired consistently

Actual behavior:
When not in call, devicechange event was fired 3 times (2 for input and 1 for output)
While in call, devicechange event was fired 2 times (1 time for audioinput and 1 time for audiooutput)

debug log when no call:

[TwilioVoice][WSTransport] heartbeat
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange []
voice-sdk.js:6338 [TwilioVoice][EventPublisher] Publishing cancelled. Missing connection object
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange []
voice-sdk.js:6338 [TwilioVoice][EventPublisher] Publishing cancelled. Missing connection object
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange []
voice-sdk.js:6338 [TwilioVoice][EventPublisher] Publishing cancelled. Missing connection object
voice-sdk.js:6338 [TwilioVoice][OutputDeviceCollection] .delete MediaDeviceInfoShim {}
voice-sdk.js:6338 [TwilioVoice][OutputDeviceCollection] .delete MediaDeviceInfoShim {}
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange []
voice-sdk.js:6338 [TwilioVoice][EventPublisher] Publishing cancelled. Missing connection object
2voice-sdk.js:6338 [TwilioVoice][EventPublisher] Publishing cancelled. Missing connection object
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange []length: 0[[Prototype]]: Array(0)
voice-sdk.js:6338 [TwilioVoice][EventPublisher] Publishing cancelled. Missing connection object
voice-sdk.js:6338 [TwilioVoice][WSTransport] heartbeat
voice-sdk.js:6338 [TwilioVoice][WSTransport] Sending: {"payload":{"media":{"audio":true}},"type":"register","version":"1.6"}
3voice-sdk.js:6338 [TwilioVoice][WSTransport] heartbeat

debug log while in call:

voice-sdk.js:6338 [TwilioVoice][AudioHelper] .incoming undefined
voice-sdk.js:6338 [TwilioVoice][AudioHelper] .setInputDevice default
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Opening default device with constraints {audio: true}
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Setting input device. ID: default
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: getting new tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Opened default device. Updating available devices.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: invoking _onActiveInputChanged.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] stopping default device stream
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Replacing with new stream.
voice-sdk.js:6386 [TwilioVoice][AudioHelper] Calling getUserMedia after device change to ensure that the tracks of the active device (default) have not gone stale.
Log.warn @ voice-sdk.js:6386
AudioHelper._updateDevices @ voice-sdk.js:930
(anonymous) @ voice-sdk.js:294
Promise.then
AudioHelper._this._updateAvailableDevices @ voice-sdk.js:292
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange []
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Setting input device. ID: default
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Same track detected on setInputDevice, stopping old tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: getting new tracks.
voice-sdk.js:6386 [TwilioVoice][AudioHelper] Calling getUserMedia after device change to ensure that the tracks of the active device (default) have not gone stale.
Log.warn @ voice-sdk.js:6386
AudioHelper._updateDevices @ voice-sdk.js:930
(anonymous) @ voice-sdk.js:293
Promise.then
AudioHelper._this._updateAvailableDevices @ voice-sdk.js:292
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange []
voice-sdk.js:6338 [TwilioVoice][AudioHelper] .setInputDevice 1f01d63d897145eab063d76d2a7c42a9f1182ed6a72acf42c6419e2f54d25d81
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Setting input device. ID: 1f01d63d897145eab063d76d2a7c42a9f1182ed6a72acf42c6419e2f54d25d81
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: getting new tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Setting input device. ID: default
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Same track detected on setInputDevice, stopping old tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: getting new tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: invoking _onActiveInputChanged.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Replacing with new stream.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Old stream detected. Stopping tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: invoking _onActiveInputChanged.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Replacing with new stream.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Old stream detected. Stopping tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: invoking _onActiveInputChanged.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Replacing with new stream.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Old stream detected. Stopping tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6386 [TwilioVoice][AudioHelper] Calling getUserMedia after device change to ensure that the tracks of the active device (default) have not gone stale.
Log.warn @ voice-sdk.js:6386
AudioHelper._updateDevices @ voice-sdk.js:930
(anonymous) @ voice-sdk.js:294
Promise.then
AudioHelper._this._updateAvailableDevices @ voice-sdk.js:292
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange []
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Setting input device. ID: default
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Same track detected on setInputDevice, stopping old tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: getting new tracks.
voice-sdk.js:6386 [TwilioVoice][AudioHelper] Calling getUserMedia after device change to ensure that the tracks of the active device (default) have not gone stale.
Log.warn @ voice-sdk.js:6386
AudioHelper._updateDevices @ voice-sdk.js:930
(anonymous) @ voice-sdk.js:293
Promise.then
AudioHelper._this._updateAvailableDevices @ voice-sdk.js:292
voice-sdk.js:6338 [TwilioVoice][AudioHelper] #deviceChange [MediaDeviceInfoShim]
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Setting input device. ID: default
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Same track detected on setInputDevice, stopping old tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: getting new tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: invoking _onActiveInputChanged.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Replacing with new stream.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Old stream detected. Stopping tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6362 [TwilioVoice][AudioHelper] setInputDevice: invoking _onActiveInputChanged.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Replacing with new stream.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Old stream detected. Stopping tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream
voice-sdk.js:6338 [TwilioVoice][AudioHelper] .disconnect undefined
voice-sdk.js:6338 [TwilioVoice][AudioHelper] .unsetInputDevice MediaDeviceInfoShim {}
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Replacing with new stream.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Old stream detected. Stopping tracks.
voice-sdk.js:6362 [TwilioVoice][AudioHelper] Stopping selected device stream

Software versions:

• [ x] Browser(s): chrom 130
• Operating System: mac OS Sequoia 15.1, windows 11
• twilio.js: 2.12.1
• Third-party libraries (e.g., Angular, React, etc.):

[charliesantos]

Thanks for submitting @srtella . The SDK only bubbles up the event received from the native devicechange event. https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/devicechange_event
Can you please subscribe to this native event outside of the SDK and see if you're also seeing the same behavior?

[srtella]

@charliesantos i just tried and i do see the event originated from MediaDevices. To handle it properly on the application side, it would be better to share the audio device type information in the devicechange event, which is known to voice-sdk.
Something like instead of current:
this.emit('deviceChange', lostActiveDevices);
better to update it as:
this.emit('deviceChange', {deviceType, lostActiveDevices});

[charliesantos]

@srtella this is a good suggestion. However, it needs to be on a major version since this is considered a breaking change on the API.