Bluetooth connectivity issue

[vishallovecode]

Describe the bug Disconnect Bluetooth does not works.

To Reproduce Steps to reproduce the behavior: P1 => local participant P2 => Remote participant

1. P1 initiate the call with bluetooth connectivity.
2. P2 joined the call
3. P1 speak something
4. P2 able to hear that
5. P1 disconnected the bluetooth
6. P1 speaks something
7. P2 not able to hear anything (This is the issue)
8. P2 speaks P1 able to hear
9. P1 again connected the bluetooth and speaks
10. P2 not able to hear again(this is the issue)
11. P2 speaks p1 able to hear

Expected behavior Point number 7 and 8 should work ideally P2 should able to hear P1 voice

Environment (please complete the following information):

• OS: all
• Browser: all
• App Version:latest
• SDK Version: 2.4.0
• Node.js version: 14.15.1

[olipyskoty]

Hey @lpuvishal, thanks for reaching out!

I tried to reproduce your issue by following the steps that you listed above, and was unable to do so. When I disconnected my bluetooth headphones, and connected to my macbook's built-in speaker, the second participant was able to hear me. They were also able to hear me when I reconnected my bluetooth headphones.

While I was investigating your issue, I remembered that this was indeed a bug a little while ago, and we were able to solve it here.

I see that you mentioned that you are using the latest version of the App which should include the code needed to prevent this issue from happening. Can you please confirm that your code includes thisuseRestartAudioTrackOnDeviceChange hook, and that is being called inside the VideoProvider (like we do here).

I also see that you mentioned that you are using SDK version 2.4.0, it is possible that upgrading twilio-video to ^2.21.0 will do the trick.

If you're still having this issue, we will need some more information to help with debugging. Would you mind providing us with the specific OS and Browsers you've run into this issue with? This will help us with reproducing the steps you provided, and with understanding if the issue is OS and/or browser specific, or a problem with the app or SDK. Thank you!

[vishallovecode]

@olipyskoty Thank you so much for the help. I am using twilio npm package. we are not using useRestartAudioTrackOnDeviceChange this method in our code base can you please help me how to use this method ?thanks. We are using twilio library directly in our code base not a sdk. "twilio-video": "2.12.0",

[olipyskoty]

Hi @lpuvishal!

Since you're not using the useRestartAudioTrackOnDeviceChange hook in your code, it sounds like you've built your own twilio-video application, so it is difficult to advise on where to tell you to put this code without seeing your own.

That being said, I can give you some pointers on how the custom hook is handling this which can hopefully help you fix the issue! You will need to re-aquire a mediaStreamTrack from the system's default audio device when it detects that the published audio device has been disconnected. Here's how we do this in this app:

1. Get the participant's audio track: const audioTrack = localTracks.find(track => track.kind === 'audio');
2. Create a function to run when the devicechange event is detected on navigator.mediaDevices:

   const handleDeviceChange = () => {
     if (audioTrack?.mediaStreamTrack.readyState === 'ended') {
       audioTrack.restart({});
     }

3. Add the event listener to navigator.mediaDevices: navigator.mediaDevices.addEventListener('devicechange', handleDeviceChange);

The useRestartAudioTrackOnDeviceChange hook has this code in a useEffect() and then this hook is called inside the VideoProvider so that the other components have access to it.

Hopefully that is enough to unblock you, but please let us know if you have any other questions!

[vishallovecode]

Hi @olipyskoty I have fixed this issue. Thank you for your help.