iPhone: unplugging/replugging headphones causes audio problems

[j-conrad]

While in a space with another user, user A unplugs headphones (standard issue Apple wired earbuds) then plugs them back in. The result is that they now cannot hear user B. It seems that sometimes it causes garbled audio instead of no audio. User B can still hear user A just fine as it doesnt seem to affect user A’s headphone mic—(or perhaps it’s using the built-in iPhone mic at this point?)
This persists until user B refreshed their page, which seems strange since the assumption is its an issue on user A’s end.
Then, to make things more interesting, user C joined and subsequently plugged in headphones, causing user B to not hear user C while user A could hear user C just fine.
The bottom line:
plugging in headphones post-join is likely to cause audio issues.
This issue was reproducible on two users’ iPhones. (6s)

[j-conrad]

I neglected to mention In the scenario above, user C was on an iPhone 7 (not sure if wireless or using a wired adaptor).

[gfodor]

i tested and confirmed this on iPad. I didn't see any errors, and it seems like it would only completely die after several unplug/replugs. It seems like a bug in safari.

[gfodor]

I was not able to repro this with the three.js examples -- so may be fixable if we can track down what we're doing differently

[gfodor]

also not able to repro with janus echo server example

[vincentfretin]

I just fixed this issue in my app.
The issue is that the AudioContext goes into the suspended state, so you need to resume the AudioContext from a user gesture.
https://stackoverflow.com/questions/10232908/is-there-a-way-to-detect-a-mobile-safari-audio-interruption-headphones-unplugg

In your AudioSystem, add something like this.

    this.audioContext.onstatechange = () => {
      console.log(`AudioContext state changed to ${this.audioContext.state}`);
      if (this.audioContext.state === "suspended") {
        // When you unplug the headphone or when the bluetooth headset disconnects on
        // iOS Safari or Chrome, the state changes to suspended.
        // Chrome Android doesn't go in suspended state for this case.
        const msg = `The audio has been suspended, click somewhere in the room to resume the audio.`;
        window.app.addToPresenceLog({ type: "log", body: msg });
        document.body.addEventListener("touchend", resume, false);
        document.body.addEventListener("mouseup", resume, false);
        window.app.audioContextNeedsToBeResumed = true;
      } else if (this.audioContext.state === "running" && window.app.audioContextNeedsToBeResumed) {
        window.app.audioContextNeedsToBeResumed = false;
        const msg = `The audio is now enabled again.`;
        window.app.addToPresenceLog({ type: "log", body: msg });
      }
    }

[vincentfretin]

@keianhzo @robertlong You'll want the above fix as well. More or less add the code at this line https://github.com/mozilla/hubs/blob/ed15a0bc2347c7963fce828fe00fcfe8c29601c6/src/systems/audio-system.js#L98
I didn't bother to create a PR for this because the other ones I created I didn't have a feeback for 3 months.

There is also another fix for Safari iOS here #2643 (comment)

[keianhzo]

Thanks @vincentfretin this is great work, we really appreciate your contributions. I'll create a PR for for this. And sorry for the delay, we have been a bit slow with Pr reviewing lately but we will make sure all this work gets into Hubs.