LocalAudioTrack.stop() freezes tab in iOS >=14.4.1 Safari on iPhone 12

[ariboren]

Code to reproduce the issue:

const room = await connect(token, { name: 'someRoom', audio: true, video: true });

// Sometime later, user turns off mic
room.localParticipant.audioTracks.forEach((publication) => {
    // Bug triggered here
    publication.track.stop();

    // Never gets here
    publication.unpublish();
});

Expected behavior:

User's audio track should be unpublished from the room, and their device should no longer report the microphone as being used by the tab running Twilio Video.

Actual behavior:

On iPhone 12 Pro and Pro Max running iOS 14.4.1 or later, the call to publication.track.stop() freezes the tab. The entire page UI becomes unresponsive, and the video element attached to the LocalVideoTrack freezes on the last played frame. The page unfreezes on its own after 5+ seconds.

In the debug logs below, you can see that the stop and unpublish sequence succeeds within the first few milliseconds, followed by radio silence for over 10 seconds, including no heartbeats logs.

[Info] 2021-03-31T21:26:00.871Z – "info" – "[LocalAudioTrack #1: 77f75de5-f466-408f-bfb2-cabfbd3494dd]" – "Stopping"
[Log] 2021-03-31T21:26:00.871Z – "debug" – "[LocalAudioTrack #1: 77f75de5-f466-408f-bfb2-cabfbd3494dd]" – "Ended"
[Info] 2021-03-31T21:26:00.886Z – "info" – "[LocalParticipant #1: PAf85a581ea238024ea6ed882a0bb9deb9]" – "Removed a AudioTrack:" – "77f75de5-f466-408f-bfb2-cabfbd3494dd"
[Log] 2021-03-31T21:26:00.886Z – "debug" – "[LocalParticipant #1: PAf85a581ea238024ea6ed882a0bb9deb9]" – "AudioTrack:" – LocalAudioTrack {_events: {}, _eventsCount: 0, _maxListeners: undefined, …}
[Info] 2021-03-31T21:26:00.887Z – "info" – "[LocalParticipant #1: PAf85a581ea238024ea6ed882a0bb9deb9]" – "Removed a LocalAudioTrack:" – "77f75de5-f466-408f-bfb2-cabfbd3494dd"
[Log] 2021-03-31T21:26:00.887Z – "debug" – "[LocalParticipant #1: PAf85a581ea238024ea6ed882a0bb9deb9]" – "LocalAudioTrack:" – LocalAudioTrack {_events: {}, _eventsCount: 0, _maxListeners: undefined, …}
[Info] 2021-03-31T21:26:00.887Z – "info" – "[LocalParticipant #1: PAf85a581ea238024ea6ed882a0bb9deb9]" – "Removed a AudioTrackPublication:" – "MTd268b7db1017467749169d7a5d8b1f45"
[Log] 2021-03-31T21:26:00.887Z – "debug" – "[LocalParticipant #1: PAf85a581ea238024ea6ed882a0bb9deb9]" – "AudioTrackPublication:" – LocalAudioTrackPublication {_events: {}, _eventsCount: 0, _maxListeners: undefined, …}
[Log] 2021-03-31T21:26:11.005Z – "debug" – "[TwilioConnection #1: wss://global.vss.twilio.com/signaling]" – "Outgoing: {\"body\":{\"session\"

Additional notes:

I've tried seemingly every method and permutation of stopping/unpublishing the audio track, to no avail. The same flow works perfectly with video tracks, and so far the bug has been limited to this particular device, browser, and OS combination. I also confirmed that calling stop on a vanilla audio MediaStreamTrack works fine, so the issue seems to live somewhere in the Twilio LocalAudioTrack class.

Software versions:

• Browser(s): Safari
• Operating System: iOS 14.4.1, 14.4.2
• twilio-video.js: >=2.0.0
• Third-party libraries: React

Due diligence

• I have verified that the issue occurs with the latest twilio-video.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.

[charliesantos]

Hi @ariboren ,

Thanks for submitting! What is the exact version of twilio-video.js are you using?

Thanks,
Charlie

[ariboren]

Hi @charliesantos. Thanks for the followup. I'm using 2.13.1 but have been able to repro the bug all the way back to 2.0.0.

[ariboren]

Any clues on this? I'm currently working around it by forcing a full page refresh when a user leaves the call, but it's a suboptimal UX.

[charliesantos]

Hey @ariboren thanks for the ping. We are not doing anything special on iPhone 12 so it'll require us to investigate this further. I will add an internal ticket for this.

[ariboren]

Ok, sounds great! Thanks for the help.

[acro5piano]

I have a similar experience and doing full page refresh after a call session too.

@ariboren
Are you using a JavaScript framework in the project? I'm using React and the issue seems to be related to component cleanup process.

[ariboren]

@acro5piano yep I'm using React too. I haven't been able to dig into it much lately but that sounds plausible! I'll let you know if I make any discoveries today.

[charliesantos]

@acro5piano @ariboren when you get a chance, can you please try your reproduction steps to our quickstart app and see if it's reproducible? https://github.com/twilio/video-quickstart-js/tree/master/quickstart

[ariboren]

@charliesantos I'm not able to reproduce in the quickstart app because it doesn't contain this user flow. "Leave room" disconnects from the room but doesn't stop the audio and camera tracks, and there doesn't appear to be a different way to stop the tracks manually.

[acro5piano]

@charliesantos
In the document, disabling media stream isn't recommended. I'm curious why this is not recommended?

  publication.track.stop();
  publication.unpublish();

I think in the most cases PC light next to a webcam should be turned off because user may feel weird.

https://www.twilio.com/docs/video/javascript-v2-getting-started#mute-your-local-media

Thanks

[charliesantos]

In the document, disabling media stream isn't recommended. I'm curious why this is not recommended?

@acro5piano this is a great question! I'll find more information as part of the the internal ticket about this.