Twilio Voice Javascript SDK: Audio randomly missing on the call

Question

I am using the @twilio/voice-sdk 2.8.0 for my web application.

What I current have:

From the web app, a user can initiate a call to Twiml App. The Twiml App will send my backend a webhook to retrieve the instruction (very basic application like here https://www.twilio.com/docs/voice/sdks/javascript). Then the user can hear the instructions, for example:

<Say>Hello welcome to bla bla bla bla bla...</Say>
<Dial>some-number</Dial>

• My application can only initiate call and not receive one.
• I make sure to request microphone permission
• During these tests, my token is valid. If it's about to expired, I renew it
• When a call end, I make sure to destroy the device and recreate device for new call
• There is no client or server errors.

// not the full code, just the gist of it
try {
  await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
  const device = new Device(token);
  const call = await device.connect({});
} catch (error) {

}

call.on('disconnect', (call) => {
  device.destroy();
})

Issue:

Usually when a call starts, you will hear a default sound/ding, then you will hear the instruction from the Twiml verb. But after testing a while, when initiate the call, I can only hear that ding sound and no audio from the Twiml verb. From that point, I can't hear any audio from any subsequence calls.

The only way for me to get it working back is to either switch browser. Or I have to toggle the microphone permission in setting again.

What could cause the audio to not working? Is there a way to ensure audio always work?

I appreciate the help! Thanks!