Consider device key '' when evaluating for 'default' device

[kmteras]

On Chrome, if no media device permissions are given, the devices are exposed with minimal info:

[
  {deviceId:'',kind:'audioinput',label:'',groupId:''},
  {deviceId:'',kind:'videoinput',label:'',groupId:''},
  {deviceId:'',kind:'audiooutput',label:'',groupId:''}
]

After the media device permissions have been granted, a devicechange event is triggered and the previous device '' is supposed to be removed but never is.

This resulted in duplicate audio for users who are presented with the microphone permissions on their first call as the previous output device '' never got properly removed.

Contributing to Twilio

All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.

• [x] I acknowledge that all my contributions will be made under the project's license.

Pull Request Details

Description

We were getting reports of clients complaining about echo from their side.

I managed to reproduce the issue when the user had not given any media permissions to the site before the call was started. And the audio playback was echoy/reverby. This does not come across on any of the recordings as the audio being sent to the user is right.

Tracked the issue down to devices changing on Chrome when permissions are granted and narrowed it down to the device '' not being removed properly when 'default' is available. This issue can be reproduced on Chrome or other Chromium based browser but does not exist on Firefox as Firefox presents the full devices list even without any permissions.

Burndown

Before review

• [ ] Updated CHANGELOG.md if necessary
• [x] Added unit tests if necessary
• [ ] Updated affected documentation
• [x] Verified locally with npm test
• [x] Manually sanity tested running locally
• [ ] Ready for review

Before merge

• [ ] Got one or more +1s
• [ ] Squashed erroneous commits if necessary
• [ ] Re-tested if necessary